react_hsbc_teller 1.2.1 → 1.2.4

package/packages/pages/video/video.jsx

@@ -146,7 +146,45 @@ class Video extends Component {
     noVideoTwelve: false,
     manualClose: false,
     defaultValue: '1',
-    customOcrSid: ''
+    customOcrSid: '',
+    isPIBIntranet: [
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      },
+      {
+        type: false
+      }
+    ]
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -284,15 +322,6 @@ class Video extends Component {
         publish_tag: 'tag1'
       }
     ];
-    const recordParam = {};
-    recordParam.width = 640;
-    recordParam.height = 360;
-    recordParam.channels = 1;
-    recordParam.splitType = 0;
-    recordParam.startTimeout = 5;
-    recordParam.recordTotalStream = 0;
-    recordParam.endType = 1;
-    config_param.recordParam = recordParam;
     config_param.initSubscribe = [
       {
         subscribe_video_id: 'video1',
@@ -337,8 +366,8 @@ class Video extends Component {
   enableServerRecording = () => {
     const filePath = 'recordId_' + new Date().valueOf();
     const recordParam = {};
-    recordParam.width = 1280;
-    recordParam.height = 720;
+    recordParam.width = 1920;
+    recordParam.height = 1080;
     recordParam.recordTotalStream = 0;
     recordParam.startTimeout = 10;
     recordParam.splitType = 0;
@@ -370,101 +399,101 @@ class Video extends Component {
   recordParam.tagPositions = [
     {
       tag: 'projectionWhiteboard',
-      xPosition: '0',
-      yPosition: '360',
-      width: '640',
-      height: '360'
+      xPosition: 0,
+      yPosition: 540,
+      width: 960,
+      height: 540
     },
     {
       tag: 'VIDEO_SOURCE_SCREEN',
-      xPosition: '0',
-      yPosition: '144',
-      width: '256',
-      height: '144'
+      xPosition: 0,
+      yPosition: 180,
+      width: 640,
+      height: 360
     },
     {
       tag: 'tag1',
-      xPosition: '0',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 0,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer1',
-      xPosition: '160',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 240,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer2',
-      xPosition: '320',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 480,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer3',
-      xPosition: '480',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 720,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer4',
-      xPosition: '640',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 960,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer5',
-      xPosition: '800',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 1200,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer6',
-      xPosition: '960',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 1440,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer7',
-      xPosition: '1120',
-      yPosition: '0',
-      width: '160',
-      height: '144'
+      xPosition: 1680,
+      yPosition: 0,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer8',
-      xPosition: '1120',
-      yPosition: '144',
-      width: '160',
-      height: '144'
+      xPosition: 1680,
+      yPosition: 180,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer9',
-      xPosition: '1120',
-      yPosition: '288',
-      width: '160',
-      height: '144'
+      xPosition: 1680,
+      yPosition: 360,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer10',
-      xPosition: '1120',
-      yPosition: '432',
-      width: '160',
-      height: '144'
+      xPosition: 1680,
+      yPosition: 540,
+      width: 240,
+      height: 180
     },
     {
       tag: 'customer11',
-      xPosition: '1120',
-      yPosition: '576',
-      width: '160',
-      height: '144'
+      xPosition: 1680,
+      yPosition: 720,
+      width: 240,
+      height: 180
     }
   ]
     console.log('recordParam', recordParam);
@@ -543,100 +572,208 @@ class Video extends Component {
   // 获取人员客户列表
   selectCustomer = (val) => {
     const list = []
-    if (document.getElementById('video1').name) {
+    if (document.getElementById('video1').name && !this.state.isPIBIntranet[0].type) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText))
       // document.getElementById("feedId1").innerText
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid,
-        name: this.state.videoOneName,
+        name: this.state.videoOneName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoOneName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid,
+          name: this.state.videoOneName + '--查询客户',
+          tourist: true
+        })
+      }
     }
-    if (document.getElementById('video2').name) {
+    if (document.getElementById('video2').name && !this.state.isPIBIntranet[1].type) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText))
       // document.getElementById("feedId1").innerText
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid,
-        name: this.state.videoTwoName
+        name: this.state.videoTwoName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoTwoName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid,
+            name: this.state.videoTwoName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video3').name) {
+    if (document.getElementById('video3').name && !this.state.isPIBIntranet[2].type) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText))
       // document.getElementById("feedId1").innerText
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid,
-        name: this.state.videoThreeName
+        name: this.state.videoThreeName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoThreeName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid,
+            name: this.state.videoThreeName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video4').name) {
+    if (document.getElementById('video4').name && !this.state.isPIBIntranet[3].type) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText))
       // document.getElementById("feedId1").innerText
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid,
-        name: this.state.videoFourName
+        name: this.state.videoFourName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoFourName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid,
+            name: this.state.videoFourName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video5').name) {
+    if (document.getElementById('video5').name && !this.state.isPIBIntranet[4].type) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText))
       // document.getElementById("feedId1").innerText
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid,
-        name: this.state.videoFiveName
+        name: this.state.videoFiveName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoFiveName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid,
+            name: this.state.videoFiveName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video6').name) {
+    if (document.getElementById('video6').name && !this.state.isPIBIntranet[5].type) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText))
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid,
-        name: this.state.videoSixName
+        name: this.state.videoSixName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoSixName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid,
+            name: this.state.videoSixName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video7').name) {
+    if (document.getElementById('video7').name && !this.state.isPIBIntranet[6].type) {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid,
-        name: this.state.videoSevenName
+        name: this.state.videoSevenName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoSevenName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid,
+            name: this.state.videoSevenName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video8').name) {
+    if (document.getElementById('video8').name && !this.state.isPIBIntranet[7].type) {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid,
-        name: this.state.videoEightName
+        name: this.state.videoEightName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoEightName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid,
+            name: this.state.videoEightName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video9').name) {
+    if (document.getElementById('video9').name && !this.state.isPIBIntranet[8].type) {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid,
-        name: this.state.videoNineName
+        name: this.state.videoNineName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoNineName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid,
+            name: this.state.videoNineName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video10').name) {
+    if (document.getElementById('video10').name && !this.state.isPIBIntranet[9].type) {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid,
-        name: this.state.videoTenName
+        name: this.state.videoTenName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoTenName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid,
+            name: this.state.videoTenName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video11').name) {
+    if (document.getElementById('video11').name && !this.state.isPIBIntranet[10].type) {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid,
-        name: this.state.videoElevenName
+        name: this.state.videoElevenName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoElevenName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid,
+            name: this.state.videoElevenName + '--查询客户',
+            tourist: true
+        })
+      }
     }
-    if (document.getElementById('video12').name) {
+    if (document.getElementById('video12').name && !this.state.isPIBIntranet[11].type) {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid,
-        name: this.state.videoTwelveName
+        name: this.state.videoTwelveName + '--OCR',
+        tourist: false
       })
+      if(this.state.videoTwelveName.indexOf("客户") == -1) {
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid,
+            name: this.state.videoTwelveName + '--查询客户',
+            tourist: true
+        })
+      }
     }
     if (list.length > 0) {
       if (val == 'ocr') {
@@ -656,19 +793,22 @@ 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
+        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
+        top: 200,
+        duration: 10
       })
     }
     
