react_hsbc_teller 1.2.6 → 1.2.9

package/packages/pages/video/video.jsx

@@ -35,6 +35,9 @@ let pictureInPictureVideo
 let mix_stream
 let worker
 let streamShare
+let muteJson = new Map()
+let dateTime = 0
+let messageValue = ''
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -264,7 +267,7 @@ class Video extends Component {
       let result = await API.mpaasSig({ account: data.account, type: data.type });
       console.log(result);
       window.sessionStorage.setItem('alimpassSig', result.mpsSig);
-        this.state.workSpaceId = result.workSpaceId,
+        this.state.workSpaceId = result.workspaceId,
         this.state.appId = result.appId,
         this.state.bizName = result.bizName
       // const data1={
@@ -385,30 +388,19 @@ class Video extends Component {
         fontSize: 16, // 字体⼤⼩
         url: '' // ⽔印图⽚ HTTP 地址
       },
-      {
-        tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
-        type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
-        id: 2, // ⽔印 ID
-        enable: true,
-        xPosition: 10, // x 轴位置
-        yPosition: 50, // y 轴位置
-        text: this.state.contentDress, // ⽔印⽂字
-        fontSize: 16, // 字体⼤⼩
-        url: '' // ⽔印图⽚ HTTP 地址
-      }
     ];
   recordParam.tagPositions = [
     {
       tag: 'projectionWhiteboard',
       xPosition: 0,
-      yPosition: 540,
-      width: 960,
-      height: 540
+      yPosition: 270,
+      width: 1280,
+      height: 720
     },
     {
       tag: 'VIDEO_SOURCE_SCREEN',
-      xPosition: 0,
-      yPosition: 180,
+      xPosition: 1280,
+      yPosition: 630,
       width: 640,
       height: 360
     },
@@ -416,86 +408,86 @@ class Video extends Component {
       tag: 'tag1',
       xPosition: 0,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer1',
-      xPosition: 240,
+      xPosition: 320,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer2',
-      xPosition: 480,
+      xPosition: 640,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer3',
-      xPosition: 720,
+      xPosition: 960,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer4',
-      xPosition: 960,
+      xPosition: 1280,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer5',
-      xPosition: 1200,
-      yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer6',
-      xPosition: 1440,
+      xPosition: 1600,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
-    {
-      tag: 'customer7',
-      xPosition: 1680,
-      yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer8',
-      xPosition: 1680,
-      yPosition: 180,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer9',
-      xPosition: 1680,
-      yPosition: 360,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer10',
-      xPosition: 1680,
-      yPosition: 540,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer11',
-      xPosition: 1680,
-      yPosition: 720,
-      width: 240,
-      height: 180
-    }
+    // {
+    //   tag: 'customer6',
+    //   xPosition: 1440,
+    //   yPosition: 0,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer7',
+    //   xPosition: 1680,
+    //   yPosition: 0,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer8',
+    //   xPosition: 1680,
+    //   yPosition: 180,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer9',
+    //   xPosition: 1680,
+    //   yPosition: 360,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer10',
+    //   xPosition: 1680,
+    //   yPosition: 540,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer11',
+    //   xPosition: 1680,
+    //   yPosition: 720,
+    //   width: 240,
+    //   height: 180
+    // }
   ]
     console.log('recordParam', recordParam);
     this.test_controller.StartRemoteRecord(filePath, recordParam, '')
@@ -795,23 +787,46 @@ class Video extends Component {
   }
   messageClick=(value,valueOne)=>{
     console.log(value,valueOne)
-    if(valueOne == 'error') {
-      message.error({
-        content: value,
-        icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-        className: 'errorClassName',
-        top: 200,
-        duration: 10
-      })
-    } else if(valueOne == 'success') {
-      message.success({
-        content: value,
-        icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-        className: 'successClassName',
-        top: 200,
-        duration: 10
-      })
-    }
+    if(messageValue != value){
+      messageValue = value
+      dateTime = new  Date().getTime()
+        if(valueOne == 'error') {
+          message.error({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
+            className: 'errorClassName',
+            top: 200,
+            duration: 10
+          })
+        } else if(valueOne == 'success') {
+          message.success({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+            className: 'successClassName',
+            top: 200,
+            duration: 10
+          })
+        }
+      } else if(((new  Date().getTime()) - dateTime) / 1000 > 30){
+        dateTime = new  Date().getTime()
+        if(valueOne == 'error') {
+          message.error({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
+            className: 'errorClassName',
+            top: 200,
+            duration: 10
+          })
+        } else if(valueOne == 'success') {
+          message.success({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+            className: 'successClassName',
+            top: 200,
+            duration: 10
+          })
+        }
+      }
     
   }
   // 人脸识别
@@ -1443,7 +1458,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
@@ -1456,6 +1473,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
@@ -1468,6 +1486,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
@@ -1480,6 +1499,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
@@ -1492,6 +1512,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
@@ -1504,6 +1525,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
@@ -1516,31 +1538,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
@@ -1553,6 +1552,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
@@ -1565,6 +1565,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
@@ -1577,6 +1578,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
@@ -1589,6 +1591,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
@@ -1601,6 +1604,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
@@ -1873,6 +1877,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)
@@ -1901,6 +1911,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({
@@ -1935,6 +1955,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 = (
@@ -1947,6 +2132,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) => {
@@ -1975,6 +2161,21 @@ class Video extends Component {
                   name: '客户投屏'
                 }, 'add'
               )
+            } else if (itemOne.tag == 'projectionWhiteboard') {
+              config_param = {
+                subscribe_video_id: 'video20',
+                subscribe_audio_id: 'audio20',
+                subscribe_streamId_id: 'subscribe_streamId20',
+                feedId_id: 'feedId20',
+                feedId: itemOne.feedId
+              }
+
+              this.tabTitlesClick(
+                {
+                  value: 'staffScreen',
+                  name: 'internal staff 投屏'
+                }, 'add'
+              )
             } else {
               if (!document.getElementById('video1').name) {
                 config_param = {
@@ -2089,11 +2290,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) => {
@@ -2122,12 +2326,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
@@ -2136,7 +2339,7 @@ class Video extends Component {
         }, function (code, message, data) {
           console.log(data)
         })
-      }
+        setTimeout(() => {
       let array = this.state.roomCustomerList;
       let newArray = [...array];
       newArray.push({
@@ -2166,10 +2369,28 @@ class Video extends Component {
           if (config_param !== undefined) {
             config_param.need_volume_analyser = false
             console.log(config_param)
-            setTimeout(() => {
+              this.test_controller.Subscribe(config_param)
+
+          }
+        }  else if (feed.tag == 'projectionWhiteboard') {
+          config_param = {
+            subscribe_video_id: 'video20',
+            subscribe_audio_id: 'audio20',
+            subscribe_streamId_id: 'subscribe_streamId20',
+            feedId_id: 'feedId20',
+            feedId: feed.feedId
+          }
 
+          this.tabTitlesClick(
+            {
+              value: 'staffScreen',
+              name: 'internal staff 投屏'
+            }, 'add'
+          )
+          if (config_param !== undefined) {
+            config_param.need_volume_analyser = false
+            console.log(config_param)
               this.test_controller.Subscribe(config_param)
-            }, 1000)
 
           }
         } else {
@@ -2303,7 +2524,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)
+            
 
           }
           // })
@@ -2312,7 +2535,7 @@ class Video extends Component {
         }
 
       }
-
+    }, 2000);
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -2352,6 +2575,11 @@ class Video extends Component {
             this.tabTitlesClick('customerScreen', 'delect')
           }
         }
+        if (item.value == 'staffScreen') {
+          if (!document.getElementById("video20").name) {
+            this.tabTitlesClick('staffScreen', 'delect')
+          }
+        } 
       })
       if (!document.getElementById("video1").name) {
         this.state.isPIBIntranet[0].type = false
@@ -2784,7 +3012,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;
@@ -2795,7 +3023,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
         }
