多人视频会议,在IM 社交场景下是一个比较重要的功能,这里简单的通过环信 SDK 搞了下 WEB 端的视频会议,看了环信多人视频会议文档 ,遇到了一些坑, 简单记录了实现过程,直接看过程。
git clone https://github.com/easemob/webim.git
EMedia_x1v1.js
文件,包含了 1v1
,多人视频
, 所以项目中直接通过引入本地文件方式引入这个js 即可websdk.shim.js
也需要引入 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
emedia.mgr.createConference(confrType, password).then(function(confr){
console.log(confr)
}).catch(function(error){
console.log(error)
})
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
,成员都可以调用该方法发布视频流
WebIM.call.inviteConference(confrId, password, jid, gid)
,需要初始化音视频的这样 WebIM.call = new WebIM.WebRTC.Call({})
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,所以重复创建了