react_hsbc_teller 1.2.5 → 1.2.8

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
@@ -1872,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)
@@ -1900,6 +1897,16 @@ class Video extends Component {
         this.timer = setInterval(
           () => {
             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({
@@ -1907,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()
                   }
 
                 })
@@ -1933,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 = (
@@ -1945,6 +2118,7 @@ class Video extends Component {
     // 推送“房间与会者列表”给新加⼊者
     this.test_controller.OnRoomAttendanceList = (participants) => {
       console.log('房间与会者列表', participants)
+      setTimeout(() => {
       participants.map((item, index) => {
         if (item.uid != this.state.tellerAccount) {
           item.publish.map((itemOne, indexOne) => {
@@ -2087,11 +2261,14 @@ class Video extends Component {
             if (config_param !== undefined) {
               config_param.need_volume_analyser = true
               console.log(config_param)
-              this.test_controller.Subscribe(config_param)
+              
+                this.test_controller.Subscribe(config_param)
+              
             }
           })
         }
       })
+    }, 2000);
     };
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
@@ -2120,12 +2297,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
@@ -2134,7 +2310,7 @@ class Video extends Component {
         }, function (code, message, data) {
           console.log(data)
         })
-      }
+        setTimeout(() => {
       let array = this.state.roomCustomerList;
       let newArray = [...array];
       newArray.push({
@@ -2301,7 +2477,9 @@ class Video extends Component {
             config_param.need_volume_analyser = true
             console.log(config_param)
 
-            this.test_controller.Subscribe(config_param)
+            
+              this.test_controller.Subscribe(config_param)
+            
 
           }
           // })
@@ -2310,7 +2488,7 @@ class Video extends Component {
         }
 
       }
-
+    }, 2000);
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -2782,7 +2960,7 @@ class Video extends Component {
       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;
@@ -2793,7 +2971,6 @@ class Video extends Component {
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
         if(document.getElementById('publish_video1').name == sid && i == 39) {
-          console.log(number / 40 / 70,number / 40)
           this.state.analyserHeight.set(sid,number / 40 / 70)
             this.state.analyserHeight = this.state.analyserHeight
         }
@@ -2857,7 +3034,6 @@ class Video extends Component {
     } catch (err) {
       console.error(err);
       if(err.status == 502 || err.status== 404) {
-        this.roomCallBack(2, '连接服务器失败','SYS-02')
       }
     }
   }
@@ -3771,35 +3947,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) =>{
@@ -3808,7 +3968,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
           }
       }
@@ -3843,6 +4003,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,
@@ -3880,12 +4043,9 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       }
-      this.navigatorClick()
-    } else {
-      this.messageClick('当前已经切换RM白板','success')
-
     }
-
+    
+    this.navigatorClick()
   }
   }
   switchSelect = (value) => {
@@ -4196,6 +4356,7 @@ class Video extends Component {
                     autoPlay
                     muted={true}
                     className="videoTab"
+                    disablePictureInPicture
                   />
                   <audio id="audio20" autoPlay />
                   <label style={{ display: 'none' }} id="feedId20" type="text" />
@@ -4215,6 +4376,7 @@ class Video extends Component {
                     autoPlay
                     muted={true}
                     className="videoTab"
+                    disablePictureInPicture
                   />
                   <audio id="audio21" autoPlay />
                   <label style={{ display: 'none' }} id="feedId21" type="text" />
@@ -4265,18 +4427,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>
@@ -4298,6 +4463,7 @@ class Video extends Component {
                     id="video1"
                     autoPlay
                     muted={true}
+                    disablePictureInPicture
                     className={`video1 ${this.state.noVideoOne ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio1" autoPlay />
@@ -4326,6 +4492,7 @@ class Video extends Component {
                 <video
                   id="video2"
                   autoPlay
+                  disablePictureInPicture
                   muted={true}
                   className={`video ${this.state.noVideoTwo ? 'isNoVideo' : ''}`}
                 />
@@ -4354,6 +4521,7 @@ class Video extends Component {
                   id="video3"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoThree ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio3" autoPlay />
@@ -4380,6 +4548,7 @@ class Video extends Component {
                   id="video4"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoFour ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio4" autoPlay />
@@ -4407,6 +4576,7 @@ class Video extends Component {
                   id="video5"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoFive ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio5" autoPlay />
@@ -4433,6 +4603,7 @@ class Video extends Component {
                   id="video6"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoSix ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio6" autoPlay />
@@ -4471,6 +4642,7 @@ class Video extends Component {
                     id="video7"
                     autoPlay
                     muted={true}
+                    disablePictureInPicture
                     className={`video ${this.state.noVideoSeven ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio7" autoPlay />
@@ -4500,6 +4672,7 @@ class Video extends Component {
                   id="video8"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoEight ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio8" autoPlay />
@@ -4526,6 +4699,7 @@ class Video extends Component {
                   id="video9"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoNine ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio9" autoPlay />
@@ -4554,6 +4728,7 @@ class Video extends Component {
                   id="video10"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoTen ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio10" autoPlay />
@@ -4580,6 +4755,7 @@ class Video extends Component {
                   id="video11"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoEleven ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio11" autoPlay />
@@ -4607,6 +4783,7 @@ class Video extends Component {
                   id="video12"
                   autoPlay
                   muted={true}
+                  disablePictureInPicture
                   className={`video ${this.state.noVideoTwelve ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio12" autoPlay />
@@ -4659,7 +4836,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}
@@ -4809,7 +4986,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',

package/packages/pages/video/video.less

@@ -13,9 +13,9 @@
   float: right
 }
 .imgClassVoice{
-  width: 1.563rem;
-  height: 1.563rem;
-  margin-top: 0.25rem;
+  width: 25Px;
+  height: 24Px;
+  margin-bottom: 4Px;
 }
 .sharedScreen{
   font-size: 10px;
@@ -298,10 +298,9 @@
   }
 }
 .voiceClass{
-  // position: absolute;
-  // bottom: 0;
-  // left: 0;
-  // transform: rotateY(180deg);
+  width: 25Px;
+  height: 25.3Px;
+  margin-bottom: 1Px;
 }
 .cameraAnMicrophone{
   margin: 10px 20px;