react_hsbc_teller 1.2.2 → 1.2.5

package/packages/pages/video/video.jsx

@@ -322,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',
@@ -375,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;
@@ -408,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);
@@ -802,6 +793,7 @@ class Video extends Component {
     })
   }
   messageClick=(value,valueOne)=>{
+    console.log(value,valueOne)
     if(valueOne == 'error') {
       message.error({
         content: value,
@@ -1658,7 +1650,11 @@ class Video extends Component {
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
       console.log('devicesInfo' + JSON.stringify(devicesInfo));
-      const obj = [];
+      const obj = [
+//         {actionid: '0133d06019b8fe9426818ae7573ccfc31c150e09138e7f5ccfda03d6e224ffd4', groupId: '9c0334ba5cba71b60acb3ec6669c3aac78371ec9d9e33d2e8af72a758d895d27', actionname: 'Integrated Camera (13d3:56fb)'},
+
+// {actionid: '4695c628677498d876074b941c16f6921d4e57534b50bfc2cb973da84e0e2622', groupId: '0d86c9467f096440ed74449192be5fafea59ac469866975f30b61fe964e2a80e', actionname: 'C2D Camera (0416:5035)'}
+      ];
       const obj1 = [];
       const obj2 = [];
       let num = 0;
@@ -1679,7 +1675,8 @@ class Video extends Component {
             b.actionname = devicesInfo[i].label
           }
           obj.push(b)
-        } else if (devicesInfo[i].kind === 'audioinput') {
+        } else 
+        if (devicesInfo[i].kind === 'audioinput') {
           // 麦克风
           b.actionid = devicesInfo[i].deviceId;
           b.groupId = devicesInfo[i].groupId || 'empty';
@@ -1739,19 +1736,22 @@ class Video extends Component {
         microphoneList: objList1,
         speakerList: objList2.length>0? [objList2[0]]: []
       })
+      let indexId = 0
+      objList.map((item,index)=>{
+        if(item.actionname.indexOf('Integrated Camera') != -1) {
+          indexId = index
+        }
+      })
+      console.log(indexId)
+      this.setState({
+        cameraValue: objList[indexId].actionid,
+        microphoneValue: objList1[0].actionid
+      })
       if (!this.state.appId && !this.state.sessionType) {
+        console.log('cameraValue',this.state.cameraValue)
         this.mpaasSig(data);
-        let indexId = 0
-        obj.map((item,index)=>{
-          if(item.actionname.indexOf('Integrated Camera' != -1)) {
-            indexId = index
-          }
-        })
-        this.setState({
-          cameraValue: obj[indexId].actionid,
-          microphoneValue: obj1[0].actionid
-        })
       } else {
+        console.log('cameraValue',this.state.cameraValue)
         this.setState({
           isModalVisibleInspection: true
         })
@@ -1899,7 +1899,7 @@ class Video extends Component {
         this.enterRoom()
         this.timer = setInterval(
           () => {
-            if(!this.state.voiceStatue && this.state.analyserHeight.get(sid).toFixed(2) > 0) {
+            if(!this.state.voiceStatue && this.state.analyserHeight.get(sid).toFixed(2) > 0.1) {
               callNimIM('sendCustomCmdMsg', {
                 customId: this.state.imRoomId,
                 content: JSON.stringify({
@@ -2485,6 +2485,7 @@ class Video extends Component {
       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' //音乐的路径 
@@ -2495,11 +2496,15 @@ class Video extends Component {
     // 弱网回调
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
+      if(sid == document.getElementById('publish_video1').name) {
+        this.messageClick('当前网络环境较差','error')
+      }
     };
     // 开始服务端录制成功
     this.test_controller.OnStartRemoteRecordSucc = (record_id) => {
       console.log('开始服务端录制成功', record_id);
       this.state.recordId = record_id
+      this.videoRecordCallback('1')
     };
     // 开始服务端录制失败
     this.test_controller.OnStartRemoteRecordFailed = (
@@ -2512,6 +2517,7 @@ class Video extends Component {
     // 结束服务端录制成功
     this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
       console.log('结束服务端录制成功', recordId);
+      this.videoRecordCallback('2')
       // this.endSessionValue()
       // 获取服务端录制结果
     };
@@ -2773,9 +2779,11 @@ class Video extends Component {
         x2: 22 / 50 * canvas.width,  // 波动范围左上角的点坐标
         y2: 10 / 50 * canvas.height,
       }
-
+      let number = 0
       for (var i = 0; i < 40; i++) {
+        
         let energy = (dataArray[step * i] / 256.0) * 80;
+        number = number + energy
         ctx.beginPath();
         ctx.fillStyle = this.props.voiceColor;
         const { x1, y1, x2, y2 } = drawArea
@@ -2784,12 +2792,13 @@ class Video extends Component {
         let startX = x2 // 绘制起始点x
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
-        if(document.getElementById('publish_video1').name == sid) {
-          this.state.analyserHeight.set(sid,dataArray[step * 20] / 256.0)
+        if(document.getElementById('publish_video1').name == sid && i == 39) {
+          console.log(number / 40 / 70,number / 40)
+          this.state.analyserHeight.set(sid,number / 40 / 70)
             this.state.analyserHeight = this.state.analyserHeight
         }
-
       }
+      
       this.state.OnVolumeAnalyserMap.set(sid,setInterval(
         this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser),
       300
@@ -2837,6 +2846,21 @@ class Video extends Component {
       
     };
   }
+  videoRecordCallback = async(type)=>{
+    try {
+      let result = await API.videoRecordCallback({
+        activityId: this.props.businessNumber,
+        sessionId: this.state.sessionId,
+        type: type
+      });
+      console.log(result);
+    } catch (err) {
+      console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
+    }
+  }
   enterRoom = async () =>{
     try {
       let result = await API.enterRoom({
@@ -2894,7 +2918,7 @@ class Video extends Component {
       this.state.manualClose = true
       disconnect();
     }
-    
+    message.destroy()
   }
   finishSessionClick= async () => {
     try {
@@ -3729,7 +3753,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 {
@@ -3769,11 +3793,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) =>{
@@ -3782,7 +3808,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
           }
       }
@@ -3923,7 +3949,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
@@ -4162,6 +4304,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=""
@@ -4170,7 +4313,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>
@@ -4190,6 +4333,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=""
@@ -4198,7 +4342,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>
@@ -4216,6 +4360,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=""
@@ -4224,7 +4369,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>
@@ -4241,6 +4386,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=""
@@ -4249,7 +4395,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>
@@ -4267,6 +4413,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=""
@@ -4275,7 +4422,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>
@@ -4292,6 +4439,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=""
@@ -4300,7 +4448,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>
@@ -4329,6 +4477,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=""
@@ -4337,7 +4486,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>
@@ -4357,6 +4506,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=""
@@ -4365,7 +4515,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>
@@ -4382,6 +4532,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=""
@@ -4390,7 +4541,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>
@@ -4409,6 +4560,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=""
@@ -4417,7 +4569,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>
@@ -4434,6 +4586,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=""
@@ -4442,7 +4595,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>
@@ -4460,6 +4613,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=""
@@ -4468,7 +4622,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>
@@ -4636,10 +4790,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',
@@ -4664,5 +4818,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