react_hsbc_teller 0.3.4 → 0.3.8

package/packages/pages/video/video.jsx

@@ -21,6 +21,7 @@ import 'antd/lib/spin/style'
 import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl } from 'react-intl';
+import html2canvas from 'html2canvas';
 const LEAVE_TYPE = {
   TELLER_EXIT: '1', // 坐席退出
   ROOM_DESTROYED: '-1', // 房间异常
@@ -69,6 +70,14 @@ class Video extends Component {
     sessionId: this.props.sessionId,
     imRoomId: this.props.imRoomId,
     isPictureInPicture: false,
+    clickedFacial: false,
+    clickedOcr: false,
+    videoOneName: '',
+    videoTwoName: '',
+    videoThreeName: '',
+    videoFourName: '',
+    videoFiveName: '',
+    videoSixName: ''
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -143,8 +152,8 @@ class Video extends Component {
     config_param.workspaceId = this.state.workSpaceId;
     config_param.uid = this.props.tellerAccount;
     config_param.biz_name = this.state.bizName; // 'demo'
-    config_param.appId = this.state.appId;
-
+    config_param.sub_biz = this.state.appId;
+    config_param.sign = window.sessionStorage.getItem('alimpassSig')
     config_param.room_server_url = this.props.roomServerUrl;
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
@@ -156,7 +165,7 @@ class Video extends Component {
     config_param.auto_publish_subscribe = 3;
     config_param.media_type = 1;
     config_param.publish_device = 1;
-    config_param.video_profile_type = '5';
+    config_param.video_profile_type = '3';
     config_param.need_volume_analyser = true;
     // config_param.audioSource = that.microphone[0].actionid
     // config_param.videoSource = that.checkOne[0]
@@ -324,7 +333,7 @@ class Video extends Component {
     }
   }
   // 获取人员客户列表
-  selectCustomer = () => {
+  selectCustomer = (val) => {
     const list = []
     if (document.getElementById('video1').name) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText))
@@ -332,7 +341,7 @@ class Video extends Component {
       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: '客户1',
+        name: this.state.videoOneName,
       })
     }
     if (document.getElementById('video2').name) {
@@ -341,7 +350,7 @@ class Video extends Component {
       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: '客户2'
+        name: this.state.videoTwoName
       })
     }
     if (document.getElementById('video3').name) {
@@ -350,7 +359,7 @@ class Video extends Component {
       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: '客户3'
+        name: this.state.videoThreeName
       })
     }
     if (document.getElementById('video4').name) {
@@ -359,7 +368,7 @@ class Video extends Component {
       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: '客户4'
+        name: this.state.videoFourName
       })
     }
     if (document.getElementById('video5').name) {
@@ -368,7 +377,7 @@ class Video extends Component {
       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: '客户5'
+        name: this.state.videoFiveName
       })
     }
     if (document.getElementById('video6').name) {
@@ -377,27 +386,44 @@ class Video extends Component {
       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: '客户6'
+        name: this.state.videoSixName
       })
     }
