react_hsbc_teller 1.2.4 → 1.2.7

package/packages/pages/video/video.jsx

@@ -35,6 +35,7 @@ let pictureInPictureVideo
 let mix_stream
 let worker
 let streamShare
+let muteJson = new Map()
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -310,6 +311,7 @@ class Video extends Component {
   // 初始化视频
   ConnectMRTC = () => {
     this.test_controller.SetLocalCodecType("H264")
+    this.test_controller.SetPublishWeakBitrateLimit(200);
     const config_param = {};
     config_param.auto_publish_subscribe = 4;
     config_param.media_type = 1;
@@ -1442,7 +1444,9 @@ class Video extends Component {
 
       } else if (Mival.typeId == 3100) {
         if (Mival.data.sessionId == this.state.sessionId) {
+          muteJson.set(Mival.data.userId, JSON.stringify(Mival)) 
           if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoOne: false
@@ -1455,6 +1459,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoTwo: false
@@ -1467,6 +1472,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoThree: false
@@ -1479,6 +1485,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoFour: false
@@ -1491,6 +1498,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoFive: false
@@ -1503,6 +1511,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoSix: false
@@ -1515,31 +1524,8 @@ class Video extends Component {
 
           }
 
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoSix: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoSix: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoSix: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoSix: true
-              })
-            }
-
-          }
           if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoSeven: false
@@ -1552,6 +1538,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoEight: false
@@ -1564,6 +1551,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoNine: false
@@ -1576,6 +1564,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoTen: false
@@ -1588,6 +1577,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoEleven: false
@@ -1600,6 +1590,7 @@ class Video extends Component {
 
           }
           if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
+            muteJson.delete(Mival.data.userId)
             if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoTwelve: false
@@ -1650,7 +1641,11 @@ class Video extends Component {
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
       console.log('devicesInfo' + JSON.stringify(devicesInfo));
-      const obj = [];
+      const obj = [
+//         {actionid: '0133d06019b8fe9426818ae7573ccfc31c150e09138e7f5ccfda03d6e224ffd4', groupId: '9c0334ba5cba71b60acb3ec6669c3aac78371ec9d9e33d2e8af72a758d895d27', actionname: 'Integrated Camera (13d3:56fb)'},
+
+// {actionid: '4695c628677498d876074b941c16f6921d4e57534b50bfc2cb973da84e0e2622', groupId: '0d86c9467f096440ed74449192be5fafea59ac469866975f30b61fe964e2a80e', actionname: 'C2D Camera (0416:5035)'}
+      ];
       const obj1 = [];
       const obj2 = [];
       let num = 0;
@@ -1671,7 +1666,8 @@ class Video extends Component {
             b.actionname = devicesInfo[i].label
           }
           obj.push(b)
-        } else if (devicesInfo[i].kind === 'audioinput') {
+        } else 
+        if (devicesInfo[i].kind === 'audioinput') {
           // 麦克风
           b.actionid = devicesInfo[i].deviceId;
           b.groupId = devicesInfo[i].groupId || 'empty';
@@ -1731,19 +1727,22 @@ class Video extends Component {
         microphoneList: objList1,
         speakerList: objList2.length>0? [objList2[0]]: []
       })
+      let indexId = 0
+      objList.map((item,index)=>{
+        if(item.actionname.indexOf('Integrated Camera') != -1) {
+          indexId = index
+        }
+      })
+      console.log(indexId)
+      this.setState({
+        cameraValue: objList[indexId].actionid,
+        microphoneValue: objList1[0].actionid
+      })
       if (!this.state.appId && !this.state.sessionType) {
+        console.log('cameraValue',this.state.cameraValue)
         this.mpaasSig(data);
-        let indexId = 0
-        objList.map((item,index)=>{
-          if(item.actionname.indexOf('Integrated Camera') != -1) {
-            indexId = index
-          }
-        })
-        this.setState({
-          cameraValue: objList[indexId].actionid,
-          microphoneValue: objList1[0].actionid
-        })
       } else {
+        console.log('cameraValue',this.state.cameraValue)
         this.setState({
           isModalVisibleInspection: true
         })
@@ -1864,6 +1863,12 @@ class Video extends Component {
       };
       this.mpaasSig(data);
     };
