李勇

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

... ... @@ -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);
//设置
... ...
... ... @@ -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 {
... ...