react_hsbc_teller 0.3.5 → 0.3.9

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: '人脸识别',
@@ -70,7 +70,15 @@ class Video extends Component {
     imRoomId: this.props.imRoomId,
     isPictureInPicture: false,
     clickedFacial: false,
-    clickedOcr: false
+    clickedOcr: false,
+    videoOneName: '',
+    videoTwoName: '',
+    videoThreeName: '',
+    videoFourName: '',
+    videoFiveName: '',
+    videoSixName: '',
+    tabTitles: [
+    ]
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -145,8 +153,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 +163,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 = '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]
-    // config_param.transport_ = 'relay'
     config_param.initPublish = [
       {
         publish_video_id: 'publish_video1',
@@ -334,7 +339,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 +348,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 +357,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 +366,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 +375,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 +384,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) {
@@ -428,7 +433,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') {
@@ -462,52 +467,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 +671,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 +730,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 +738,6 @@ class Video extends Component {
             }else {
               this.test_controller.UnPublish(document.getElementById('video10').name)
               this.setState({
-                isPDF: false,
-                isSelect: 'video',
                 isWhiteboard: false,
               })
             }
@@ -765,7 +905,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,6 +922,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
@@ -795,12 +936,92 @@ 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 {
+          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
+        this.test_controller.Subscribe(config_param)
+      }
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -819,15 +1040,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) => {
@@ -1059,52 +1338,42 @@ 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");
-      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); //采样步长
+      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();
-      }
-
-      //制造半透明投影
-      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.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 )
       }
-
-      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);
@@ -1179,6 +1448,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",
@@ -1246,12 +1518,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()
     }
   }
@@ -1279,6 +1545,7 @@ class Video extends Component {
       }, function (code, message, data) {
         console.log(data)
       })
+      
     } else if (this.state.voiceStatue) {
       // 打开本地
       this.setState({
@@ -1373,22 +1640,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()
         }
@@ -1409,20 +1671,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()
         }
@@ -1622,6 +1882,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({
@@ -1667,10 +1985,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
@@ -1697,21 +2017,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) {
@@ -1728,25 +2051,46 @@ class Video extends Component {
     }
   }
   render() {
+    const {theme} = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
     }
+    const customerNameList = (
+      <span>
+        {
+          theme.customers.map((item,index)=>{
+            return <label>
+              {item}
+              {
+                theme.customers.length > 0 && index != theme.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>
+    )
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
-          <div className="health">
+          {tabTitleList}
+          <div className="health" style={{'margin-top': (this.state.tabTitles.length > 0) ? '0px' : '20px' }}>
             <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' } : {}}>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
+                <div className="videoDiv">
                   <video
                     id="video10"
                     autoPlay
@@ -1755,18 +2099,86 @@ 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>{theme.title}</label>
+                    </li>
+                    <li>
+                      <span>支持人：</span>
+                      <label>{theme.host}</label>
+                    </li>
+                    <li>
+                      <span>参会客户：</span>
+                      {customerNameList}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              }
+              
+
             </div>
-            <div className="wrapper">
+            <div className="wrapper" style={{ width: (this.state.isCustomer) ? '20%' : '100%', }}>
+              <div
+                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'isBack' : (this.state.isCustomer ? 'isBack' : ''))} ${this.state.isCustomer ? '' : 'video1Div'}`}
+              >
+                <div className="publishVideoDiv">
+                  
+                  <video
+                    id="publish_video1"
+                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
+                    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/icon_MuteOne.png").default}
+                      className="imgClass voiceClass"
+                    />
+                  }
+                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none'}} 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.isCustomer && !this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                </div>
+
+              </div>
+              <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div
                 className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
                 // className="itemed item1"
-                style={{ position: "relative",'margin-right': '5px',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
+                style={{ position: "relative"}}
               >
                 {
                   this.state.customAudioed && <img
@@ -1784,52 +2196,17 @@ 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 }} className='customerTitle'>客户</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.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
-                      alt=""
-                      src={require("../../assets/img/zanTing.png").default}
-                      className="imgClass"
-                    />
-                  }
-                  {/* {
-                  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}} className='tellerTitle'>坐席</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')}>
+              <div className={`itemed`}>
                   <video
                     id="video2"
                     autoPlay
@@ -1838,12 +2215,15 @@ 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'}} 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.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',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
+              <div className={`itemed`}
+              style={{'margin-top': '5px' }}>
                 <video
                   id="video3"
                   autoPlay
@@ -1852,12 +2232,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 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.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',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
+              <div className={`itemed`}>
                 <video
                   id="video4"
                   autoPlay
@@ -1866,12 +2248,15 @@ 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 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.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',  }}
-                onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
+              <div className={`itemed`}
+              style={{'margin-top': '5px'  }}>
                 <video
                   id="video5"
                   autoPlay
@@ -1880,10 +2265,14 @@ 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 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.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 className={`"itemed"`}>
                 <video
                   id="video6"
                   autoPlay
@@ -1892,12 +2281,17 @@ 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 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.isCustomer) ? '' : '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>
           <Foot
             img={this.state.voiceImg}
@@ -1907,6 +2301,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}
@@ -1988,8 +2383,17 @@ Video.defaultProps = {
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   prohibitPrompt: '当前无客户',
-  voiceColor: '#db0011',
-  titleBackground: 'rgba(219, 0, 17, 0.1)',
-  titleColor: '#DB0011'
+  voiceColor: '#0AE544',
+  titleBackground: 'rgba(0,0,0,0.65)',
+  titleColor: '#fff',
+  microphoneSize: '50',
+  fontSize: '14',
+  fontFamily: 'auto',
+  menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  theme: {
+    title: '测试',
+    host: 'wmz',
+    customers: ['王三','张思']
+  }
 }
 export default Video