+    if(list.length > 0) {
+      if(val == 'ocr') {
+        this.setState({
+          clickedOcr: true
+        })
+      } else if(val == 'facial'){
+        this.setState({
+          clickedFacial: true
+        })
+      }
+    } else {
+      message.success('当前暂无客户')
+    }
     this.setState({
       customerList: list
     })
   }
   // 人脸识别
   facialRecognition = () => {
+    if (this.isFileSuccuse()) {
     this.setState({
       faceCustomerType: 1,
       titleModal: '人脸识别'
     })
-    this.selectCustomer()
+    this.selectCustomer('facial')
+  }
   };
   ocrClick = () => {
+    if (this.isFileSuccuse()) {
     this.setState({
       faceCustomerType: 2,
       titleModal: 'OCR识别'
     })
-    this.selectCustomer()
+    this.selectCustomer('ocr')
+  }
   };
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
@@ -409,7 +435,7 @@ class Video extends Component {
         this.setState({ isBigVideo: 'video1' })
       }
     } else if (val == 'isLangPublishVideo1') {
-      if (document.getElementById('publish_video1').name) {
+      if (document.getElementById('publish_video1').name && this.state.isCustomer) {
         this.setState({ isBigVideo: 'publish_video1' })
       }
     } else if (val == 'isLangVideo2') {
@@ -443,32 +469,56 @@ class Video extends Component {
       } else {
         const list = []
       if(document.getElementById('video1').name) {
-        list.push('video1')
+        list.push({
+          name: 'video1',
+          title: this.state.videoOneName
+        })
       }
       if(document.getElementById('publish_video1').name) {
-        list.push('publish_video1')
+        list.push({
+          name: 'publish_video1',
+          title: '坐席'
+        })
       }
       if(document.getElementById('video2').name) {
-        list.push('video2')
+        list.push({
+          name: 'video2',
+          title: this.state.videoTwoName
+        })
       }
       if(document.getElementById('video3').name) {
-        list.push('video3')
+        list.push({
+          name: 'video3',
+          title: this.state.videoThreeName
+        })
       }
       if(document.getElementById('video4').name) {
-        list.push('video4')
+        list.push({
+          name: 'video4',
+          title: this.state.videoFourName
+        })
       }
       if(document.getElementById('video5').name) {
-        list.push('video5')
+        list.push({
+          name: 'video5',
+          title: this.state.videoFiveName
+        })
       }
       if(document.getElementById('video6').name) {
-        list.push('video6')
+        list.push({
+          name: 'video6',
+          title: this.state.videoSixName
+        })
       }
       if(document.getElementById('video10').name) {
-        list.push('video10')
+        list.push({
+          name: 'video10',
+          title: '互动白板'
+        })
       }
       console.log(list)
-      const width = 320 * list.length;
-      const height = 480;
+      const width = 640;
+      const height = 360  * list.length;
       const canvas = document.createElement('canvas');
       const cobj = canvas.getContext('2d'); // 获取绘图环境
       canvas.width = width;
@@ -477,18 +527,65 @@ class Video extends Component {
         cobj.clearRect(0, 0, width, height);
         for(let i=0;i<list.length;i++){
           
-        let videoId = list[i];
+        let videoId = list[i].name;
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
         let videoHeight = videoDiv.videoHeight;
-        let newVideoWidth = 320;
-        let newVideoHeight = 480;
-        if (videoHeight * 320 / videoWidth > 480) {
-          newVideoWidth = videoWidth * 480 / videoHeight;
+        let newVideoWidth = 640;
+        let newVideoHeight = 360;
+        if (videoHeight * 640 / videoWidth > 360) {
+          newVideoWidth = videoWidth * 360 / videoHeight;
         } else {
-          newVideoHeight = videoHeight * 320 / videoWidth;
+          newVideoHeight = videoHeight * 640 / videoWidth;
         }
-        cobj.drawImage(videoDiv, 320 * i, (480 - newVideoHeight)/2, 320, newVideoHeight);
+        console.log(newVideoWidth,videoHeight)
+        
+        cobj.drawImage(videoDiv, (640 - newVideoWidth)/2, 360 * i, newVideoWidth, newVideoHeight);
+        var img = document.getElementById("icon_huatong");
+        cobj.drawImage(img, 600, 320, canvas.width, canvas.height);
+        cobj.beginPath();
+        cobj.strokeStyle = this.props.titleColor;
+        cobj.fillStyle = this.props.titleBackground;
+        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60 )
+        cobj.closePath();
+        cobj.fill();
+        cobj.stroke();
+        cobj.font = "28px auto";
+        cobj.textAlign = 'center';
+        cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
+        console.log(videoDiv.srcObject, videoDiv.srcObject.getAudioTracks(), videoDiv.srcObject.getAudioTracks()[0])
+    //     const acc = new AudioContext()
+    //     // 返回一个多媒体流
+    //     const mic = acc.createMediaStreamSource(videoDiv.srcObject.getAudioTracks()[0])
+    //     // creates an AnalyserNode 创建一个分析节点
+    // this.analyser = acc.createAnalyser()
+    // // fftsize默认值2048，是快速傅立叶变换用于频域分析的值，必须为2的幂，而我们得到的数据通常为其的一半，下面会说道
+    // this.analyser.fftSize = 256
+    // // 调用绘图函数
+    // mic.connect(this.analyser)
+    //     let dataArray = new Uint8Array(this.analyser);
+    //     this.analyser.getByteFrequencyData(dataArray);
+    //   let step = Math.round(dataArray.length / 60); //采样步长
+      // 以画布左上角为坐标原点
+      // let drawArea = {
+      //   x1: 28/50 * canvas.width, // 波动范围右下角的点坐标
+      //   y1: 25/50 * canvas.height, 
+      //   x2: 22/50 * canvas.width,  // 波动范围左上角的点坐标
+      //   y2: 10/50 * canvas.height,
+      // }
+
+      // for (var j = 0; j < 40; j++) {
+      //   let energy = (dataArray[step * j] / 256.0) * 80;
+      //   ctx.beginPath();
+      //   ctx.fillStyle = "#0AE544";
+      //   const { x1,y1,x2,y2} = drawArea
+      //   let width = x1-x2;
+      //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+      //   let startX =  x2 // 绘制起始点x
+      //   let startY =  y1 - height  // 绘制起始点y
+      //   cobj.fillRect(startX, startY, width, height )
+      // }
+        // cobj.drawImage(videoDiv, 320 * i, (480 - newVideoHeight)/2, 320, newVideoHeight);
         }
       }, 100);
       const captureStream = canvas.captureStream();
@@ -746,7 +843,7 @@ class Video extends Component {
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
       console.log('订阅媒体流成功', feed, sid);
-      console.log(document.getElementById("feedId1").innerText)
+      this.appGetUsername(sid)
     };
     // 订阅媒体流失败
     this.test_controller.OnSubscribeFailed = (
@@ -763,6 +860,7 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
+      this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
       this.setState(
         {
           isCustomer: true
@@ -776,7 +874,8 @@ class Video extends Component {
       let newArray = [...array];
       newArray.push({
         feedId: feed.feedId,
-        uid: feed.uid
+        uid: feed.uid,
+        tag: feed.tag
       });
       console.log(array, newArray, this.state.roomCustomerList);
       this.setState({
@@ -805,10 +904,52 @@ class Video extends Component {
     // 取消订阅媒体流成功
     this.test_controller.OnUnSubscribeSucc = (sid) => {
       console.log('取消订阅媒体流成功', sid)
+      if(!document.getElementById("video1").name) {
+        this.setState({
+          videoOneName: ''
+        })
+      }
+      if(!document.getElementById("video2").name) {
+        this.setState({
+          videoTwoName: ''
+        })
+      }
+      if(!document.getElementById("video3").name) {
+        this.setState({
+          videoThreeName: ''
+        })
+      }
+      if(!document.getElementById("video4").name) {
+        this.setState({
+          videoFourName: ''
+        })
+      }
+      if(!document.getElementById("video5").name) {
+        this.setState({
+          videoFiveName: ''
+        })
+      }
+      if(!document.getElementById("video6").name) {
+        this.setState({
+          videoSixName: ''
+        })
+      }
     };
     // 推送“取消发布”给与会者
     this.test_controller.OnUnPublish = (feed) => {
       console.log('取消发布者', feed)
+      for(let i=0;i<this.state.roomCustomerList.length;i++) {
+        if(this.state.roomCustomerList[i].uid == feed.uid) {
+          this.state.roomCustomerList.splice(i, 1)
+        }
+      }
+
+      if(this.state.roomCustomerList.length == 0) {
+        this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
+        this.setState({
+          isCustomer: false
+        })
+      }
     };
     // 推送“取消订阅”给与会者 OnUnSubscribe(unsubscriber,feed)
     this.test_controller.OnUnSubscribe = (unsubscriber, feed) => {
@@ -1040,6 +1181,8 @@ class Video extends Component {
         return;
       }
       let canvas = document.getElementById(volumeView);
+      canvas.width = this.props.microphoneSize
+      canvas.height = this.props.microphoneSize
       let ctx = canvas.getContext("2d");
 
       let outcanvas = document.createElement("canvas");
@@ -1048,44 +1191,101 @@ class Video extends Component {
       ctx.strokeStyle = "#db0011";
       ctx.lineWidth = 2;
       ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
+      // ctx.fillStyle ='rgba(0, 0, 0, 0.2)';
+      // ctx.fillRect(0, 0, canvas.width, canvas.height, )
       let dataArray = new Uint8Array(analyser.frequencyBinCount);
       analyser.getByteFrequencyData(dataArray);
+      // console.log('wwww', dataArray.length, document.getElementById('publish_video1').srcObject)
       let step = Math.round(dataArray.length / 60); //采样步长
+      var img = document.getElementById("icon_huatong");
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      // 以画布左上角为坐标原点
+      let drawArea = {
+        x1: 28/50*canvas.width, // 波动范围右下角的点坐标
+        y1: 25/50*canvas.height, 
+        x2: 22/50*canvas.width,  // 波动范围左上角的点坐标
+        y2: 10/50*canvas.height,
+      }
+
       for (var i = 0; i < 40; i++) {
         let energy = (dataArray[step * i] / 256.0) * 80;
-        for (var j = 0; j < energy; j++) {
-          ctx.beginPath();
-          ctx.moveTo(20 * i + 2, 200 + 4 * j);
-          ctx.lineTo(20 * (i + 1) - 2, 200 + 4 * j);
-          ctx.stroke();
-          ctx.beginPath();
-          ctx.moveTo(20 * i + 2, 200 - 4 * j);
-          ctx.lineTo(20 * (i + 1) - 2, 200 - 4 * j);
-          ctx.stroke();
-        }
         ctx.beginPath();
-        ctx.moveTo(20 * i + 2, 200);
-        ctx.lineTo(20 * (i + 1) - 2, 200);
-        ctx.stroke();
+        ctx.fillStyle = this.props.voiceColor;
+        const { x1,y1,x2,y2} = drawArea
+        let width = x1-x2;
+        let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+        let startX =  x2 // 绘制起始点x
+        let startY =  y1 - height  // 绘制起始点y
+        ctx.fillRect(startX, startY, width, height )
       }
 
       //制造半透明投影
       function draw() {
-        ctx.drawImage(outcanvas, 0, 0);
-        ctx.save();
-        ctx.translate(canvas.width / 4, canvas.height / 2);
-        ctx.rotate(Math.PI);
-        ctx.scale(-1, 1);
-        ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
-        ctx.restore();
-        ctx.fillStyle = 'rgba(192,192,192, .0)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(outcanvas, 0, 0);
+          ctx.save();
+          ctx.translate(canvas.width / 2, canvas.height / 2);
+          ctx.rotate(Math.PI);
+          ctx.scale(-1, 1);
+          ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
+          ctx.restore();
+          ctx.fillStyle = 'rgba(192,192,192, .0)';
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
       }
 
       draw();
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
-    }
+      // let canvas = document.getElementById(volumeView);
+      // let ctx = canvas.getContext("2d");
+
+      // let outcanvas = document.createElement("canvas");
+      // outcanvas.width = canvas.width;
+      // outcanvas.height = canvas.height;
+      // ctx.strokeStyle = this.props.voiceColor;
+      // ctx.lineWidth = 2;
+      // ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
+      // let dataArray = new Uint8Array(analyser.frequencyBinCount);
+      // analyser.getByteFrequencyData(dataArray);
+      // let step = Math.round(dataArray.length / 60); //采样步长
+      // for (var i = 0; i < 40; i++) {
+      //   let energy = (dataArray[step * i] / 256.0) * 50;
+      //   for (var j = 0; j < energy; j++) {
+      //     ctx.beginPath();
+      //     ctx.moveTo(20 * i + 2, 200 + 4 * j);
+      //     ctx.lineTo(20 * (i + 1) - 2, 200 + 4 * j);
+      //     ctx.stroke();
+      //     ctx.beginPath();
+      //     ctx.moveTo(20 * i + 2, 200 - 4 * j);
+      //     ctx.lineTo(20 * (i + 1) - 2, 200 - 4 * j);
+      //     ctx.stroke();
+      //   }
+      //   ctx.beginPath();
+      //   ctx.moveTo(20 * i + 2, 200);
+      //   ctx.lineTo(20 * (i + 1) - 2, 200);
+      //   ctx.stroke();
+      // }
 
+      // //制造半透明投影
+      // function draw() {
+      //   ctx.drawImage(outcanvas, 0, 0);
+      //   ctx.save();
+      //   ctx.translate(canvas.width / 4, canvas.height / 2);
+      //   ctx.rotate(Math.PI);
+      //   ctx.scale(-1, 1);
+      //   ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
+      //   ctx.restore();
+      //   ctx.fillStyle = 'rgba(192,192,192, .0)';
+      //   ctx.fillRect(0, 0, canvas.width, canvas.height);
+      // }
+
+      // draw();
+      // requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
+    }
+    // 停止共享
+    this.test_controller.OnDesktopDisplayClosed = () => {
+      if (this.state.isSharedScreen) {
+        this.sharedScreen()
+      }
+    }
   }
   contrastFaceVerify = async data => {
     console.log(data);
@@ -1160,6 +1360,9 @@ class Video extends Component {
     })
     const _dependScripts = [
       // https://counter-web.leimondata.cn:7199
+      this.props.resourcePath + "/beauty/beauty.js",
+      this.props.resourcePath + "/beauty/meeting_beautify_stream.js",
+      this.props.resourcePath + "/beauty/backgroundBlur.js",
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
       this.props.resourcePath + "/pdf.js",
@@ -1285,11 +1488,8 @@ class Video extends Component {
     }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId) {
-      return false
-    } else if (this.state.isSuspend) {
-      return false
-    } else if (!this.state.isCustomer) {
+    if (!this.state.sessionId || this.state.isSuspend || !this.state.isCustomer) {
+      message.success(this.props.prohibitPrompt)
       return false
     } else {
       return true
@@ -1591,6 +1791,8 @@ class Video extends Component {
     }
     console.log(sid)
     this.setState({
+      clickedFacial: false,
+      clickedOcr: false,
       faceCustomerUid: item.customId,
       isModalVisibleFacial: true,
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
@@ -1604,6 +1806,64 @@ class Video extends Component {
       imRoomId: props.imRoomId
     });
   }
+  appGetUsername = async (sid) => {
+    console.log(sid)
+    let userId = ''
+    if(document.getElementById('video1').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
+    }
+    if(document.getElementById('video2').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid
+    }if(document.getElementById('video3').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid
+    }if(document.getElementById('video4').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid
+    }if(document.getElementById('video5').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid
+    }if(document.getElementById('video6').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid
+    }
+    try {
+      let result = await API.appGetUsername({
+        userId: userId
+      });
+      console.log(result)
+      if (result.code == 200) {
+        let data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
+        if(document.getElementById('video1').name == sid){
+
+          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){
+          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){
+          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){
+          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){
+          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){
+          this.setState({
+            videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户6'
+          })
+        }
+      } else {
+        message.success('查询失败')
+      }
+    } catch (err) {
+
+    }
+  }
   queryStaff = async () => {
     try {
       let result = await API.getUsername({
@@ -1695,6 +1955,20 @@ class Video extends Component {
       })
     }
   }
+  facialHandleVisibleChange=(value)=>{
+    if(!value) {
+      this.setState({
+        clickedFacial: false
+      })
+    }
+  }
+  ocrHandleVisibleChange=(value)=>{
+    if(!value) {
+      this.setState({
+        clickedOcr: false
+      })
+    }
+  }
   render() {
     var pdfChildren
     if (this.props.children) {
@@ -1733,7 +2007,7 @@ class Video extends Component {
               <div
                 className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
                 // className="itemed item1"
-                style={{ position: "relative",'margin-right': '5px',  }}
+                style={{ position: "relative",'margin-right': '5px'}}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
               >
                 {
@@ -1745,6 +2019,7 @@ class Video extends Component {
                 }
                 <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
                   <video
+                  style={{display: (this.state.isBigVideo == 'video1' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                     id="video1"
                     autoPlay
                     muted={true}
@@ -1752,7 +2027,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div>
+                  <div style={{ display: (this.state.videoOneName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video1' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoOneName}</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
@@ -1783,22 +2058,22 @@ class Video extends Component {
                   </span>
                 } */}
                   <video
-                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? '' : 'none', }}
+                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? ((this.state.isBigVideo == 'publish_video1' && this.state.isSelect == 'noVideo') ? 'none' : '') : 'none', }}
                     id="publish_video1"
                     className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
                     onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
                     autoPlay
                     muted={true}
                   />
-                  <audio id="audio1" autoPlay />
+                  {/* <audio id="publish_audio1" autoPlay /> */}
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='tellerTitle'>坐席</div>
+                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}} className={`tellerTitle ${this.state.isBigVideo == 'publish_video1' ? 'titleBig' : "titleSamlle"}`}>坐席</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px',  }} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
-                  <video
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px'}} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+                  <video style={{display: (this.state.isBigVideo == 'video2' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                     id="video2"
                     autoPlay
                     muted={true}
@@ -1806,13 +2081,14 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  {/* <div className='customerTitle'>客户</div> */}
+                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video2' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoTwoName}</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
-              style={{'margin-top': '5px',  }}
+              style={{'margin-top': '5px' }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
                 <video
+                style={{ display: (this.state.isBigVideo == 'video3' && this.state.isSelect == 'noVideo') ? 'none' : '' }}
                   id="video3"
                   autoPlay
                   muted={true}
@@ -1820,13 +2096,14 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video3' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoThreeName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
-              style={{'margin-right': '5px',  }}
+              style={{'margin-right': '5px'}}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
                 <video
+                style={{display: (this.state.isBigVideo == 'video4' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                   id="video4"
                   autoPlay
                   muted={true}
@@ -1834,13 +2111,14 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video4' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoFourName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
-              style={{'margin-top': '5px',  }}
+              style={{'margin-top': '5px'  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
                 <video
+                style={{display: (this.state.isBigVideo == 'video5' && this.state.isSelect == 'noVideo') ? 'none' : '' }}
                   id="video5"
                   autoPlay
                   muted={true}
@@ -1848,11 +2126,12 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video5' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoFiveName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px',  }} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
+              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px'}} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
                 <video
+                style={{display: (this.state.isBigVideo == 'video6' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                   id="video6"
                   autoPlay
                   muted={true} 
@@ -1860,12 +2139,12 @@ class Video extends Component {
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video6' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoSixName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
             </div>
-
+            <img id="icon_huatong" style={{display:'none'}} src={require("../../assets/img/icon_huatong.png").default}></img>
           </div>
           <Foot
             img={this.state.voiceImg}
@@ -1873,7 +2152,12 @@ class Video extends Component {
             suspendName={this.state.suspendName}
             cameraImg={this.state.cameraImg}
             customerList={this.state.customerList}
+            clickedOcr={this.state.clickedOcr}
+            clickedFacial={this.state.clickedFacial}
+            {...this.props}
             suspend={this.suspend}
+            facialHandleVisibleChange={this.facialHandleVisibleChange}
+            ocrHandleVisibleChange={this.ocrHandleVisibleChange}
             voice={this.voice}
             cameraClick={this.cameraClick}
             sharedScreen={this.sharedScreen}
@@ -1951,5 +2235,13 @@ Video.defaultProps = {
   callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
+  prohibitPrompt: '当前无客户',
+  voiceColor: '#0AE544',
+  titleBackground: 'rgba(219, 0, 17, 0.1)',
+  titleColor: '#DB0011',
+  microphoneSize: '50',
+  fontSize: '14',
+  fontFamily: 'auto',
+  defaultData: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP']
 }
 export default Video