# 快速开始

# 安装

Manis Web SDK 3+ 将公共依赖库独立出来，需要在引入SDK文件前先行引入. 主要依赖有：

adapter.js (opens new window), 最新稳定版是v7.2.5，开发本SDK时主要用到的是v7.0.0，可以酌情参考使用。
socket.io.js (opens new window), 最新稳定版本是v3.0.3开发本SDK时主要用的是v2.3.0版本，可酌情参考

从官方渠道获取Manis Web SDK 3+的SDK包，在引入上述依赖库之后引入SDK文件.


<script type="application/javascript" src="manis_web_sdk_hash_v3.x.x.min.js"></script>

所有包引入成功之后，就可以开始着手使用了，只需要跟着下面简单几步，就可以快速接入到频道并构建音视频通讯了。

# 初始化

使用Manis.createClient(options)创建客户端实例，

options为javascript字典对象，有如下成员属性；返回一个客户端实例对象

名称	类型	说明	备注
host	string (opens new window)	连接系统服务器地址(域名、IP地址)
accessKey	string (opens new window)	用户授权字符换	在个人中心->AccessKey页面创建密钥对
accessSecret	string (opens new window)	用户授权密钥	在个人中心->AccessKey页面创建密钥对
appId	string (opens new window)	应用标识唯一字符串	appId:登录到系统之后,在项目管理中新建获得

示例：

    Manis.createClient({
        host: 'hostServer',
        accessKey: 'accessKey',
        accessSecret: 'accessSecret',
        appId: 'appId'
    })

# 加入频道

使用Promise (opens new window) Manis.join(channel, nickname)加入到频道，

接收三个必选参数，channel,nickname和userId，返回一个Promise对象实例

名称	类型	说明	备注
channel	string (opens new window)	需要加入的频道ID	通过服务端接口获取得到
nickname	string (opens new window)	加入频道后显示的用户昵称
userId	string (opens new window)	用户唯一标识
layout	string (opens new window)	会议视频窗口(远端)布局	可选参数, 布局ID,默认是`allEqualNinths` (`stacked` 堆叠布局,`allEqualQuarters` 4分屏,`allEqualNinths` 9分屏,`allEqualSixteenths` 16分屏)
resolution	json (opens new window)	会议视频窗口(远端)分辨率	可选参数, 分辨率对象`{width: '1280', height: '720'}`

示例：

    const ramdomNum = Math.floor(Math.random() * 9999)
    const channel = ramdomNum
    const nickname = '参会者_' +ramdomNum
    const userId = 'User_' + ramdomNum
    const layout = 'allEqualNinths'
    const resolution = {
      width: 1280,
      heght: 720
    }
    Manis.join(channel, nickname, userId, layout, resolution).then(resp => {
        console.log('加入频道成功: ', resp)
        // 返回当前用户对象
    }).catch(err => {
        console.log('加入失败: ', err)
    })

注意：在调用加入频道返回成功之后，应立即订阅事件，以备即时收到频道内的事件推送。也可以在初始化完成之后就完成事件订阅

# 注册用户加入/离开频道事件

使用Manis.onUserEvent(callback)捕获用户事件，

接收一个回调函数，回调函数中返回事件实体, 根据事件类型做相应逻辑处理.

名称	类型	说明	备注
callback	function (opens new window)	频道中用户进入/离开事件	回调函数中返回事件实例

示例：

    /*订阅有用户进入频道*/
    Manis.onUserEvent(userEvent => {
        console.log('捕获用户事件', userEvent)
        // data: Participant {id: "jB0nzXmBQx-Y5x8wAAFn", …} // 用户信息对象实体
        // kind: "join"
        // type: "someoneJoined"  // 事件类型: someoneJoined => 用户加入频道, someoneLeft => 用户离开频道
    })

注意：注册订阅应该在加入频道之后即刻完成或者在初始化完成之后就完成订阅注册。需要在返回的用户实例上增加用户离开频道的监听才能接收到用户离开频道的通知

# 注册有用户往频道中推送流媒体

使用Manis.userPublished(callback)监听有用户推送流媒体到频道中，

接收一个回调函数，回调函数中返回接收到的远端用户推送的流媒体信息，使用该信息调用后面的订阅方法就可以订阅到频道中对应的流媒体并渲染。

