环信多人音视频会议功能实现 - 好文

多人视频会议，在IM 社交场景下是一个比较重要的功能，这里简单的通过环信 SDK 搞了下 WEB 端的视频会议，看了环信多人视频会议文档
<http://docs-im.easemob.com/im/web/basics/multiuserconference#%E5%A4%9A%E4%BA%BA%E5%AE%9E%E6%97%B6%E9%80%9A%E8%AF%9D>
，遇到了一些坑，简单记录了实现过程，直接看过程。

<>集成

* 下载环信SDK + Demo 源码 <https://github.com/easemob/webim> git clone
https://github.com/easemob/webim.git
* webrtc 文件夹下有一个 EMedia_x1v1.js 文件，包含了 1v1，多人视频，所以项目中直接通过引入本地文件方式引入这个js 即可
* 集成需要 IM SDK，strophe，config配置，音视频 SDK 等文件，如果需要环信提供的表情信息 websdk.shim.js 也需要引入
* 这里就直接初始化 SDK 了，音视频也是依赖 IM SDK 初始化的，所以这里正常初始化就行了，然后根据文档将多人会议需要的监听回调注册 var
conn = {}; WebIM.config = WebIMConfig; conn = WebIM.conn = new
WebIM.connection({ isHttpDNS: WebIM.config.isHttpDNS, isMultiLoginSessions:
WebIM.config.isMultiLoginSessions, https: WebIM.config.https, url:
WebIM.config.xmppURL, apiUrl: WebIM.config.apiURL, isAutoLogin: false,
heartBeatWait: WebIM.config.heartBeatWait, autoReconnectNumMax:
WebIM.config.autoReconnectNumMax, autoReconnectInterval:
WebIM.config.autoReconnectInterval, isStropheLog: WebIM.config.isStropheLog,
delivery: WebIM.config.delivery })
这里有一个WebIM.config = WebIMConfig;，因为我引入的 config 配置文件是 var WebIMConfig = {}
，可以直接使用文档的WebIM.config = config

* IM 已经集成好了，这里就直接描述下流程，如果在群组或者聊天室内创建视频会议，就是这样的
创建者发起视频会议申请（创建会议）—> 创建者调用api加入会议 —> 发布视频流 —> 邀请其他人进入会议（携带会议ID，密码，gid） —>
被邀请人收到邀请信息，解析消息拿到会议ID，密码，gid加入会议 —> 加入成后发布视频流并订阅其他成员的视频流 —> 展示到对应的video
标签，接下来就根据流程走一下代码咯
* 创建会议 emedia.mgr.createConference(confrType,
password).then(function(confr){ console.log(confr) }).catch(function(error){
console.log(error) })
* 创建者不是创建会议就在会议内的，根据创建成功返回的信息，调用api 加入会议
emedia.mgr.joinConferenceWithTicket(confr.confrId, confr.ticket,
ext).then(function(confr){ //做个提示之类信息 }).catch(function(error){
console.log(error) })
* 发布视频流，有两种方式，都可以使用，具体看发布视频流文档
<http://docs-im.easemob.com/im/web/basics/multiuserconference#%E6%88%90%E5%91%98a%E5%8F%91%E5%B8%83%E9%9F%B3%E8%A7%86%E9%A2%91%E6%B5%81>
var constaints： {audio: true, video: true}
emedia.mgr.publish(constaints,video,ext).then(function(pushedStream) { //stream
对象 }).catch(function(error) { console.log(error); });
发布视频流成功后，会执行 onStreamAdded，成员都可以调用该方法发布视频流

* 邀请成员加入会议的信息，就自定义吧，我是直接构建的文本信息，通过ext 扩展携带的参数
* 收到邀请信息，解析ext扩展，然后加入的会议中 emedia.mgr.joinConference(message.ext.confrId,
message.ext.password, "进入会议").then(function () { //做个提示之类信息 }).catch(function
(error) { console.log(error) })
* 通过 emedia.mgr.onStreamAdded 监听视频流，并可以通过emedia.mgr.subscribe 订阅流
emedia.mgr.onStreamAdded = function (member, stream) { //stream.located() ===
true, 是自己发布的流 if (stream.located()) { emedia.mgr.streamBindVideo(video,
pushedStream); } else { emedia.mgr.streamBindVideo(stream, localVideo)
emedia.mgr.subscribe(member, stream, true, true, localVideo) } }
这样就差不多可以正常显示到video标签中了，下面就是遇到的坑了

*
创建会议，请求地址拿到的是本地的localhost，而不是环信apiUrl，解决办法：
A：在全局初始化，并在初始化中添加 apiUrl: WebIM.config.apiURL,，然后再创建会议，打印 WebIM.conn.apiUrl
看下是否有值，如果为空，那么就会那本地的请求ip等

*
创建会议，一些需要的信息拿不到，比如 setIdentity 方法中需要的信息，解决办法：
A：在登陆成功的回调中将需要的信息 set 过去
WebIM.EMedia.mgr.setIdentity(WebIM.conn.orgName + "#" + WebIM.conn.appName +
"_" + WebIM.conn.user + "@" + WebIM.conn.domain, WebIM.conn.token);

*
会议创建成功，视频流也发布了，但是看不到图像信息，解决方法：
A：一定要记得通过 emedia.mgr.streamBindVideo 绑定，不然就会出现看不到图像的情况

*
离开会议后，重新创建会议，加入成功，发布视频流会失败，解决方案：
A：我这边是在加入成功后，创建video标签，然后发布视频流的，遇到加入成功，推流失败，是因为离开会议没有销毁video，所以重复创建了

热门工具换一换