環信多人音視頻會議功能實現

  多人視頻會議，在IM 社交場景下是一個比較重要的功能，這裏簡單的通過環信 SDK 搞了下 WEB 端的視頻會議，看了環信多人視頻會議文檔 ，遇到了一些坑， 簡單記錄了實現過程，直接看過程。

集成

• 下載 環信SDK + Demo 源碼

	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 = 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

• 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 擴展攜帶的參數
• 邀請成員也可以使用 WebIM.call.inviteConference(confrId, password, jid, gid)，需要初始化音視頻的這樣 WebIM.call = new WebIM.WebRTC.Call({})
• 收到邀請信息，解析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，所以重複創建了