react_hsbc_teller 0.3.6 → 0.4.0

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', // 房间异常
@@ -31,8 +32,7 @@ class Video extends Component {
   signCanvas = React.createRef();
   state = {
     isWhiteboard: false,
-    isSelect: 'video',
-    isPDF: false,
+    isSelect: '',
     loading: false,
     isModalVisibleSign: false,
     titleModal: '人脸识别',
@@ -52,7 +52,6 @@ class Video extends Component {
     cameraImg: cameraImgOpen,
     voiceStatue: false,
     voiceImg: voiceImgOpen,
-    isBigVideo: 'video1',
     isCustomer: false,
     publishDevic: 1,
     isSharedScreen: false,
@@ -70,7 +69,22 @@ class Video extends Component {
     imRoomId: this.props.imRoomId,
     isPictureInPicture: false,
     clickedFacial: false,
-    clickedOcr: false
+    clickedOcr: false,
+    videoOneName: '',
+    videoTwoName: '',
+    videoThreeName: '',
+    videoFourName: '',
+    videoFiveName: '',
+    videoSixName: '',
+    tabTitles: [
+    ],
+    videoList: [],
+    voiceVideoOne: false,
+    voiceVideoTwo: false,
+    voiceVideoThree: false,
+    voiceVideoFour: false,
+    voiceVideoFive: false,
+    voiceVideoSix: false,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -145,8 +159,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;
@@ -155,14 +169,11 @@ class Video extends Component {
   // 初始化视频
   ConnectMRTC = () => {
     const config_param = {};
-    config_param.auto_publish_subscribe = 3;
+    config_param.auto_publish_subscribe = 2;
     config_param.media_type = 1;
     config_param.publish_device = 1;
     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]
-    // config_param.transport_ = 'relay'
     config_param.initPublish = [
       {
         publish_video_id: 'publish_video1',
@@ -334,7 +345,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) {
@@ -343,7 +354,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) {
@@ -352,7 +363,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) {
@@ -361,7 +372,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) {
@@ -370,7 +381,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) {
@@ -379,7 +390,7 @@ 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) {
@@ -421,38 +432,6 @@ class Video extends Component {
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
   };
-  // 放大对应的视频
-  enlargeClick = (val) => {
-    if (val == 'isLangVideo1') {
-      if (document.getElementById('video1').name) {
-        this.setState({ isBigVideo: 'video1' })
-      }
-    } else if (val == 'isLangPublishVideo1') {
-      if (document.getElementById('publish_video1').name && this.state.isCustomer) {
-        this.setState({ isBigVideo: 'publish_video1' })
-      }
-    } else if (val == 'isLangVideo2') {
-      if (document.getElementById('video2').name) {
-        this.setState({ isBigVideo: 'video2' })
-      }
-    } else if (val == 'isLangVideo3') {
-      if (document.getElementById('video3').name) {
-        this.setState({ isBigVideo: 'video3' })
-      }
-    } else if (val == 'isLangVideo4') {
-      if (document.getElementById('video4').name) {
-        this.setState({ isBigVideo: 'video4' })
-      }
-    } else if (val == 'isLangVideo5') {
-      if (document.getElementById('video5').name) {
-        this.setState({ isBigVideo: 'video5' })
-      }
-    } else if (val == 'isLangVideo6') {
-      if (document.getElementById('video6').name) {
-        this.setState({ isBigVideo: 'video6' })
-      }
-    }
-  };
   // 画中画
   pictureInPicture = () => {
     let interval
@@ -462,52 +441,164 @@ 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')
-      }
-      if(document.getElementById('video10').name) {
-        list.push('video10')
+        list.push({
+          name: 'video6',
+          title: this.state.videoSixName
+        })
       }
+      // if(document.getElementById('video10').name) {
+      //   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;
       canvas.height = height;
+      
       interval = setInterval(() => {
         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);
+        
+        cobj.drawImage(videoDiv, (640 - newVideoWidth)/2, 360 * i, newVideoWidth, newVideoHeight);
+        cobj.beginPath();
+        cobj.strokeStyle = this.props.titleColor;
+        cobj.fillStyle = this.props.titleBackground;
+        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60 )
+        cobj.fill();
+        cobj.stroke();
+        cobj.beginPath();
+        cobj.font = "28px auto";
+        cobj.textAlign = 'center';
+        cobj.lineWidth = 1;
+        cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
+        cobj.stroke();
+               //左边框
+               cobj.beginPath();
+               cobj.moveTo( 0, 0);
+               cobj.lineTo( 0, 360 * list.length);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+       
+               //下边框
+               cobj.beginPath();
+               cobj.moveTo( 0, 0);
+               cobj.lineTo( 640, 0);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+       
+               //右边框
+               cobj.beginPath();
+               cobj.moveTo( 640, 360 * list.length);
+               cobj.lineTo( 640, 0);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+       
+       
+               //上边框
+               cobj.beginPath();
+               cobj.moveTo( 0, 360 * list.length);
+               cobj.lineTo( 640, 360 * list.length);
+               cobj.closePath(); //闭合路径
+               cobj.lineWidth = 5; //线的边框为10像素
+               cobj.strokeStyle = '#d9363e';
+               cobj.stroke(); //绘制定义的图形
+        
+        // let sid = document.getElementById(list[i].name).name
+        // let stream = this.test_controller.GetMediaInfo(sid).audio_
+        // let acc = new AudioContext()
+        // let mic = acc.createMediaStreamSource(stream)
+        // let analyser = acc.createAnalyser()
+        // analyser.fftSize = 256
+        // mic.connect(analyser)
+        // aou(analyser)
+        // let microphoneSize = this.props.microphoneSize
+        // var img = document.getElementById("icon_huatong");
+        // cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+        // function aou(analyser){
+        //   let dataArray = new Uint8Array(analyser.frequencyBinCount);
+        //   analyser.getByteFrequencyData(dataArray);
+        // let step = Math.round(dataArray.length / 60); //采样步长
+        // // 以画布左上角为坐标原点
+        // let drawArea = {
+        //   x1: 28/50 * microphoneSize + 600, // 波动范围右下角的点坐标
+        //   y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
+        //   x2: 22/50 * microphoneSize + 600,  // 波动范围左上角的点坐标
+        //   y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
+        // }
+      
+        // for (var j = 0; j < 40; j++) {
+        //   let energy = (dataArray[step * j] / 256.0) * 80;
+        //   cobj.beginPath();
+        //   cobj.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 )
+        // }
+        // requestAnimationFrame(aou.bind(this, analyser));
+      
+        // }
         }
       }, 100);
       const captureStream = canvas.captureStream();
@@ -554,6 +645,30 @@ class Video extends Component {
       })
     }
   }
+  tabTitlesClick = (value,type) =>{
+    const { tabTitles } = this.state;
+    if(type == 'add') {
+      tabTitles.unshift(value)
+    }else {
+      this.state.tabTitles.map((item,index)=>{
+        if(item.value == value) {
+          tabTitles.splice(index, 1)
+          this.setState({
+            tabTitles
+          })
+        }
+      })
+    }
+    if(this.state.tabTitles.length >0) {
+      this.setState({
+        isSelect: this.state.tabTitles[0].value
+      })
+    } else {
+      this.setState({
+        isSelect: 0
+      })
+    }
+  }
   mountClick = () => {
     window.IMEvt = msg => {
       console.log(JSON.parse(msg));
@@ -589,6 +704,7 @@ class Video extends Component {
           if(Mival.type == 1) {
             this.switchExternal()
           } else if(Mival.type == 2) {
+            this.tabTitlesClick('RMWhiteboard','delect')
             if(this.state.isSharedScreen) {
               this.setState({
                 isWhiteboard: false,
@@ -596,8 +712,6 @@ class Video extends Component {
             }else {
               this.test_controller.UnPublish(document.getElementById('video10').name)
               this.setState({
-                isPDF: false,
-                isSelect: 'video',
                 isWhiteboard: false,
               })
             }
@@ -605,6 +719,81 @@ class Video extends Component {
           
         }
         
+      } else if (Mival.typeId == 3100) {
+        if(Mival.data.sessionId == this.state.sessionId) {
+          if(Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoOne: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoOne: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoTwo: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoTwo: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoThree: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoThree: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoFour: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoFour: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoFive: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoFive: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoSix: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoSix: true
+              })
+            }
+            
+          }
+        }
       }
     };
 
@@ -613,7 +802,7 @@ class Video extends Component {
       type: '2',
       sigType: 1
     };
-    this.mpaasSig(data);
+    
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -666,11 +855,13 @@ class Video extends Component {
           obj2.push(b)
         }
       }
-      console.log(obj, obj1)
+      this.mpaasSig(data);
     };
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
+      message.success('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头')
+      this.roomCallBack(2,'获取失败失败')
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -765,7 +956,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 = (
@@ -782,7 +973,7 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
-      this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
+      // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
       this.setState(
         {
           isCustomer: true
@@ -796,12 +987,111 @@ 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({
         roomCustomerList: newArray
       })
+      let config_param
+      if(feed.uid != this.state.tellerAccount) {
+        if(feed.tag == 'VIDEO_SOURCE_SCREEN') {
+          config_param = {
+            subscribe_video_id: 'video11',
+            subscribe_audio_id: 'audio11',
+            subscribe_streamId_id: 'subscribe_streamId11',
+            feedId_id: 'feedId11',
+            feedId: feed.feedId
+          }
+          
+          this.tabTitlesClick(
+            {
+              value: 'customerScreen',
+              name: '客户投屏'
+            },'add'
+          )
+        } else {
+          // let data_param = {
+          //   isVideo: true,
+          //   videoIndex: this.state.videoList.length + 1,
+          //   videoTwoName: ''
+          // }
+          // let videoList = []
+          // console.log(data_param)
+          // videoList.push(data_param)
+          // this.setState({
+          //   videoList
+          // })
+            // config_param = {
+            //   subscribe_video_id: 'video' + this.state.videoList.length,
+            //   subscribe_audio_id: 'audio' + this.state.videoList.length,
+            //   subscribe_streamId_id: 'subscribe_streamId' + this.state.videoList.length,
+            //   feedId_id: 'feedId' + this.state.videoList.length,
+            //   feedId: feed.feedId
+            // }
+          if(!document.getElementById('video1').name) {
+            config_param = {
+              subscribe_video_id: 'video1',
+              subscribe_audio_id: 'audio1',
+              subscribe_streamId_id: 'subscribe_streamId1',
+              feedId_id: 'feedId1',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video2').name) {
+            config_param = {
+              subscribe_video_id: 'video2',
+              subscribe_audio_id: 'audio2',
+              subscribe_streamId_id: 'subscribe_streamId2',
+              feedId_id: 'feedId2',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video3').name) {
+            config_param = {
+              subscribe_video_id: 'video3',
+              subscribe_audio_id: 'audio3',
+              subscribe_streamId_id: 'subscribe_streamId3',
+              feedId_id: 'feedId3',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video4').name) {
+            config_param = {
+              subscribe_video_id: 'video4',
+              subscribe_audio_id: 'audio4',
+              subscribe_streamId_id: 'subscribe_streamId4',
+              feedId_id: 'feedId4',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video5').name) {
+            config_param = {
+              subscribe_video_id: 'video5',
+              subscribe_audio_id: 'audio5',
+              subscribe_streamId_id: 'subscribe_streamId5',
+              feedId_id: 'feedId5',
+              feedId: feed.feedId
+            }
+          }
+          else if(!document.getElementById('video6').name) {
+            config_param = {
+              subscribe_video_id: 'video6',
+              subscribe_audio_id: 'audio6',
+              subscribe_streamId_id: 'subscribe_streamId6',
+              feedId_id: 'feedId6',
+              feedId: feed.feedId
+            }
+          }
+        }
+
+      }
+      if (config_param !== undefined) {
+        config_param.need_volume_analyser = true
+        console.log(config_param)
+        this.test_controller.Subscribe(config_param)
+      }
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -820,15 +1110,73 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         })
+        this.setState({
+          publishDevic: 1,
+          isSharedScreen: false,
+          screenName: '投屏'
+        });
+        this.tabTitlesClick('RMScreen','delect')
+        if(this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
+        }
       }
     };
     // 取消订阅媒体流成功
     this.test_controller.OnUnSubscribeSucc = (sid) => {
       console.log('取消订阅媒体流成功', sid)
+      this.state.tabTitles.map((item) => {
+        if(item.value == 'customerScreen') {
+          if(!document.getElementById("video11").name) {
+            this.tabTitlesClick('customerScreen','delect')
+          }
+        }
+      })
+      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) => {
@@ -1063,15 +1411,7 @@ class Video extends Component {
       canvas.width = this.props.microphoneSize
       canvas.height = this.props.microphoneSize
       let ctx = canvas.getContext("2d");
-
-      let outcanvas = document.createElement("canvas");
-      outcanvas.width = canvas.width;
-      outcanvas.height = canvas.height;
-      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);
       let step = Math.round(dataArray.length / 60); //采样步长
@@ -1096,69 +1436,14 @@ class Video extends Component {
         let startY =  y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height )
       }
-
-      //制造半透明投影
-      function draw() {
-          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);
@@ -1233,6 +1518,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",
@@ -1300,12 +1588,6 @@ class Video extends Component {
         sessionId: this.props.sessionId
       })
     } else {
-      setTimeout(() => {
-        this.setState({
-          screenName: this.props.intl.formatMessage({ id: 'shareScreen' }),
-          suspendName: this.props.intl.formatMessage({ id: 'suspend' }),
-        })
-      }, 50);
       this.addToScript()
     }
   }
@@ -1333,6 +1615,7 @@ class Video extends Component {
       }, function (code, message, data) {
         console.log(data)
       })
