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

多人视频会议,在IM社交场景下是一个比较重要的功能,这里简单的通过环信SDK搞了下WEB端的视频会议,看了环信多人视频会议文档,遇到了一些坑,简单记录了实现过程,直接看过程。集成下载环信SDK Demo源码gitclonehttps://github.com/easemob/webim.gitwebrtc文件夹下有一个EMedia_x1v1.js文件,包含了1v1,多人视频,所以项目中直接通过引入...

 多人视频会议,在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,所以重复创建了

源文地址:https://www.guoxiongfei.cn/csdn/4933.html