名称	类型	说明	备注
callback	function (opens new window)	有远端用户推送流媒体到频道	回调函数中返回远端流媒体信息

示例：

    /*监听有流媒体接入*/
    Manis.userPublished(res => {
        console.log('收到远端流信息: ', remoteStream)
        if (remoteStream) {
            // 使用该媒体信息,调用订阅方法订阅频道中的流媒体
            Manis.subscribe(remoteStream)
        }
    })

注意：返回的媒体信息还不是完整的流媒体资源,使用该媒体信息,通过调用订阅媒体方法可以更灵活方便的分别订阅媒体频道中的音视频等流媒体资源

# 订阅流媒体

使用Promise (opens new window)Manis.subscribe(remoteStream, subscribeOptions)订阅上一步获取到的媒体信息中的媒体资源，

接收媒体资源信息remoteStream和可选参数订阅选项subscribeOptions，返回一个Promise对象实例

名称	类型	说明	备注
remoteStream	Object (opens new window)	频道中远端流媒体信息	加入频道和用户推送流媒体事件中都会回调
subscribeOptions	Object (opens new window)	订阅选项	默认为音视频都订阅

示例：

    /*监听有流媒体接入*/
    const subscribeOptions = {audio: true, video: true}
    Manis.subscribe(remoteStream, subscribeOptions).then(remote => {
        console.log('订阅媒体成功: ', remote)
        // 其中remote.stream订阅到的远端媒体信息, remote.stream.mediaStream就是我们需要渲染的音视频媒体资源, 示例: 
        const element = document.createElement('video');
        element.id = 'remote_video_' + index;
        element.autoplay = true;
        element.srcObject = remote.stream.mediaStream;
        document.querySelector('body').appendChild(element);
    }).catch(err => {
        console.error('订阅媒体失败: ', err)
    })

注意：返回的媒体信息还不是完整的流媒体资源,使用该媒体信息,通过调用订阅媒体方法可以更灵活方便的分别订阅媒体频道中的音视频等流媒体资源

完成上述一些列注册订阅的方法之后,就可以构建本地流媒体并推送到频道中

# 构建本地流媒体

使用Promise (opens new window)Manis.createMicrophoneAndCameraTracks()构建本地基于摄像头和麦克风的流媒体资源，

接收两个可选参数:音视频约束对象,返回一个Promise对象实例

名称	类型	说明	备注
audioOptions	Object (opens new window)	音频约束条件 (opens new window)	可选
videoOptions	Object (opens new window)	视频约束条件 (opens new window)	可选

示例：

/*创建本地音视频媒体*/
    // 设备ID可以通过设备接口获取,详见设备文档部分
    const audioOptions = {
      deviceId: 'xxxxxxxxxxxxxxxxxx'
    }
    
    const videoOptions = {
      deviceId: 'xxxxxxxxxxxxxxxxxx',
      height: '180',
      width: '320',
      frameRate: '30'
    }
    
    Manis.createMicrophoneAndCameraTracks(audioOptions, videoOptions).then(localStream => {
        console.log('获取到本地音视频媒体: ', localStream)
        // 这个媒体对象是本地的媒体资源, 可以根据业务决定是否渲染, 通过Manis.publish方法将本地媒体推送到频道中, 对端用户就可以收到通知并订阅渲染媒体资源
        Manis.publish(localStream).then(resp => {
          console.log('推流成功: ', resp)
        }).catch(err => {
          console.error('推流失败: ', err)
        })
    }).catch(error => {
        console.error(error)
    })

# 推送本地流媒体

使用Promise (opens new window)Manis.createMicrophoneAndCameraTracks()构建本地基于摄像头和麦克风的流媒体资源，

接收媒体资源信息remoteStream和可选参数订阅选项subscribeOptions，返回一个Promise对象实例

名称	类型	说明	备注
localStream	Object (opens new window)	本地流媒体资源

示例：

/*将构建的本地流媒体推送到频道*/
    Manis.publish(localStream).then(resp => {
        console.log('推流成功: ', resp)
    }).catch(error => {
        console.error('推流失败: ', error)
    })

← Manis Web SDK 3.1.6 频道操作 →