react_hsbc_teller 1.2.0 → 1.2.3

package/packages/pages/video/video.jsx

@@ -19,10 +19,14 @@ import message from "antd/lib/message";
 import 'antd/lib/message/style'
 import Spin from "antd/lib/spin";
 import 'antd/lib/spin/style'
+import Select  from "antd/lib/select";
+import 'antd/lib/select/style'
+
 import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl } from 'react-intl';
 import axios from 'axios';
+const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
@@ -141,6 +145,46 @@ class Video extends Component {
     noVideoEleven: false,
     noVideoTwelve: false,
     manualClose: false,
+    defaultValue: '1',
+    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 = '';
@@ -164,6 +208,8 @@ class Video extends Component {
       let publish_config = {}
       publish_config.media_type = 1
       publish_config.publish_device = 1
+      publish_config.videoSource = this.state.cameraValue
+      publish_config.audioSource = this.state.microphoneValue
       publish_config.need_volume_analyser = true
       // publish_config.video_profile_type = 3
       publish_config.video_profile_type=100
@@ -267,7 +313,6 @@ class Video extends Component {
     const config_param = {};
     config_param.auto_publish_subscribe = 4;
     config_param.media_type = 1;
-    config_param.publish_device = 1;
     config_param.video_profile_type = '3';
     config_param.need_volume_analyser = true;
     config_param.initPublish = [
@@ -277,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',
@@ -330,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;
@@ -360,6 +396,106 @@ class Video extends Component {
         url: '' // ⽔印图⽚ HTTP 地址
       }
     ];
+  recordParam.tagPositions = [
+    {
+      tag: 'projectionWhiteboard',
+      xPosition: 0,
+      yPosition: 360,
+      width: 1120,
+      height: 360
+    },
+    {
+      tag: 'VIDEO_SOURCE_SCREEN',
+      xPosition: 0,
+      yPosition: 144,
+      width: 256,
+      height: 144
+    },
+    {
+      tag: 'tag1',
+      xPosition: 0,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer1',
+      xPosition: 160,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer2',
+      xPosition: 320,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer3',
+      xPosition: 480,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer4',
+      xPosition: 640,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer5',
+      xPosition: 800,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer6',
+      xPosition: 960,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer7',
+      xPosition: 1120,
+      yPosition: 0,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer8',
+      xPosition: 1120,
+      yPosition: 144,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer9',
+      xPosition: 1120,
+      yPosition: 288,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer10',
+      xPosition: 1120,
+      yPosition: 432,
+      width: 160,
+      height: 144
+    },
+    {
+      tag: 'customer11',
+      xPosition: 1120,
+      yPosition: 576,
+      width: 160,
+      height: 144
+    }
+  ]
     console.log('recordParam', recordParam);
     this.test_controller.StartRemoteRecord(filePath, recordParam, '')
 
@@ -408,11 +544,6 @@ class Video extends Component {
       console.log(result);
       if (this.state.faceCustomerType == 1) {
         this.contrastFaceVerify(result.data)
-      } else if (this.state.faceCustomerType == 2) {
-        // ocr
-        this.setState({
-          isModalVisibleFacial: false
-        })
       }
 
     } catch (err) {
@@ -441,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') {
@@ -559,14 +798,16 @@ class Video extends Component {
         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
       })
     }
     
@@ -1491,9 +1732,15 @@ class Video extends Component {
       })
       if (!this.state.appId && !this.state.sessionType) {
         this.mpaasSig(data);
+        let indexId = 0
+        objList.map((item,index)=>{
+          if(item.actionname.indexOf('Integrated Camera' != -1)) {
+            indexId = index
+          }
+        })
         this.setState({
-          cameraValue: obj[0].actionid,
-          microphoneValue: obj1[0].actionid
+          cameraValue: objList[indexId].actionid,
+          microphoneValue: objList1[0].actionid
         })
       } else {
         this.setState({
@@ -1585,6 +1832,8 @@ class Video extends Component {
       publish_config.media_type = 1
       publish_config.publish_device = 1
       publish_config.need_volume_analyser = true
+      publish_config.videoSource = this.state.cameraValue
+      publish_config.audioSource = this.state.microphoneValue
       // publish_config.video_profile_type = 3
       publish_config.video_profile_type=100
       publish_config.video_profile_diy={width:640, height:360, frameRate:15, bitrate:400}
@@ -1839,6 +2088,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) => {
@@ -2091,6 +2343,7 @@ class Video extends Component {
         }
       })
       if (!document.getElementById("video1").name) {
+        this.state.isPIBIntranet[0].type = false
         this.setState({
           videoOneName: '',
           voiceVideoOne: false,
@@ -2098,6 +2351,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video2").name) {
+        this.state.isPIBIntranet[1].type = false
         this.setState({
           videoTwoName: '',
           voiceVideoTwo: false,
@@ -2105,6 +2359,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video3").name) {
+        this.state.isPIBIntranet[2].type = false
         this.setState({
           videoThreeName: '',
           voiceVideoThree: false,
@@ -2112,6 +2367,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video4").name) {
+        this.state.isPIBIntranet[3].type = false
         this.setState({
           videoFourName: '',
           voiceVideoFour: false,
@@ -2119,6 +2375,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video5").name) {
+        this.state.isPIBIntranet[4].type = false
         this.setState({
           videoFiveName: '',
           voiceVideoFive: false,
@@ -2126,6 +2383,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video6").name) {
+        this.state.isPIBIntranet[5].type = false
         this.setState({
           videoSixName: '',
           voiceVideoSix: false,
@@ -2134,6 +2392,7 @@ class Video extends Component {
       }
 
       if (!document.getElementById("video7").name) {
+        this.state.isPIBIntranet[6].type = false
         this.setState({
           videoSevenName: '',
           voiceVideoSeven: false,
@@ -2141,6 +2400,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video8").name) {
+        this.state.isPIBIntranet[7].type = false
         this.setState({
           videoEightName: '',
           voiceVideoEight: false,
@@ -2148,6 +2408,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video9").name) {
+        this.state.isPIBIntranet[8].type = false
         this.setState({
           videoNineName: '',
           voiceVideoNine: false,
@@ -2155,6 +2416,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video10").name) {
+        this.state.isPIBIntranet[9].type = false
         this.setState({
           videoTenName: '',
           voiceVideoTen: false,
@@ -2162,6 +2424,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video11").name) {
+        this.state.isPIBIntranet[10].type = false
         this.setState({
           videoElevenName: '',
           voiceVideoEleven: false,
@@ -2169,6 +2432,7 @@ class Video extends Component {
         })
       }
       if (!document.getElementById("video12").name) {
+        this.state.isPIBIntranet[11].type = false
         this.setState({
           videoTwelveName: '',
           voiceVideoTwelve: false,
@@ -2209,7 +2473,15 @@ 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 : '客户'
+        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) => {
@@ -2494,7 +2766,7 @@ class Video extends Component {
       }
 
       for (var i = 0; i < 40; i++) {
-        let energy = (dataArray[step * i] / 256.0) * 100;
+        let energy = (dataArray[step * i] / 256.0) * 80;
         ctx.beginPath();
         ctx.fillStyle = this.props.voiceColor;
         const { x1, y1, x2, y2 } = drawArea
@@ -2504,7 +2776,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
         }
 
@@ -2535,9 +2807,9 @@ class Video extends Component {
         //   this.setState({
         //     isPDF: true,
         //   })
-        // } else {
+      // } else {
           document.getElementById('video20') && document.getElementById('video20').name ? this.test_controller.UnPublish(document.getElementById('video20').name) : ''
-        // }
+      // }
         this.state.isSharedScreen = false
         this.state.isScreenSwitching = false
         this.setState({
@@ -2550,11 +2822,11 @@ class Video extends Component {
         }
         // if (!this.state.laveRoomSharedScreen && this.state.isSharedScreen) {
         //   this.sharedScreen()
-        // }
+    // }
       }
         
       
-    }
+    };
   }
   enterRoom = async () =>{
     try {
@@ -3084,12 +3356,41 @@ class Video extends Component {
       isModalVisibleEnd: false
     })
   };
+  ocrCallback= async () => {
+    try {
+      let result = await API.ocrCallback({
+        sessionId: this.state.sessionId,
+        staffId: this.props.tellerAccount,
+        activityId: this.props.businessNumber,
+        appAccount: this.state.faceCustomerUid,
+        fileBase64: this.state.facialImg.replace(/^data:image\/\w+;base64,/,""),
+        type: this.state.defaultValue
+      });
+      if (result.code == 200) {
+        this.messageClick('识别成功','success')
+        this.setState({
+          isModalVisibleFacial: false
+        })
+      } else {
+        this.messageClick('识别失败','error')
+      }
+    } catch (err) {
+      this.messageClick('识别失败','error')
+    }
+  }
   handleOkFacial = () => {
-    const frontIdcard = new File([this.dataURLtoFile(this.state.facialImg, 'image/jpeg')], new Date() + '.png'); // 重命名了
+    if (this.state.faceCustomerType == 2) {
+      // ocr
+      this.ocrCallback()
+      
+    } else {
+      const frontIdcard = new File([this.dataURLtoFile(this.state.facialImg, 'image/jpeg')], new Date() + '.png'); // 重命名了
     const formData = new FormData();
     formData.append('file', frontIdcard);
     formData.append('sessionId', this.state.sessionId);
     this.uploadImg(formData)
+    }
+    
   };
   handleCancelFacial = () => {
     this.setState({
@@ -3145,8 +3446,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;
@@ -3174,6 +3501,7 @@ class Video extends Component {
       sid = document.getElementById('video12').name;
     }
     console.log(sid)
+    this.state.customOcrSid = sid
     this.state.faceCustomerUid = item.customId,
     this.setState({
       clickedFacial: false,
@@ -3183,12 +3511,37 @@ class Video extends Component {
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
     })
   }
+  }
+  handleChangeOcr =(val)=> {
+    console.log(val)
+    this.setState({
+      defaultValue: val,
+      facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+    })
+  }
   componentWillReceiveProps(props) {
       this.state.channelId = props.roomId,
       this.state.rtoken = props.mtoken,
       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 = ''
@@ -3236,8 +3589,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')
       }
@@ -3247,53 +3602,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'
         })
@@ -3330,7 +3720,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 {
@@ -3370,11 +3760,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) =>{
@@ -3383,7 +3775,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
           }
       }
@@ -3524,6 +3916,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
@@ -3762,6 +4271,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=""
@@ -3770,7 +4280,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>
@@ -3790,6 +4300,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=""
@@ -3798,7 +4309,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>
@@ -3816,6 +4327,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=""
@@ -3824,7 +4336,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>
@@ -3841,6 +4353,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=""
@@ -3849,7 +4362,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>
@@ -3867,6 +4380,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=""
@@ -3875,7 +4389,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>
@@ -3892,6 +4406,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=""
@@ -3900,7 +4415,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>
@@ -3929,6 +4444,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=""
@@ -3937,7 +4453,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>
@@ -3957,6 +4473,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=""
@@ -3965,7 +4482,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>
@@ -3982,6 +4499,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=""
@@ -3990,7 +4508,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>
@@ -4009,6 +4527,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=""
@@ -4017,7 +4536,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>
@@ -4034,6 +4553,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=""
@@ -4042,7 +4562,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>
@@ -4060,6 +4580,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=""
@@ -4068,7 +4589,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>
@@ -4132,7 +4653,16 @@ class Video extends Component {
             </div>
           ]}>
             <div className="faceBody">
-              <img className="faceImg" src={this.state.facialImg} alt=""></img>
+            {this.state.faceCustomerType == 2 && 
+            <Select defaultValue={this.state.defaultValue} style={{ width: 120,marginBottom: '20px' }} onChange={this.handleChangeOcr}>
+            <Option value="1">正面</Option>
+            <Option value="2">反面</Option>
+          </Select>
+            }
+            <div>
+            <img className="faceImg" src={this.state.facialImg} alt=""></img>
+            </div>
+              
             </div>
           </Modal>
           {/* <Modal title={this.state.titleModal} cancelText="取消" okText="确定" visible={this.state.isModalVisibleFacial}
@@ -4255,5 +4785,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