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

集成

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

06-17 23:35