+    this.test_controller.OnSendTextMsgSucc = (msgId)=>{
+      console.log('发送成功',msgId)
+    }
+    this.test_controller.OnSendTextMsgFailed  =(msgId, code, msg)=>{
+      console.log('发送失败',msgId,code, msg)
+    }
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
@@ -1891,7 +1896,17 @@ class Video extends Component {
         this.enterRoom()
         this.timer = setInterval(
           () => {
-            if(!this.state.voiceStatue && this.state.analyserHeight.get(sid).toFixed(2) > 0) {
+            if(!this.state.voiceStatue && this.state.analyserHeight.get(sid).toFixed(2) > 0.1) {
+              // this.test_controller.SendTextMsg(JSON.stringify({
+              //   'typeId': 3200,
+              //   'decibelValue': this.state.analyserHeight.get(sid).toFixed(2),
+              //   "data": {
+              //     'sessionId': this.state.sessionId,
+              //     'userId': this.props.tellerAccount,
+              //     'data': (new Date()).valueOf()
+              //   }
+
+              // }))
               callNimIM('sendCustomCmdMsg', {
                 customId: this.state.imRoomId,
                 content: JSON.stringify({
@@ -1899,7 +1914,8 @@ class Video extends Component {
                   'decibelValue': this.state.analyserHeight.get(sid).toFixed(2),
                   "data": {
                     'sessionId': this.state.sessionId,
-                    'userId': this.props.tellerAccount
+                    'userId': this.props.tellerAccount,
+                    'data': (new Date()).valueOf()
                   }
 
                 })
@@ -1925,6 +1941,171 @@ class Video extends Component {
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
       console.log('订阅媒体流成功', feed, sid);
       this.appGetUsername(sid)
+      console.log(muteJson,muteJson.size)
+      if(muteJson.size > 0) {
+        let userId = ''
+        if (muteJson.get(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid)) {
+          userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoOne: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoOne: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+          userId = document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoTwo: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoTwo: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+          userId = document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoThree: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoThree: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+          userId = document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoFour: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoFour: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+          userId = document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoFive: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoFive: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+          userId = document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoSix: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoSix: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
+          userId = document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoSeven: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoSeven: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
+          userId = document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : ''
+
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoEight: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoEight: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
+          userId = document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : ''
+
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoNine: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoNine: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
+          userId = document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : ''
+
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoTen: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoTen: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
+          userId = document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : ''
+
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoEleven: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoEleven: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        if (muteJson.get(document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
+          userId = document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : ''
+          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+            this.setState({
+              voiceVideoTwelve: false
+            })
+          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+            this.setState({
+              voiceVideoTwelve: true
+            })
+          }
+          muteJson.delete(userId)
+        }
+        console.log(muteJson,muteJson.length)
+      }
     };
     // 订阅媒体流失败
     this.test_controller.OnSubscribeFailed = (
@@ -2079,7 +2260,9 @@ class Video extends Component {
             if (config_param !== undefined) {
               config_param.need_volume_analyser = true
               console.log(config_param)
-              this.test_controller.Subscribe(config_param)
+              setTimeout(() => {
+                this.test_controller.Subscribe(config_param)
+              }, 2000);
             }
           })
         }
@@ -2112,12 +2295,11 @@ class Video extends Component {
         })
       }, function (code, message, data) {
       })
-      if(this.state.voiceStatue) {
         callNimIM('sendCustomCmdMsg', {
           customId: this.state.imRoomId,
           content: JSON.stringify({
             'typeId': 1013,
-            'muteStatus': 1,
+            'muteStatus': this.state.voiceStatue ? 1 : 0,
             'data': {
               'sessionId': this.state.sessionId,
               'userId': this.props.tellerAccount
@@ -2126,7 +2308,7 @@ class Video extends Component {
         }, function (code, message, data) {
           console.log(data)
         })
-      }
+      
       let array = this.state.roomCustomerList;
       let newArray = [...array];
       newArray.push({
@@ -2293,7 +2475,9 @@ class Video extends Component {
             config_param.need_volume_analyser = true
             console.log(config_param)
 
-            this.test_controller.Subscribe(config_param)
+            setTimeout(() => {
+              this.test_controller.Subscribe(config_param)
+            }, 2000);
 
           }
           // })
@@ -2488,11 +2672,15 @@ class Video extends Component {
     // 弱网回调
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
+      if(sid == document.getElementById('publish_video1').name) {
+        this.messageClick('当前网络环境较差','error')
+      }
     };
     // 开始服务端录制成功
     this.test_controller.OnStartRemoteRecordSucc = (record_id) => {
       console.log('开始服务端录制成功', record_id);
       this.state.recordId = record_id
+      this.videoRecordCallback('1')
     };
     // 开始服务端录制失败
     this.test_controller.OnStartRemoteRecordFailed = (
@@ -2505,6 +2693,7 @@ class Video extends Component {
     // 结束服务端录制成功
     this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
       console.log('结束服务端录制成功', recordId);
+      this.videoRecordCallback('2')
       // this.endSessionValue()
       // 获取服务端录制结果
     };
@@ -2766,9 +2955,11 @@ class Video extends Component {
         x2: 22 / 50 * canvas.width,  // 波动范围左上角的点坐标
         y2: 10 / 50 * canvas.height,
       }
-
+      let number = 0
       for (var i = 0; i < 40; i++) {
-        let energy = (dataArray[step * i] / 256.0) * 80;
+        
+        let energy = (dataArray[step * i] / 256.0) * 100;
+        number = number + energy
         ctx.beginPath();
         ctx.fillStyle = this.props.voiceColor;
         const { x1, y1, x2, y2 } = drawArea
@@ -2777,12 +2968,12 @@ class Video extends Component {
         let startX = x2 // 绘制起始点x
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
-        if(document.getElementById('publish_video1').name == sid) {
-          this.state.analyserHeight.set(sid,dataArray[step * 20] / 256.0)
+        if(document.getElementById('publish_video1').name == sid && i == 39) {
+          this.state.analyserHeight.set(sid,number / 40 / 70)
             this.state.analyserHeight = this.state.analyserHeight
         }
-
       }
+      
       this.state.OnVolumeAnalyserMap.set(sid,setInterval(
         this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser),
       300
@@ -2830,6 +3021,20 @@ class Video extends Component {
       
     };
   }
+  videoRecordCallback = async(type)=>{
+    try {
+      let result = await API.videoRecordCallback({
+        activityId: this.props.businessNumber,
+        sessionId: this.state.sessionId,
+        type: type
+      });
+      console.log(result);
+    } catch (err) {
+      console.error(err);
+      if(err.status == 502 || err.status== 404) {
+      }
+    }
+  }
   enterRoom = async () =>{
     try {
       let result = await API.enterRoom({
@@ -3740,35 +3945,19 @@ class Video extends Component {
       this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
     )
   }
-  switchExternalAge = ()=>{
-    if(this.state.isSharedScreen) {
-      this.state.isSharedScreen = false
-      this.setState({
-        
-        screenName: '共享模式'
-      });
-      this.tabTitlesClick('RMScreen', 'delect')
-      if (this.state.isPictureInPicture) {
-        document.exitPictureInPicture()
-      }
-    }
 
-    this.navigatorClick()
-
-  }
   navigatorClick=()=>{
     const that = this
     const publish_config = {};
     const canvas = document.createElement('canvas');
     const videoMedia = document.getElementById('manedvideo');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
-    const left =document.getElementById("allHSBC").getBoundingClientRect().left;
+    const left =document.getElementById("whiteboardDIV").getBoundingClientRect().left;
     const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
     const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
     const bottom = document.getElementById("whiteboardDIV").getBoundingClientRect().bottom
-    const width = right - left
-    const height = bottom - top + 10
-    const x = left - 20 > 0 ? left - 20 : 0
+    const width = right - left + 50
+    const height = bottom - top
     canvas.width = width;
     canvas.height = height;
     videoMedia.addEventListener('play', (event) =>{
@@ -3777,7 +3966,7 @@ class Video extends Component {
       loop()
       function loop() {
           if (!$this.paused && !$this.ended) {
-            cobj.drawImage(videoMedia, x, top, width, height, 0, 0,width, height,);
+            cobj.drawImage(videoMedia, left, top, width, height, 0, 0,width, height,);
               setTimeout(loop, 1000 / 10); // drawing at 30fps
           }
       }
@@ -3812,6 +4001,9 @@ class Video extends Component {
       preferCurrentTab:true,
   })
   .then((stream) => {
+    if(streamShare) {
+      streamShare.getTracks().forEach(track => track.stop());
+    }
     videoMedia.srcObject = stream;
     stream.getVideoTracks()[0].applyConstraints({
       width: document.body.offsetWidth,
@@ -3849,12 +4041,9 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       }
-      this.navigatorClick()
-    } else {
-      this.messageClick('当前已经切换RM白板','success')
-
     }
-
+    
+    this.navigatorClick()
   }
   }
   switchSelect = (value) => {
@@ -4165,6 +4354,7 @@ class Video extends Component {
                     autoPlay
                     muted={true}
                     className="videoTab"
+                    disablePictureInPicture
                   />
                   <audio id="audio20" autoPlay />
                   <label style={{ display: 'none' }} id="feedId20" type="text" />
@@ -4184,6 +4374,7 @@ class Video extends Component {
                     autoPlay
                     muted={true}
                     className="videoTab"
+                    disablePictureInPicture
                   />
                   <audio id="audio21" autoPlay />
                   <label style={{ display: 'none' }} id="feedId21" type="text" />
@@ -4234,18 +4425,21 @@ class Video extends Component {
                     className={`publishVideoClass`}
                     autoPlay
                     muted={true}
+                    disablePictureInPicture
                   />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
                   
                   <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
+                    <div>
                   {
                     this.state.voiceStatue && <img
                       alt=""
                       src={require("../../assets/img/jingyin.png").default}
-                      className="imgClassVoice voiceClass"
+                      className="voiceClass"
                     />
                   }
                   <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                  </div>
                     <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>{this.state.titleNameRm}</div>
                   </div>
                 </div>
@@ -4267,6 +4461,7 @@ class Video extends Component {
                     id="video1"
                     autoPlay
                     muted={true}
+                    disablePictureInPicture
                     className={`video1 ${this.state.noVideoOne ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio1" autoPlay />
@@ -4295,6 +4490,7 @@ class Video extends Component {
                 <video
                   id="video2"
                   autoPlay
+                  disablePictureInPicture
                   muted={true}
                   className={`video ${this.state.noVideoTwo ? 'isNoVideo' : ''}`}
                 />
@@ -4323,6 +4519,7 @@ class Video extends Component {
                   id="video3"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoThree ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio3" autoPlay />
@@ -4349,6 +4546,7 @@ class Video extends Component {
                   id="video4"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoFour ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio4" autoPlay />
@@ -4376,6 +4574,7 @@ class Video extends Component {
                   id="video5"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoFive ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio5" autoPlay />
@@ -4402,6 +4601,7 @@ class Video extends Component {
                   id="video6"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoSix ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio6" autoPlay />
@@ -4440,6 +4640,7 @@ class Video extends Component {
                     id="video7"
                     autoPlay
                     muted={true}
+                    disablePictureInPicture
                     className={`video ${this.state.noVideoSeven ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio7" autoPlay />
@@ -4469,6 +4670,7 @@ class Video extends Component {
                   id="video8"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoEight ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio8" autoPlay />
@@ -4495,6 +4697,7 @@ class Video extends Component {
                   id="video9"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoNine ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio9" autoPlay />
@@ -4523,6 +4726,7 @@ class Video extends Component {
                   id="video10"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoTen ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio10" autoPlay />
@@ -4549,6 +4753,7 @@ class Video extends Component {
                   id="video11"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoEleven ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio11" autoPlay />
@@ -4576,6 +4781,7 @@ class Video extends Component {
                   id="video12"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoTwelve ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio12" autoPlay />
@@ -4628,7 +4834,7 @@ class Video extends Component {
             invitationClick={this.invitationClick}
             customerFaceClick={this.customerFaceClick}
             ocrClick={this.ocrClick}
-            switchExternal={this.switchExternalAge}
+            switchExternal={this.switchExternal}
             inspection={this.inspection}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
@@ -4778,7 +4984,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',