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

多人视频会议，在IM 社交场景下是一个比较重要的功能，这里简单的通过环信 SDK 搞了下 WEB 端的视频会议，看了环信多人视频会议文档，遇到了一些坑，简单记录了实现过程，直接看过程。

集成

下载环信SDK + Demo 源码

	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 = config;
	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 = config;，因为我引入的 config 配置文件是 var WebIMConfig = {}，sdk 中使用的是 WebIM.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)
	})

发布视频流，有两种方式，都可以使用，具体看发布视频流文档

    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，所以重复创建了

Hi, Donkey

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

集成