+      
     } else if (this.state.voiceStatue) {
       // 打开本地
       this.setState({
@@ -1358,7 +1641,7 @@ class Video extends Component {
     }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId || this.state.isSuspend || !this.state.isCustomer) {
+    if (!this.state.sessionId || this.state.isSuspend) {
       message.success(this.props.prohibitPrompt)
       return false
     } else {
@@ -1427,22 +1710,17 @@ class Video extends Component {
           this.test_controller.ChangeMediaStream(publish_config);
           this.setState({
             isPDF: true,
-            isSelect: 'noVideo',
           })
         } else {
           this.test_controller.UnPublish(document.getElementById('video10').name)
-          this.setState({
-            isPDF: false,
-            isSelect: 'video',
-          })
         }
         this.setState({
           publishDevic: 1,
           isSharedScreen: false,
-          
           screenName: '投屏'
         });
         console.log(pictureInPictureVideo)
+        this.tabTitlesClick('RMScreen','delect')
         if(this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
@@ -1463,20 +1741,18 @@ class Video extends Component {
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
-
-
-        // publish_config.media_type = 1;
-        // publish_config.publish_device = 2;
-        // publish_config.video_profile_type = 5;
-        // publish_config.sid = document.getElementById('publish_video1').name;
-        // this.test_controller.ChangeMediaStream(publish_config);
         this.setState({
           publishDevic: 2,
-          isSelect: 'noVideo',
           isSharedScreen: true,
           screenName: '取消共享',
           isPDF: false
         })
+        this.tabTitlesClick(
+          {
+        value: 'RMScreen',
+        name: '坐席投屏'
+      },'add'
+        )
         if(!this.state.isPictureInPicture) {
           this.pictureInPicture()
         }
@@ -1676,6 +1952,86 @@ class Video extends Component {
       imRoomId: props.imRoomId
     });
   }
+  appGetUsername = async (sid) => {
+    console.log(sid)
+    let userId = ''
+    let index
+    // this.state.videoList.map((item,index)=>{
+    //   let name = 'video' + item.videoIndex
+    //   if(document.getElementById(name).name == sid){
+    //     userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById(("feedId" + item.videoIndex)).innerText).uid
+    //     index = index
+    //   }
+    // })
+    // 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 : '' : ''
+    //     this.state.videoList[index].videoOneName = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById(("feedId" + item.videoIndex)).innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户' + item.videoIndex
+    //   } else {
+    //     message.success('查询失败')
+    //   }
+    // } catch (err) {
+
+    // }
+    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({
@@ -1721,10 +2077,12 @@ class Video extends Component {
     if(!this.state.isWhiteboard) {
       const publish_config = {};
       this.setState({
-        isPDF: true,
         isWhiteboard: true,
-        isSelect: 'noVideo',
       })
+      this.tabTitlesClick({
+        value: 'RMWhiteboard',
+        name: 'RM白板'
+      },'add')
       if (document.getElementById('video10').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 4
@@ -1751,21 +2109,24 @@ class Video extends Component {
     
 
   }
-  switchSelect = () => {
-    if (this.state.isSelect == 'video') {
-      if (document.getElementById('video10').name) {
-        this.setState({
-          isSelect: 'noVideo',
+  switchSelect = (value) => {
+    this.setState({
+          isSelect: value,
         })
-      } else {
-        message.success('当前无签字白板')
-      }
+    // if (this.state.isSelect == 'video') {
+    //   if (document.getElementById('video10').name) {
+    //     this.setState({
+    //       isSelect: 'noVideo',
+    //     })
+    //   } else {
+    //     message.success('当前无签字白板')
+    //   }
 
-    } else {
-      this.setState({
-        isSelect: 'video',
-      })
-    }
+    // } else {
+    //   this.setState({
+    //     isSelect: 'video',
+    //   })
+    // }
   }
   facialHandleVisibleChange=(value)=>{
     if(!value) {
@@ -1782,25 +2143,66 @@ class Video extends Component {
     }
   }
   render() {
+    const {meetingInfo} = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
     }
+    const customerNameList = (
+      <span>
+        {
+          meetingInfo.customers.map((item,index)=>{
+            return <label>
+              {item}
+              {
+                meetingInfo.customers.length > 0 && index != meetingInfo.customers.length-1 &&<span>，</span>
+              }
+              
+            </label>
+          })
+        }
+      </span>
+    )
+    const tabTitleList = (
+      <div className="button">
+        {
+          this.state.tabTitles.map((item)=>{
+            return <div className={`${this.state.isSelect == item.value  ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this,item.value)}>
+              {item.name}
+            </div>
+          })
+        }
+      </div>
+    )
+    // const videoCustomer = 
+    //       this.state.videoList.map((item,index)=>{
+    //         return <div className={`itemed`} style={{ display: (item.isVideo) ? '' : 'none', }}>
+    //         <video
+    //           id={'video' + item.videoIndex}
+    //           autoPlay
+    //           muted={true}
+    //           className="video"
+    //         />
+    //         <audio id={'audio' + item.videoIndex} autoPlay />
+    //         <label style={{ display: 'none' }} id={'feedId' + item.videoIndex} type="text" />
+    //         <div className={`customerTitle titleSamlle`}>
+    //           <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+    //             {this.state.videoTwoName}
+    //           </div>
+    //         </div>
+    //         <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
+    //     </div>
+    //       })
+        
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
-          <div className="health">
-            <div className="projection" style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
-              <div className="button">
-                <div className={`${this.state.isSelect == 'video' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>视频画面</div>
-                <div className={`${this.state.isSelect == 'noVideo' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>投屏白板</div>
-              </div>
-              <div className="videoDiv" style={{ display: (this.state.isSelect == 'noVideo') ? '' : 'none', }}>
-                <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
-                  {pdfChildren}
-                </div>
-                <div className="videoDiv"  style={this.state.isPDF ? { display: 'none' } : {}}>
+          {tabTitleList}
+          <div className="health" style={{'margin-top': (this.state.tabTitles.length > 0) ? '0px' : '20px' }}>
+            <div className="projection">
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
+                <div className="videoDiv">
                   <video
                     id="video10"
                     autoPlay
@@ -1809,18 +2211,88 @@ class Video extends Component {
                   />
                   <audio id="audio10" autoPlay />
                   <label style={{ display: 'none' }} id="feedId10" type="text" />
-                  {/* <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView10" width="70" height="70"></canvas> */}
+                </div>
 
+              </div>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMWhiteboard') ? '' : 'none', }}>
+                <div id="touBoxItem">
+                  {pdfChildren}
+                </div>
+              </div>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'customerScreen') ? '' : 'none', }}>
+                <div className="videoDiv">
+                  <video
+                    id="video11"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                  />
+                  <audio id="audio11" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId11" type="text" />
+                  {/* <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView10" width="70" height="70"></canvas> */}
                 </div>
 
               </div>
+              {
+                this.state.tabTitles.length == 0 &&
+                <div className='themeClass'>
+                <div>
+                  <ul>
+                    <li>
+                      <span>会议主题：</span>
+                      <label>{meetingInfo.title}</label>
+                    </li>
+                    <li>
+                      <span>支持人：</span>
+                      <label>{meetingInfo.host}</label>
+                    </li>
+                    <li>
+                      <span>参会客户：</span>
+                      {customerNameList}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              }
+              
+
             </div>
-            <div className="wrapper">
+            <div className="wrapper" style={{ width:  '20%' , }}>
               <div
-                className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
-                // className="itemed item1"
-                style={{ position: "relative",'margin-right': '5px',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
+                className={`itemed ${this.state.publishDevic == 4 ? '' : 'isBack'} `}
+              >
+                <div className="publishVideoDiv">
+                  
+                  <video
+                    id="publish_video1"
+                    className={`publishVideoClass`}
+                    autoPlay
+                    muted={true}
+                    webkit-playsinline={true}
+                    playsinline={true}
+                  />
+                  <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
+                  {
+                    this.state.voiceStatue && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceClass"
+                    />
+                  }
+                  <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>坐席</div>
+                  </div>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                </div>
+
+              </div>
+              {/* {
+                videoCustomer
+              } */}
+              <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
+              <div
+                className={`itemed`}
+                style={{ position: "relative"}}
               >
                 {
                   this.state.customAudioed && <img
@@ -1838,52 +2310,24 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <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='customerTitle'>客户</div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
-                </div>
-              </div>
-              <div
-                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'item1 isBack' : (this.state.isCustomer ? 'isBack' : 'itemPublic'))}`}
-                onClick={this.enlargeClick.bind(this, 'isLangPublishVideo1')}
-              >
-                <div className="publishVideoDiv">
-                  {
-                    this.state.audioed && <img
-                      alt=""
-                      src={require("../../assets/img/yingpin.png").default}
-                      className="imgClass"
-                    />
-                  }
                   {
-                    this.state.isSuspend && <img
+                    this.state.voiceVideoOne && <img
                       alt=""
-                      src={require("../../assets/img/zanTing.png").default}
-                      className="imgClass"
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  {/* {
-                  this.state.isSharedScreen && <span
-                    className="sharedScreen"
-                  >
-                    屏幕共享中
-                  </span>
-                } */}
-                  <video
-                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? '' : 'none', }}
-                    id="publish_video1"
-                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
-                    onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
-                    autoPlay
-                    muted={true}
-                  />
-                  <audio id="audio1" autoPlay />
-                  <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <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'>坐席</div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
-                </div>
+                  <div style={{ display: (this.state.videoOneName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                      {this.state.videoOneName}
+                    </div>
 
+                    
+                  </div>
+                  <canvas style={{ display: (!this.state.voiceVideoOne) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" 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')}>
+              <div className={`itemed`}>
                   <video
                     id="video2"
                     autoPlay
@@ -1892,12 +2336,22 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  {/* <div className='customerTitle'>客户</div> */}
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                  {
+                    this.state.voiceVideoTwo && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                      {this.state.videoTwoName}
+                    </div>
+                  </div>
+                  <canvas style={{ display: (!this.state.voiceVideoTwo) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
-              style={{'margin-top': '5px',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
+              <div className={`itemed`}
+              style={{'margin-top': '5px' }}>
                 <video
                   id="video3"
                   autoPlay
@@ -1906,12 +2360,21 @@ 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> */}
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+                {
+                    this.state.voiceVideoThree && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <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 titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoThreeName}
+                  </div>
+                </div>
+                <canvas style={{ display: (!this.state.voiceVideoThree) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
-              style={{'margin-right': '5px',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
+              <div className={`itemed`}>
                 <video
                   id="video4"
                   autoPlay
@@ -1920,12 +2383,22 @@ 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> */}
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+                {
+                    this.state.voiceVideoFour && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <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 titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoFourName}
+                  </div>
+                </div>
+                <canvas style={{ display: (!this.state.voiceVideoFour) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
-              style={{'margin-top': '5px',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
+              <div className={`itemed`}
+              style={{'margin-top': '5px'  }}>
                 <video
                   id="video5"
                   autoPlay
@@ -1934,10 +2407,21 @@ 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> */}
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+                {
+                    this.state.voiceVideoFive && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <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 titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoFiveName}
+                  </div>  
+                </div>
+                <canvas style={{ display: (!this.state.voiceVideoFive) ? '' : '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 className={`itemed`}>
                 <video
                   id="video6"
                   autoPlay
@@ -1946,10 +2430,22 @@ 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> */}
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+                {
+                    this.state.voiceVideoSix && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <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 titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoSixName}
+                  </div>
+                </div>
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
+              </div>
             </div>
             <img id="icon_huatong" style={{display:'none'}} src={require("../../assets/img/icon_huatong.png").default}></img>
           </div>
@@ -1961,6 +2457,7 @@ class Video extends Component {
             customerList={this.state.customerList}
             clickedOcr={this.state.clickedOcr}
             clickedFacial={this.state.clickedFacial}
+            {...this.props}
             suspend={this.suspend}
             facialHandleVisibleChange={this.facialHandleVisibleChange}
             ocrHandleVisibleChange={this.ocrHandleVisibleChange}
@@ -2043,10 +2540,16 @@ Video.defaultProps = {
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   prohibitPrompt: '当前无客户',
   voiceColor: '#0AE544',
-  titleBackground: 'rgba(219, 0, 17, 0.1)',
-  titleColor: '#DB0011',
+  titleBackground: 'rgba(0,0,0,0.65)',
+  titleColor: '#fff',
   microphoneSize: '50',
   fontSize: '14',
-  fontFamily: 'auto'
+  fontFamily: 'auto',
+  menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  meetingInfo: {
+    title: '测试',
+    host: 'wmz',
+    customers: ['王三','张思']
+  }
 }
 export default Video