@@ -3221,64 +3448,71 @@ class Video extends Component {
     }
   };
   sharedScreen = () => {
-    console.log('投屏')
+    console.log('投屏', this.state.tabTitles.find(el=>el.value == 'staffScreen'))
     if (this.isFileSuccuse()) {
-      const publish_config = {};
-      if(streamShare) {
-        streamShare.getTracks().forEach(track => track.stop());
-      }
-      if (this.state.isSharedScreen) {
-        const publish_config = {}
-        publish_config.media_type = 1
-        publish_config.publish_device = 2
-        // publish_config.video_profile_type = 1
-        publish_config.video_profile_type=100
-        publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
-        publish_config.enableDesktopAudio=true
-        publish_config.degradationType=2
-        publish_config.sid = document.getElementById('video20').name
-        this.test_controller.ChangeMediaStream(publish_config)
-        this.state.isScreenSwitching = true
-      } else {
-        if (document.getElementById('video20').name) {
-          publish_config.media_type = 1;
-          publish_config.publish_device = 2;
-          publish_config.video_profile_type=100
-          publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
-          publish_config.enableDesktopAudio=true
-          publish_config.degradationType=2
-          publish_config.sid = document.getElementById('video20').name;
-          this.test_controller.ChangeMediaStream(publish_config);
-        } else {
+      if(!this.state.tabTitles.find(el=>el.value == 'staffScreen')) {
+        const publish_config = {};
+        if(streamShare) {
+          streamShare.getTracks().forEach(track => track.stop());
+        }
+        if (this.state.isSharedScreen) {
+          const publish_config = {}
           publish_config.media_type = 1
           publish_config.publish_device = 2
-          publish_config.need_volume_analyser = true
-          publish_config.video_profile_type=100
-          publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+          publish_config.video_profile_type = 1
+          // publish_config.video_profile_type=100
+          // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
           publish_config.enableDesktopAudio=true
           publish_config.degradationType=2
-          publish_config.publish_video_id = 'video20'
-          publish_config.publish_streamId_id = 'subscribe_streamId20'
-          publish_config.publish_tag = 'projectionWhiteboard'
-          this.test_controller.Publish(publish_config)
-        }
-        // this.state.isSharedScreen = true
-        // this.state.isScreenSwitching = false
-        this.setState({
-          screenName: '切换共享',
-          isPDF: false
-        })
-        this.tabTitlesClick(
-          {
-            value: 'RMScreen',
-            name: '共享内容'
-          }, 'add'
-        )
-        if (!this.state.isPictureInPicture) {
-          this.pictureInPicture()
+          publish_config.sid = document.getElementById('video20').name
+          this.test_controller.ChangeMediaStream(publish_config)
+          this.state.isScreenSwitching = true
+        } else {
+          if (document.getElementById('video20').name) {
+            publish_config.media_type = 1;
+            publish_config.publish_device = 2;
+            publish_config.video_profile_type = 1
+            // publish_config.video_profile_type=100
+            // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+            publish_config.enableDesktopAudio=true
+            publish_config.degradationType=2
+            publish_config.sid = document.getElementById('video20').name;
+            this.test_controller.ChangeMediaStream(publish_config);
+          } else {
+            publish_config.media_type = 1
+            publish_config.publish_device = 2
+            publish_config.need_volume_analyser = true
+            publish_config.video_profile_type = 1
+            // publish_config.video_profile_type=100
+            // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+            publish_config.enableDesktopAudio=true
+            publish_config.degradationType=2
+            publish_config.publish_video_id = 'video20'
+            publish_config.publish_streamId_id = 'subscribe_streamId20'
+            publish_config.publish_tag = 'projectionWhiteboard'
+            this.test_controller.Publish(publish_config)
+          }
+          // this.state.isSharedScreen = true
+          // this.state.isScreenSwitching = false
+          this.setState({
+            screenName: '切换共享',
+            isPDF: false
+          })
+          this.tabTitlesClick(
+            {
+              value: 'RMScreen',
+              name: '共享内容'
+            }, 'add'
+          )
+          if (!this.state.isPictureInPicture) {
+            this.pictureInPicture()
+          }
+  
         }
-
+      } else {
+        this.messageClick('internal staff正在共享屏幕，请先关闭','error')
       }
+
     }
   };
   suspend = () => {
@@ -3772,35 +4006,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) =>{
@@ -3809,7 +4027,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
           }
       }
@@ -3844,6 +4062,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,
@@ -3862,6 +4083,7 @@ class Video extends Component {
   }
   switchExternal = () => {
     if (this.isFileSuccuse()) {
+      if(!this.state.tabTitles.find(el=>el.value == 'staffScreen')) {
     if (!this.state.isWhiteboard) {
       this.setState({
         isWhiteboard: true
@@ -3881,12 +4103,12 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       }
-      this.navigatorClick()
-    } else {
-      this.messageClick('当前已经切换RM白板','success')
-
     }
-
+    
+    this.navigatorClick()
+  } else {
+    this.messageClick('internal staff正在共享屏幕，请先关闭','error')
+  }
   }
   }
   switchSelect = (value) => {
@@ -4190,7 +4412,7 @@ class Video extends Component {
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
             
-              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
                     id="video20"
@@ -4677,7 +4899,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}
@@ -4827,7 +5049,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',