Multiplayer video conferencing, IM in the social scene is a more important function, here simply by Shun SDK engage in a video conference at the end of the WEB, read Shun multi-person video conference document , we encountered some pit, simple records implementation process, direct look at the process.
integrated
- Download ring SDK + Demo Letter Code
git clone https://github.com/easemob/webim.git
- There folder under webrtc a
EMedia_x1v1.js
file containing1v1
,多人视频
so the project can be directly introduced into the js by introducing local papers - Integration needs IM SDK, strophe, config configuration, like audio and video SDK file, if necessary expression information provided by ring channels
websdk.shim.js
is also necessary to introduce - Here directly initialize the SDK, audio and video is also dependent on IM SDK initialization, so here initialize properly on the line, then the document will be registered under the listener callback meeting people's needs
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
})
There is a WebIM.config = config;
, because I config configuration file is introduced var WebIMConfig = {}
, sdk is in use WebIM.config.**
, so the addition of a step can be ignored
- IM has been integrated well, here described under the direct process, if you create a video conference in the group or chat room, is such a
creator of initiating a video conference application (create a conference) -> creator join the conference call api -> Publish video stream -> invite others into the conference (conference carrying ID, password, gid) -> invitees receive an invitation message, parses the message to get the conference ID, password, gid join the conference - after> adding to publish and subscribe to other members of the video stream video stream -> to show the corresponding video tag, then we go about the process in accordance with the code slightly - Create a meeting
emedia.mgr.createConference(confrType, password).then(function(confr){
console.log(confr)
}).catch(function(error){
console.log(error)
})
- Creator is not created in a conference session on the basis of the information to create a successful return, to join the conference call api
emedia.mgr.joinConferenceWithTicket(confr.confrId, confr.ticket, ext).then(function(confr){
//做个提示之类信息
}).catch(function(error){
console.log(error)
})
- Released video stream, there are two ways you can use, specifically to see released video stream documents
var constaints: {audio: true, video: true}
emedia.mgr.publish(constaints,video,ext).then(function(pushedStream) {
//stream 对象
}).catch(function(error) {
console.log(error);
});
After the successful release video stream, performs onStreamAdded
, members can call this method released video stream
- Information invite members to join the conference, it is the custom, I was built directly text information, ext parameters carried by extension
- Meeting invitation information, analytical ext extension, and then join in
emedia.mgr.joinConference(message.ext.confrId, message.ext.password, "进入会议").then(function () {
//做个提示之类信息
}).catch(function (error) {
console.log(error)
})
- By
emedia.mgr.onStreamAdded
listening streaming video, and canemedia.mgr.subscribe
subscribe flow
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)
}
}
This is almost normal to the video can be displayed in the label, the following is encountered in the pit
-
Create a meeting request to get the address of a local localhost, instead of Shun apiUrl, solution:
A: In the global initialization, and add in the initializationapiUrl: WebIM.config.apiURL,
, and then create a meeting, printWebIM.conn.apiUrl
look whether there is value, if it is empty, it will request that the local ip, etc. -
Creating a meeting, some of the information needed to get such information setIdentity method required a solution:
A: In the information will be required for the successful landing callback set in the past
WebIM.EMedia.mgr.setIdentity(WebIM.conn.orgName + "#" + WebIM.conn.appName + "_" + WebIM.conn.user + "@" + WebIM.conn.domain, WebIM.conn.token);
-
Creating a successful meeting, also released a video stream, but can not see the image information, the solution:
A: we must remember that throughemedia.mgr.streamBindVideo
binding, otherwise the situation will not see the image appear -
After leaving the meeting, the meeting will fail to re-create solutions:
A: I was here after joining successfully, create video labels, and then publish the video stream, re-create the experience fails to leave the meeting because there is no destruction of video, so repeat created