@@ -1594,14 +1734,14 @@ class Video extends Component {
       if (!this.state.appId && !this.state.sessionType) {
         this.mpaasSig(data);
         let indexId = 0
-        obj.map((item,index)=>{
-          if(item.actionname.indexOf('Integrated Camera' != -1)) {
+        objList.map((item,index)=>{
+          if(item.actionname.indexOf('Integrated Camera') != -1) {
             indexId = index
           }
         })
         this.setState({
-          cameraValue: obj[indexId].actionid,
-          microphoneValue: obj1[0].actionid
+          cameraValue: objList[indexId].actionid,
+          microphoneValue: objList1[0].actionid
         })
       } else {
         this.setState({
@@ -1949,6 +2089,9 @@ class Video extends Component {
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
           this.state.isCustomer= true
+        //   let audio = document.createElement('audio') //生成一个audio元素 
+        // audio.src = 'http://mp3.9ku.com/hot/2005/05-19/65937.mp3' //音乐的路径 
+        // audio.play()
     };
     // 推送“有新发布”给与会者
     this.test_controller.OnNewPublish = (feed) => {
@@ -2201,6 +2344,7 @@ class Video extends Component {
         }
       })
       if (!document.getElementById("video1").name) {
+        this.state.isPIBIntranet[0].type = false
         this.setState({
           videoOneName: '',
           voiceVideoOne: false,
@@ -2208,6 +2352,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video2").name) {
+        this.state.isPIBIntranet[1].type = false
         this.setState({
           videoTwoName: '',
           voiceVideoTwo: false,
@@ -2215,6 +2360,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video3").name) {
+        this.state.isPIBIntranet[2].type = false
         this.setState({
           videoThreeName: '',
           voiceVideoThree: false,
@@ -2222,6 +2368,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video4").name) {
+        this.state.isPIBIntranet[3].type = false
         this.setState({
           videoFourName: '',
           voiceVideoFour: false,
@@ -2229,6 +2376,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video5").name) {
+        this.state.isPIBIntranet[4].type = false
         this.setState({
           videoFiveName: '',
           voiceVideoFive: false,
@@ -2236,6 +2384,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video6").name) {
+        this.state.isPIBIntranet[5].type = false
         this.setState({
           videoSixName: '',
           voiceVideoSix: false,
@@ -2244,6 +2393,7 @@ class Video extends Component {
       }
 
       if (!document.getElementById("video7").name) {
+        this.state.isPIBIntranet[6].type = false
         this.setState({
           videoSevenName: '',
           voiceVideoSeven: false,
@@ -2251,6 +2401,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video8").name) {
+        this.state.isPIBIntranet[7].type = false
         this.setState({
           videoEightName: '',
           voiceVideoEight: false,
@@ -2258,6 +2409,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video9").name) {
+        this.state.isPIBIntranet[8].type = false
         this.setState({
           videoNineName: '',
           voiceVideoNine: false,
@@ -2265,6 +2417,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video10").name) {
+        this.state.isPIBIntranet[9].type = false
         this.setState({
           videoTenName: '',
           voiceVideoTen: false,
@@ -2272,6 +2425,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video11").name) {
+        this.state.isPIBIntranet[10].type = false
         this.setState({
           videoElevenName: '',
           voiceVideoEleven: false,
@@ -2279,6 +2433,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video12").name) {
+        this.state.isPIBIntranet[11].type = false
         this.setState({
           videoTwelveName: '',
           voiceVideoTwelve: false,
@@ -2319,7 +2474,16 @@ class Video extends Component {
       exitType
     ) => {
       console.log('退出房间者', participant, exitType)
-      this.messageClick(this.props.customLeaveRoom,'error')
+      this.appGetUsernameClick(participant).then((res)=>{
+        console.log('退出房间者',res)
+        let data = res? res : '客户'
+        console.log(data)
+        this.messageClick(( data + '已退出会议'),'error')
+        // let audio = document.createElement('audio') //生成一个audio元素 
+        // audio.src = 'http://mp3.9ku.com/hot/2005/05-19/65937.mp3' //音乐的路径 
+        // audio.play()
+      })
+      
     };
     // 弱网回调
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
@@ -2614,7 +2778,7 @@ class Video extends Component {
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
         if(document.getElementById('publish_video1').name == sid) {
-          this.state.analyserHeight.set(sid,energy/25)
+          this.state.analyserHeight.set(sid,dataArray[step * 20] / 256.0)
             this.state.analyserHeight = this.state.analyserHeight
         }
 
@@ -2723,7 +2887,7 @@ class Video extends Component {
       this.state.manualClose = true
       disconnect();
     }
-    
+    message.destroy()
   }
   finishSessionClick= async () => {
     try {
@@ -3284,8 +3448,34 @@ class Video extends Component {
       employeeNumber: event.target.value
     })
   }
+  retrieveCustomerInfoByActivityId = async (value) =>{
+    try {
+      let result = await API.retrieveCustomerInfoByActivityId({
+        activityId: this.props.businessNumber,
+        sessionId: this.state.sessionId,
+        appAccount: value
+      });
+      console.log(result)
+      
+      if (result.code == 200) {
+        this.messageClick('查询客户信息成功','success')
+      } else {
+        this.messageClick('查询客户信息失败','error')
+      }
+    }catch (err) {
+      this.messageClick('查询客户信息失败','error')
+      }
+      this.setState({
+        clickedFacial: false,
+        clickedOcr: false,
+        
+      })
+  }
   customerFaceClick = (item) => {
     console.log(item)
+    if(item.tourist) {
+      this.retrieveCustomerInfoByActivityId(item.customId)
+    } else {
     var sid
     if (item.feedId == document.getElementById("feedId1").innerText) {
       sid = document.getElementById('video1').name;
@@ -3323,6 +3513,7 @@ class Video extends Component {
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
     })
   }
+  }
   handleChangeOcr =(val)=> {
     console.log(val)
     this.setState({
@@ -3336,6 +3527,23 @@ class Video extends Component {
       this.state.sessionId = props.sessionId,
       this.state.imRoomId = props.imRoomId
   }
+  appGetUsernameClick = async(userId) =>{
+    let data = ''
+    try {
+      let result = await API.appGetUsername({
+        userId: userId,
+        sessionId: this.state.sessionId
+      });
+      console.log(result)
+      
+      if (result.code == 200) {
+        data = result.data.username ? result.data.username : ''
+      }
+      return data
+    }catch (err) {
+      return data
+      }
+  }
   appGetUsername = async (sid) => {
     console.log(sid)
     let userId = ''
@@ -3383,8 +3591,10 @@ class Video extends Component {
       });
       console.log(result)
       let data
+      let typeIntranet
       if (result.code == 200) {
         data = result.data.username ? result.data.username : ''
+        typeIntranet = result.data.userType ? result.data.userType : ''
       } else {
         this.messageClick('查询失败','error')
       }
@@ -3394,53 +3604,88 @@ class Video extends Component {
         })
       }
       if (document.getElementById('video1').name == sid) {
-
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[0].type = true
+        }
         this.setState({
           videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
         })
       }
       if (document.getElementById('video2').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[1].type = true
+        }
         this.setState({
           videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户2'
         })
       } if (document.getElementById('video3').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[2].type = true
+        }
         this.setState({
           videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户3'
         })
       } if (document.getElementById('video4').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[3].type = true
+        }
         this.setState({
           videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户4'
         })
       } if (document.getElementById('video5').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[4].type = true
+        }
         this.setState({
           videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户5'
         })
       } if (document.getElementById('video6').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[5].type = true
+        }
         this.setState({
           videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户6'
         })
       }
       if (document.getElementById('video7').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[6].type = true
+        }
         this.setState({
           videoSevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户7'
         })
       } if (document.getElementById('video8').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[7].type = true
+        }
         this.setState({
           videoEightName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户8'
         })
       } if (document.getElementById('video9').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[8].type = true
+        }
         this.setState({
           videoNineName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户9'
         })
       } if (document.getElementById('video10').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[9].type = true
+        }
         this.setState({
           videoTenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户10'
         })
       } if (document.getElementById('video11').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[10].type = true
+        }
         this.setState({
           videoElevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户11'
         })
       } if (document.getElementById('video12').name == sid) {
+        if(typeIntranet && typeIntranet == 2) {
+          this.state.isPIBIntranet[11].type = true
+        }
         this.setState({
           videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
         })
@@ -3477,7 +3722,7 @@ class Video extends Component {
           employeeError: result.data.staffName ? '' : '查无此人',
         })
         if(result.data.staffName){
-            this.state.linkData = 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting&appointmentID='+ this.props.businessNumber + '&staffID='+this.state.employeeNumber+'&staffName='+ encodeURIComponent(result.data.staffName)
+            this.state.linkData = this.props.internalUrl + '&appointmentID='+ this.props.businessNumber + '&staffID='+this.state.employeeNumber+'&staffName='+ encodeURIComponent(result.data.staffName)
           
         }
       } else {
@@ -3517,11 +3762,13 @@ class Video extends Component {
     const canvas = document.createElement('canvas');
     const videoMedia = document.getElementById('manedvideo');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
-    const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
-    const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+    const left =document.getElementById("allHSBC").getBoundingClientRect().left;
     const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
-    const width =  left > 21 ? right : right + left
-    const height = document.getElementById("whiteboardDIV").getBoundingClientRect().height
+    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
     canvas.width = width;
     canvas.height = height;
     videoMedia.addEventListener('play', (event) =>{
@@ -3530,7 +3777,7 @@ class Video extends Component {
       loop()
       function loop() {
           if (!$this.paused && !$this.ended) {
-            cobj.drawImage(videoMedia, 0, top, width, height, 0, 0,width, height);
+            cobj.drawImage(videoMedia, x, top, width, height, 0, 0,width, height,);
               setTimeout(loop, 1000 / 10); // drawing at 30fps
           }
       }
@@ -3671,7 +3918,123 @@ class Video extends Component {
            console.log('whiteboardDIV', this.state.whiteboardHeight,box.clientHeight,this.state.whiteboardWidth)
        }
   }
-  
+  muteOpposite = (value) => {
+    console.log(value);
+    if (value == 'video1') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }
+    if (value == 'video2') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video3') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video4') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video5') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video6') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video7') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video8') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }if (value == 'video9') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }
+    if (value == 'video10') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }
+    if (value == 'video11') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }
+    if (value == 'video12') {
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1223,
+          'sessionId': this.state.sessionId,
+          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+        })
+      });
+    }
+    
+  }
   render() {
     const { meetingInfo,isTranscribing } = this.props
     var pdfChildren
@@ -3910,6 +4273,7 @@ class Video extends Component {
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
                   
                   <div style={{ display: (this.state.videoOneName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                    <div onClick={this.muteOpposite.bind(this,'video1')}>
                   {
                     this.state.voiceVideoOne && <img
                       alt=""
@@ -3918,7 +4282,7 @@ class Video extends Component {
                     />
                   }
                   <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px'}} className="canvasClassOne" id="subscribe_volumeView1" 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.videoOneName}
                     </div>
@@ -3938,6 +4302,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId2" type="text" />
                 
                 <div style={{ display: (this.state.videoTwoName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video2')}>
                 {
                   this.state.voiceVideoTwo && <img
                     alt=""
@@ -3946,7 +4311,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView2" 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.videoTwoName}
                   </div>
@@ -3964,6 +4329,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
                 
                 <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video3')}>
                 {
                   this.state.voiceVideoThree && <img
                     alt=""
@@ -3972,7 +4338,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView3" 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.videoThreeName}
                   </div>
@@ -3989,6 +4355,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
                 
                 <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video4')}>
                 {
                   this.state.voiceVideoFour && <img
                     alt=""
@@ -3997,7 +4364,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView4" 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.videoFourName}
                   </div>
@@ -4015,6 +4382,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
                 
                 <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video5')}>
                 {
                   this.state.voiceVideoFive && <img
                     alt=""
@@ -4023,7 +4391,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView5" 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.videoFiveName}
                   </div>
@@ -4040,6 +4408,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
                 
                 <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video6')}>
                 {
                   this.state.voiceVideoSix && <img
                     alt=""
@@ -4048,7 +4417,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView6" 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.videoSixName}
                   </div>
@@ -4077,6 +4446,7 @@ class Video extends Component {
                   <label style={{ display: 'none' }} id="feedId7" type="text" />
                   
                   <div style={{ display: (this.state.videoSevenName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                  <div onClick={this.muteOpposite.bind(this,'video7')}>
                   {
                     this.state.voiceVideoSeven && <img
                       alt=""
@@ -4085,7 +4455,7 @@ class Video extends Component {
                     />
                   }
                   <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView7" 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.videoSevenName}
                     </div>
@@ -4105,6 +4475,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId8" type="text" />
                 
                 <div style={{ display: (this.state.videoEightName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video8')}>
                 {
                   this.state.voiceVideoEight && <img
                     alt=""
@@ -4113,7 +4484,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView8" 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.videoEightName}
                   </div>
@@ -4130,6 +4501,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId9" type="text" />
                 
                 <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video9')}>
                 {
                   this.state.voiceVideoNine && <img
                     alt=""
@@ -4138,7 +4510,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView9" 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.videoNineName}
                   </div>
@@ -4157,6 +4529,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId10" type="text" />
                 
                 <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video10')}>
                 {
                   this.state.voiceVideoTen && <img
                     alt=""
@@ -4165,7 +4538,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView10" 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.videoTenName}
                   </div>
@@ -4182,6 +4555,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId11" type="text" />
                 
                 <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video11')}>
                 {
                   this.state.voiceVideoEleven && <img
                     alt=""
@@ -4190,7 +4564,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView11" 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.videoElevenName}
                   </div>
@@ -4208,6 +4582,7 @@ class Video extends Component {
                 <label style={{ display: 'none' }} id="feedId12" type="text" />
                 
                 <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div onClick={this.muteOpposite.bind(this,'video12')}>
                 {
                   this.state.voiceVideoTwelve && <img
                     alt=""
@@ -4216,7 +4591,7 @@ class Video extends Component {
                   />
                 }
                 <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView12" 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.videoTwelveName}
                   </div>
@@ -4384,10 +4759,10 @@ class Video extends Component {
   }
 }
 Video.defaultProps = {
-  mtoken: "26364ded9b83",
-roomId: "645157287240850",
-imRoomId: "Fwua8kGB6@conference.openfire2.leimondata.cn",
-sessionId: "Fwua8kGB6",
+  mtoken: "",
+roomId: "",
+imRoomId: "",
+sessionId: "",
   tellerAccount: 't001',
   businessNumber: '123',
   callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
@@ -4412,5 +4787,6 @@ sessionId: "Fwua8kGB6",
     otherAttendees: undefined
   },
   isTranscribing: false,
+  internalUrl: 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting'
 }
 export default Video