Central letter multiplayer audio and video conferencing capabilities to achieve

  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

	git clone https://github.com/easemob/webim.git
  • There folder under webrtc a EMedia_x1v1.jsfile containing 1v1, 多人视频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.jsis 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)
	})
    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.onStreamAddedlistening streaming video, and can emedia.mgr.subscribesubscribe 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 initialization apiUrl: WebIM.config.apiURL,, and then create a meeting, print WebIM.conn.apiUrllook 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 through emedia.mgr.streamBindVideobinding, 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

Guess you like

Origin blog.csdn.net/qq_43128835/article/details/90719818