react_hsbc_teller 0.3.7 → 0.3.8

package/packages/pages/video/video.jsx

@@ -21,6 +21,7 @@ import 'antd/lib/spin/style'
 import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl } from 'react-intl';
+import html2canvas from 'html2canvas';
 const LEAVE_TYPE = {
   TELLER_EXIT: '1', // 坐席退出
   ROOM_DESTROYED: '-1', // 房间异常
@@ -70,7 +71,13 @@ class Video extends Component {
     imRoomId: this.props.imRoomId,
     isPictureInPicture: false,
     clickedFacial: false,
-    clickedOcr: false
+    clickedOcr: false,
+    videoOneName: '',
+    videoTwoName: '',
+    videoThreeName: '',
+    videoFourName: '',
+    videoFiveName: '',
+    videoSixName: ''
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -334,7 +341,7 @@ class Video extends Component {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid,
-        name: '客户1',
+        name: this.state.videoOneName,
       })
     }
     if (document.getElementById('video2').name) {
@@ -343,7 +350,7 @@ class Video extends Component {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid,
-        name: '客户2'
+        name: this.state.videoTwoName
       })
     }
     if (document.getElementById('video3').name) {
@@ -352,7 +359,7 @@ class Video extends Component {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid,
-        name: '客户3'
+        name: this.state.videoThreeName
       })
     }
     if (document.getElementById('video4').name) {
@@ -361,7 +368,7 @@ class Video extends Component {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid,
-        name: '客户4'
+        name: this.state.videoFourName
       })
     }
     if (document.getElementById('video5').name) {
@@ -370,7 +377,7 @@ class Video extends Component {
       list.push({
         feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).feedId,
         customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid,
-        name: '客户5'
+        name: this.state.videoFiveName
       })
     }
     if (document.getElementById('video6').name) {
@@ -379,7 +386,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) {
@@ -462,32 +469,56 @@ class Video extends Component {
       } else {
         const list = []
       if(document.getElementById('video1').name) {
-        list.push('video1')
+        list.push({
+          name: 'video1',
+          title: this.state.videoOneName
+        })
       }
       if(document.getElementById('publish_video1').name) {
-        list.push('publish_video1')
+        list.push({
+          name: 'publish_video1',
+          title: '坐席'
+        })
       }
       if(document.getElementById('video2').name) {
-        list.push('video2')
+        list.push({
+          name: 'video2',
+          title: this.state.videoTwoName
+        })
       }
       if(document.getElementById('video3').name) {
-        list.push('video3')
+        list.push({
+          name: 'video3',
+          title: this.state.videoThreeName
+        })
       }
       if(document.getElementById('video4').name) {
-        list.push('video4')
+        list.push({
+          name: 'video4',
+          title: this.state.videoFourName
+        })
       }
       if(document.getElementById('video5').name) {
-        list.push('video5')
+        list.push({
+          name: 'video5',
+          title: this.state.videoFiveName
+        })
       }
       if(document.getElementById('video6').name) {
-        list.push('video6')
+        list.push({
+          name: 'video6',
+          title: this.state.videoSixName
+        })
       }
       if(document.getElementById('video10').name) {
-        list.push('video10')
+        list.push({
+          name: 'video10',
+          title: '互动白板'
+        })
       }
       console.log(list)
-      const width = 320 * list.length;
-      const height = 480;
+      const width = 640;
+      const height = 360  * list.length;
       const canvas = document.createElement('canvas');
       const cobj = canvas.getContext('2d'); // 获取绘图环境
       canvas.width = width;
@@ -496,18 +527,65 @@ class Video extends Component {
         cobj.clearRect(0, 0, width, height);
         for(let i=0;i<list.length;i++){
           
-        let videoId = list[i];
+        let videoId = list[i].name;
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
         let videoHeight = videoDiv.videoHeight;
-        let newVideoWidth = 320;
-        let newVideoHeight = 480;
-        if (videoHeight * 320 / videoWidth > 480) {
-          newVideoWidth = videoWidth * 480 / videoHeight;
+        let newVideoWidth = 640;
+        let newVideoHeight = 360;
+        if (videoHeight * 640 / videoWidth > 360) {
+          newVideoWidth = videoWidth * 360 / videoHeight;
         } else {
-          newVideoHeight = videoHeight * 320 / videoWidth;
+          newVideoHeight = videoHeight * 640 / videoWidth;
         }
-        cobj.drawImage(videoDiv, 320 * i, (480 - newVideoHeight)/2, 320, newVideoHeight);
+        console.log(newVideoWidth,videoHeight)
+        
+        cobj.drawImage(videoDiv, (640 - newVideoWidth)/2, 360 * i, newVideoWidth, newVideoHeight);
+        var img = document.getElementById("icon_huatong");
+        cobj.drawImage(img, 600, 320, canvas.width, canvas.height);
+        cobj.beginPath();
+        cobj.strokeStyle = this.props.titleColor;
+        cobj.fillStyle = this.props.titleBackground;
+        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60 )
+        cobj.closePath();
+        cobj.fill();
+        cobj.stroke();
+        cobj.font = "28px auto";
+        cobj.textAlign = 'center';
+        cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
+        console.log(videoDiv.srcObject, videoDiv.srcObject.getAudioTracks(), videoDiv.srcObject.getAudioTracks()[0])
+    //     const acc = new AudioContext()
+    //     // 返回一个多媒体流
+    //     const mic = acc.createMediaStreamSource(videoDiv.srcObject.getAudioTracks()[0])
+    //     // creates an AnalyserNode 创建一个分析节点
+    // this.analyser = acc.createAnalyser()
+    // // fftsize默认值2048，是快速傅立叶变换用于频域分析的值，必须为2的幂，而我们得到的数据通常为其的一半，下面会说道
+    // this.analyser.fftSize = 256
+    // // 调用绘图函数
+    // mic.connect(this.analyser)
+    //     let dataArray = new Uint8Array(this.analyser);
+    //     this.analyser.getByteFrequencyData(dataArray);
+    //   let step = Math.round(dataArray.length / 60); //采样步长
+      // 以画布左上角为坐标原点
+      // let drawArea = {
+      //   x1: 28/50 * canvas.width, // 波动范围右下角的点坐标
+      //   y1: 25/50 * canvas.height, 
+      //   x2: 22/50 * canvas.width,  // 波动范围左上角的点坐标
+      //   y2: 10/50 * canvas.height,
+      // }
+
+      // for (var j = 0; j < 40; j++) {
+      //   let energy = (dataArray[step * j] / 256.0) * 80;
+      //   ctx.beginPath();
+      //   ctx.fillStyle = "#0AE544";
+      //   const { x1,y1,x2,y2} = drawArea
+      //   let width = x1-x2;
+      //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+      //   let startX =  x2 // 绘制起始点x
+      //   let startY =  y1 - height  // 绘制起始点y
+      //   cobj.fillRect(startX, startY, width, height )
+      // }
+        // cobj.drawImage(videoDiv, 320 * i, (480 - newVideoHeight)/2, 320, newVideoHeight);
         }
       }, 100);
       const captureStream = canvas.captureStream();
@@ -765,7 +843,7 @@ class Video extends Component {
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
       console.log('订阅媒体流成功', feed, sid);
-      console.log(document.getElementById("feedId1").innerText)
+      this.appGetUsername(sid)
     };
     // 订阅媒体流失败
     this.test_controller.OnSubscribeFailed = (
@@ -796,7 +874,8 @@ class Video extends Component {
       let newArray = [...array];
       newArray.push({
         feedId: feed.feedId,
-        uid: feed.uid
+        uid: feed.uid,
+        tag: feed.tag
       });
       console.log(array, newArray, this.state.roomCustomerList);
       this.setState({
@@ -825,10 +904,52 @@ class Video extends Component {
     // 取消订阅媒体流成功
     this.test_controller.OnUnSubscribeSucc = (sid) => {
       console.log('取消订阅媒体流成功', sid)
+      if(!document.getElementById("video1").name) {
+        this.setState({
+          videoOneName: ''
+        })
+      }
+      if(!document.getElementById("video2").name) {
+        this.setState({
+          videoTwoName: ''
+        })
+      }
+      if(!document.getElementById("video3").name) {
+        this.setState({
+          videoThreeName: ''
+        })
+      }
+      if(!document.getElementById("video4").name) {
+        this.setState({
+          videoFourName: ''
+        })
+      }
+      if(!document.getElementById("video5").name) {
+        this.setState({
+          videoFiveName: ''
+        })
+      }
+      if(!document.getElementById("video6").name) {
+        this.setState({
+          videoSixName: ''
+        })
+      }
     };
     // 推送“取消发布”给与会者
     this.test_controller.OnUnPublish = (feed) => {
       console.log('取消发布者', feed)
+      for(let i=0;i<this.state.roomCustomerList.length;i++) {
+        if(this.state.roomCustomerList[i].uid == feed.uid) {
+          this.state.roomCustomerList.splice(i, 1)
+        }
+      }
+
+      if(this.state.roomCustomerList.length == 0) {
+        this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
+        this.setState({
+          isCustomer: false
+        })
+      }
     };
     // 推送“取消订阅”给与会者 OnUnSubscribe(unsubscriber,feed)
     this.test_controller.OnUnSubscribe = (unsubscriber, feed) => {
@@ -1074,6 +1195,7 @@ class Video extends Component {
       // ctx.fillRect(0, 0, canvas.width, canvas.height, )
       let dataArray = new Uint8Array(analyser.frequencyBinCount);
       analyser.getByteFrequencyData(dataArray);
+      // console.log('wwww', dataArray.length, document.getElementById('publish_video1').srcObject)
       let step = Math.round(dataArray.length / 60); //采样步长
       var img = document.getElementById("icon_huatong");
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
@@ -1684,6 +1806,64 @@ class Video extends Component {
       imRoomId: props.imRoomId
     });
   }
+  appGetUsername = async (sid) => {
+    console.log(sid)
+    let userId = ''
+    if(document.getElementById('video1').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
+    }
+    if(document.getElementById('video2').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid
+    }if(document.getElementById('video3').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid
+    }if(document.getElementById('video4').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid
+    }if(document.getElementById('video5').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid
+    }if(document.getElementById('video6').name == sid){
+      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid
+    }
+    try {
+      let result = await API.appGetUsername({
+        userId: userId
+      });
+      console.log(result)
+      if (result.code == 200) {
+        let data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
+        if(document.getElementById('video1').name == sid){
+
+          this.setState({
+            videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
+          })
+        }
+        if(document.getElementById('video2').name == sid){
+          this.setState({
+            videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data? data : '客户2'
+          })
+        }if(document.getElementById('video3').name == sid){
+          this.setState({
+            videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data : '客户3'
+          })
+        }if(document.getElementById('video4').name == sid){
+          this.setState({
+            videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data : '客户4'
+          })
+        }if(document.getElementById('video5').name == sid){
+          this.setState({
+            videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data? data : '客户5'
+          })
+        }if(document.getElementById('video6').name == sid){
+          this.setState({
+            videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户6'
+          })
+        }
+      } else {
+        message.success('查询失败')
+      }
+    } catch (err) {
+
+    }
+  }
   queryStaff = async () => {
     try {
       let result = await API.getUsername({
@@ -1827,7 +2007,7 @@ class Video extends Component {
               <div
                 className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
                 // className="itemed item1"
-                style={{ position: "relative",'margin-right': '5px',  }}
+                style={{ position: "relative",'margin-right': '5px'}}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
               >
                 {
@@ -1839,6 +2019,7 @@ class Video extends Component {
                 }
                 <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
                   <video
+                  style={{display: (this.state.isBigVideo == 'video1' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                     id="video1"
                     autoPlay
                     muted={true}
@@ -1846,7 +2027,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video1' ? 'titleBig' : "titleSamlle"}`}>客户</div>
+                  <div style={{ display: (this.state.videoOneName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video1' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoOneName}</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
@@ -1877,22 +2058,22 @@ class Video extends Component {
                   </span>
                 } */}
                   <video
-                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? '' : 'none', }}
+                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? ((this.state.isBigVideo == 'publish_video1' && this.state.isSelect == 'noVideo') ? 'none' : '') : 'none', }}
                     id="publish_video1"
                     className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
                     onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
                     autoPlay
                     muted={true}
                   />
-                  <audio id="audio1" autoPlay />
+                  {/* <audio id="publish_audio1" autoPlay /> */}
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}} className={`tellerTitle ${this.state.isBigVideo == 'publish_video1' ? 'titleBig' : "titleSamlle"}`}>坐席</div>
+                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}} className={`tellerTitle ${this.state.isBigVideo == 'publish_video1' ? 'titleBig' : "titleSamlle"}`}>坐席</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px',  }} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
-                  <video
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px'}} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+                  <video style={{display: (this.state.isBigVideo == 'video2' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                     id="video2"
                     autoPlay
                     muted={true}
@@ -1900,13 +2081,14 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  {/* <div className='customerTitle'>客户</div> */}
+                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video2' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoTwoName}</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
-              style={{'margin-top': '5px',  }}
+              style={{'margin-top': '5px' }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
                 <video
+                style={{ display: (this.state.isBigVideo == 'video3' && this.state.isSelect == 'noVideo') ? 'none' : '' }}
                   id="video3"
                   autoPlay
                   muted={true}
@@ -1914,13 +2096,14 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video3' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoThreeName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
-              style={{'margin-right': '5px',  }}
+              style={{'margin-right': '5px'}}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
                 <video
+                style={{display: (this.state.isBigVideo == 'video4' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                   id="video4"
                   autoPlay
                   muted={true}
@@ -1928,13 +2111,14 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video4' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoFourName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
-              style={{'margin-top': '5px',  }}
+              style={{'margin-top': '5px'  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
                 <video
+                style={{display: (this.state.isBigVideo == 'video5' && this.state.isSelect == 'noVideo') ? 'none' : '' }}
                   id="video5"
                   autoPlay
                   muted={true}
@@ -1942,11 +2126,12 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video5' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoFiveName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px',  }} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
+              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px'}} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
                 <video
+                style={{display: (this.state.isBigVideo == 'video6' && this.state.isSelect == 'noVideo') ? 'none' : ''  }}
                   id="video6"
                   autoPlay
                   muted={true} 
@@ -1954,7 +2139,7 @@ class Video extends Component {
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
-                {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
+                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video6' ? 'titleBig' : "titleSamlle"}`}>{this.state.videoSixName}</div>
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
@@ -1969,6 +2154,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}
@@ -2055,6 +2241,7 @@ Video.defaultProps = {
   titleColor: '#DB0011',
   microphoneSize: '50',
   fontSize: '14',
-  fontFamily: 'auto'
+  fontFamily: 'auto',
+  defaultData: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP']
 }
 export default Video

package/packages/pages/video/video.less

@@ -62,7 +62,7 @@
 }
 .isBack {
   transform: rotateY(180deg);
-  background: #333;
+  // background: #333;
 }
 .video1{
   width: 100%;