修复webRtc 移动端视图重复显示导致其他视图换行的问题

李勇
Commit 71f14e281b548cf72f59097e8ad0390a724a48bf 71f14e28 1 parent 1620b29a
src/EngineEntrance.js
src/apes/WebRtcApe.js
--- a/src/EngineEntrance.js
查看文件 @71f14e2
+++ b/src/EngineEntrance.js
查看文件 @71f14e2
@@ -62,7 +62,7 @@ export default class MessageEntrance extends Emiter {
   constructor() {
     super();
     //sdk 信息
-    GlobalConfig.sdkVersion = "v2.16.5.20171012";
+    GlobalConfig.sdkVersion = "v2.16.8.20171012";
     loger.warn("sdkVersion:" + GlobalConfig.sdkVersion);
     //设置
--- a/src/apes/WebRtcApe.js
查看文件 @71f14e2
+++ b/src/apes/WebRtcApe.js
查看文件 @71f14e2
@@ -194,19 +194,28 @@ class WebRtcApe extends Emiter {
         userName = user.name || "unknow";
         userRole = user.userRole;
       }
-      let nameDiv = `<div style="width:98%;height:20px; position: absolute;bottom: 0; z-index: 1;left: 4px;overflow:hidden;font-size: 14px;text-align: right; color: #cccccc;display:${this.nameDisplay}">${userName}</div>`;
+
+      //添加之前先删除之前存在的重复视图
+      let len=$("#"+this.xdyRemote + uid+" #player_" + uid).length;
+      if(len<1){
+        loger.log("添加之前先删除之前存在的重复视图",uid);
+        $("#"+this.xdyRemote + uid).remove();
+      }
       if (userRole == ApeConsts.invisible) {
+        let nameDiv = `<div style=${this.invisibleVideoWidth}px;height:20px; position: absolute;bottom: 0; z-index: 1;overflow:hidden;font-size: 14px;text-align: right; color: #cccccc;display:${this.nameDisplay}">${userName}</div>`;
         //把远程视频添加到监课列表
         loger.log("获取远程视频流成功->监课:" + userName + "->" + uid, new Date().getTime());
         let viewDiv = `<div id="${this.xdyRemote + uid}" class="${this.invisibleWebRtcVideoClass}" style="width:${this.invisibleVideoWidth*this.videoScale}px;height:${this.invisibleVideoHeight*this.videoScale}px;float: left;margin-right: 1px;pointer-events: none;">${nameDiv}</div>`;
         $(this.invisibleViewId).append(viewDiv);
       } else if (userRole == ApeConsts.host||userRole == ApeConsts.assistant||userRole == ApeConsts.presenter) {
+        let nameDiv = `<div style="width:${this.hostRemoteVideoWidth}px;height:20px; position: absolute;bottom: 0; z-index: 1;overflow:hidden;font-size: 14px;text-align: right; color: #cccccc;display:${this.nameDisplay}">${userName}</div>`;
         //把远程视图添加到老师列表
         loger.log("获取远程视频流成功->userRole:"+userRole+":" + userName + "->" + uid, new Date().getTime());
         let viewDiv = `<div id="${this.xdyRemote + uid}" class="${this.hostWebRtcVideoClass}" style="width:${this.hostRemoteVideoWidth*this.videoScale}px;height:${this.hostRemoteVideoHeight*this.videoScale}px;float: left;margin-right: 1px;pointer-events: none;">${nameDiv}</div>`;
         $(this.hostRemoteViewId).prepend(viewDiv);
       } else {
+        let nameDiv = `<div style="width:${this.normalRemoteVideoWidth}px;height:20px; position: absolute;bottom: 0; z-index: 1;overflow:hidden;font-size: 14px;text-align: right; color: #cccccc;display:${this.nameDisplay}">${userName}</div>`;
         //把视图添加到学生列表
         loger.log("获取远程视频流成功->学生:" + userName + "->" + uid, new Date().getTime());
         let viewDiv = `<div id="${this.xdyRemote + uid}" class="${this.normalWebRtcVideoClass}" style="width:${this.normalRemoteVideoWidth*this.videoScale}px;height:${this.normalRemoteVideoHeight*this.videoScale}px;float: left;margin-right: 1px;pointer-events: none;">${nameDiv}</div>`;
@@ -217,12 +226,59 @@ class WebRtcApe extends Emiter {
         $("bar_" + stream.getId()).hide();
         stream.play(this.xdyRemote + stream.getId());
       } catch (err) {
+        //添加之前先删除之前存在的重复视图
+        let len=$("#"+this.xdyRemote + uid+" #player_" + uid).length;
+        if(len<1){
+          lloger.log("流播放失败->删除视图",uid);
+          $("#"+this.xdyRemote + uid).remove();
+        }
       }
       if (user && (user.deviceType == 1 || user.deviceType == 2)) {
         this.remoteVideoList[user.nodeId] = stream;
       }
     }
+
+    this.clearInvalidVideoView();
   }
+  //清除无效的视图
+  clearInvalidVideoView(){
+    let normalList=document.getElementsByClassName(this.normalWebRtcVideoClass);
+    let hostList=document.getElementsByClassName(this.hostWebRtcVideoClass);
+    let localList=document.getElementsByClassName(this.localWebRtcVideoClass);
+
+    let divItem=null;
+    if(normalList){
+      for (let i=normalList.length-1;i>=0;i--){
+        divItem=normalList[i];
+        if(divItem&&divItem.children.length<2){
+          console.log("删除无效的视图",divItem);
+          divItem.remove();
+        }
+      }
+    }
+    divItem=null;
+    if(hostList){
+      for (let i=hostList.length-1;i>=0;i--){
+        divItem=hostList[i];
+        if(divItem&&divItem.children.length<2){
+          console.log("删除无效的视图",divItem);
+          divItem.remove();
+        }
+      }
+    }
+    divItem=null;
+    if(localList){
+      for (let i=localList.length-1;i>=0;i--){
+        divItem=localList[i];
+        if(divItem&&divItem.children.length<2){
+          console.log("删除无效的视图",divItem);
+          divItem.remove();
+        }
+      }
+    }
+    divItem=null;
+  }
+
   //重新添加远程视频
   reAddRemoteStream(_stream) {
@@ -263,7 +319,8 @@ class WebRtcApe extends Emiter {
     //console.log("remoteView->", remoteView)
     if (remoteView) {
       let player = document.getElementById("player_" + nodeId);
-      if (player) {
+      let len=$("#"+this.xdyRemote + nodeId+" #player_" + nodeId).length;
+      if (len>0) {
         loger.log(nodeId + " 流已经添加显示，不需要再处理");
         return;
       } else {