react_hsbc_teller 2.0.6 → 2.0.8

package/packages/pages/video/video.jsx

@@ -4,11 +4,13 @@
 import React, { Component, useState } from 'react';
 import QRCode  from 'qrcode.react';
 import API from '../../api/api';
-import { initWebSocket, joinRoom, disconnect } from '../../common/websocket';
 import { BoardOperate } from '../../common/index.esm.js';
 import './video.less'
+import { compressImage, isLight } from '../../utils/utils'
 import Header from '../header/header.jsx'
 import Foot from '../foot/foot.jsx'
+import IconSuccess from '../../assets/img/icon_success.jpg'
+import IconFail from '../../assets/img/icon_fail.jpg'
 import voiceImgOpen from '../../assets/img/icon_Mute.png'
 import voiceImgCloe from '../../assets/img/icon_MuteOne.png'
 import cameraImgOpen from '../../assets/img/icon_camera.png'
@@ -21,8 +23,9 @@ import recordErrorAudio from '../../assets/mp3/record_error.mp3'
 import internalJoin from '../../assets/mp3/internalJoin.mp3'
 import internalLeft from '../../assets/mp3/internalLeft.mp3'
 import leftMetting from '../../assets/mp3/leftmeeting.mp3'
+import networkWeakAudio from '../../assets/mp3/networkweak.mp3'
+import PIPictureClosedAudio from '../../assets/mp3/pip_close.mp3'
 import errorPng from '../../assets/img/tooltips2_fail.png'
-import { callNimIM } from '../../utils/cell.js'
 import Modal from "antd/lib/modal";
 import 'antd/lib/modal/style'
 import message from "antd/lib/message";
@@ -49,6 +52,8 @@ import SignMy from '../sign/signMy.jsx'
 import Step from '../components/step/step.jsx'
 import axios from 'axios';
 import CryptoJS from "crypto-js";
+
+const SDK_VERISON = '2.0.8'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -56,6 +61,18 @@ const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
 }
+const POINT_TYPE = {
+  tts: '文字转语音',
+  asr: '语音转文字',
+  ffd:	"人脸出框检测",
+  env:	"环境检测",
+  pipd:	"画中画显示、关闭",
+  pwd:	"违禁词检测",
+  wnd:	"弱网",
+  mute:  "静音"
+}
+const RECORD_DEVICE_NAME = 'screen-capture-recorder'
+// const RECORD_DEVICE_NAME = 'Full HD webcam'
 let media_status = 0
 let pictureInPictureVideo
 let mix_stream
@@ -75,6 +92,8 @@ let isSuccuseHs = false
 let isGraffiti = false
 let strokeColor = '#333'
 let clearTime
+let beautyMode = 'none'
+let hsMode = 'none'
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props => props.zIndexNum};
@@ -120,7 +139,7 @@ function clearStreamRemain() {
 };
 async function startBeauty(stream) {
   await beautyInit();
-  beautyStart(stream, "none");
+  beautyStart(stream, beautyMode);
 }
 async function startMix(stream, onState) {
   var drawCanvas = document.getElementById('canvas');
@@ -136,21 +155,25 @@ async function startHs(stream) {
 
   await hsInit();
 
-  hsStart(stream, 'none');
+  hsStart(stream, hsMode);
 
 }
 
 async function stopHs() {
-  var stop_stream = true;//控制是否内部来进行关闭流
-  var stream = hsStop(stop_stream);
-  if (stream != null && stream != undefined) {
-    stream.getTracks().forEach((track) => {
-      track.stop();
-    });
-    stream = null;
+  try {
+    var stop_stream = true;//控制是否内部来进行关闭流
+    var stream = hsStop(stop_stream);
+    if (stream != null && stream != undefined) {
+      stream.getTracks().forEach((track) => {
+        track.stop();
+      });
+      stream = null;
+    }
+    isSuccuseHs = false
+  } catch (err) {
+    console.log('stopHs Error')
+    console.log(err)
   }
-  isSuccuseHs = false
-
 }
 async function mixStopClick() {
   var stop_stream = true;//控制是否内部来进行关闭流
@@ -175,6 +198,7 @@ class Video extends Component {
   }
   cancel = axios.CancelToken.source()
   state = {
+    ablePlayNetweakAudio: true,
     beautyType: false,
     beautyName: '开启美颜',
     signNoClick: false,
@@ -207,6 +231,7 @@ class Video extends Component {
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
+    isPictureConfirmModalVisible:false,
     screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
@@ -251,11 +276,9 @@ class Video extends Component {
     cameraValue: '',
     microphoneValue: '',
     imStatus: false,
-    imJoinRoom: false,
     analyserData: new Map(),
     analyserHeight: new Map(),
     OnVolumeAnalyserMap: new Map(),
-    manualClose: false,
     defaultValue: '1',
     customOcrSid: '',
     shareMaskState: false,
@@ -296,6 +319,8 @@ class Video extends Component {
     cardFailReason: '',
     videoType: '',
     certificateValidityType: true,
+    drawCanvasInterval: null,
+    faceDetectionTimer: null, // 人脸检测定时器
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -303,7 +328,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.6&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller='+ SDK_VERISON +'&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -349,16 +374,9 @@ class Video extends Component {
         this.test_controller.Publish(publish_config)
       })
       // this.publishAllScreen();
-      
-      // eslint-disable-next-line no-undef
-      setTimeout(() => {
-        if (this.state.imStatus && !this.state.imJoinRoom) {
-          joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
-          this.state.imJoinRoom = true
-          this.saveLog('Join im room')
-          console.log('加入IM房间')
-        }
-      })
+      // 单独发布录制屏幕设备的流
+      this.publishRecorderDevice()
+
       this.props.createRoomCallback({
         type: 1,
         errorManage: '',
@@ -468,11 +486,6 @@ class Video extends Component {
   handleEdit = () => {
     console.log(JSON.parse(window.sessionStorage.getItem('sigData')));
     // eslint-disable-next-line no-undef
-    // initWebSocket('wss://im.uat.dsp.hsbcfts.com.cn:443/wealth/im/ws/')
-    if (!this.state.imStatus) {
-      this.state.manualClose = false
-      initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + JSON.parse(window.sessionStorage.getItem('sigData')).webPort + '/ws/');
-    }
     const config_param = {};
     config_param.workspaceId = this.state.workSpaceId;
     config_param.uid = this.props.tellerAccount;
@@ -567,7 +580,7 @@ class Video extends Component {
     }
   }
   // 开启录制
-  enableServerRecording = () => {
+  enableServerRecording = (record_business_id) => {
     const that = this
     this.rateAll().then((res) => {
       console.log('退出房间者', res)
@@ -643,7 +656,7 @@ class Video extends Component {
           height: 175
         },
         {
-          tag: 'RM_ALL_SCREEN',
+          tag: 'sharedScreen', // 一期暂时不需要录制
           xPosition: 960,
           yPosition: 180,
           width: 320,
@@ -684,12 +697,23 @@ class Video extends Component {
       recordParam.endType = 1;
       recordParam.crf = 26
       recordParam.overlaps = [
+        {
+          tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+          type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+          id: 2, // ⽔印 ID
+          enable: true,
+          xPosition: 640, // x 轴位置
+          yPosition: 10, // y 轴位置
+          text: `${this.props.recordMode ==1 ?'远程录制' :'网点录制'} ${this.props.salesBranchCode || ''} ${this.props.financialOffice || ''}`,
+          fontSize: 16, // 字体⼤⼩
+          url: '' // ⽔印图⽚ HTTP 地址
+        },
         {
           tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
           type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
           id: 1, // ⽔印 ID
           enable: true,
-          xPosition: 1000, // x 轴位置
+          xPosition: 1080, // x 轴位置
           yPosition: 10, // y 轴位置
           text: '', // ⽔印⽂字
           fontSize: 16, // 字体⼤⼩
@@ -698,7 +722,7 @@ class Video extends Component {
       ];
       recordParam.tagPositions = list
       console.log('recordParam', recordParam);
-      that.test_controller.StartRemoteRecord(filePath, recordParam, '')
+      that.test_controller.StartRemoteRecord(filePath, recordParam, record_business_id)
 
     })
 
@@ -714,6 +738,15 @@ class Video extends Component {
       })
     }
   };
+  sendMessage = (msg) => {
+    try {
+      console.log('发送消息', JSON.stringify(msg))
+      this.test_controller.SendTextMsg(JSON.stringify(msg))
+    } catch (err) {
+      console.error(`内部错误, msg = ${JSON.stringify(msg)} `)
+      console.error(err)
+    }
+  }
   errorCodeClick=(type,value)=>{
     if(type == 'ocr'){
       if(value == -1007 || value == -100701 || value == -100702 || value == -200001 || value == -300901 || value == -300902 || value == -400001) {
@@ -955,6 +988,100 @@ class Video extends Component {
       this.selectCustomer('facial')
     }
   };
+  generateMediaInfo = (sid) => {
+    let that = this
+    console.log(that.test_controller, sid)
+    console.log(that.test_controller.GetMediaInfo(sid))
+    let originalMediaInfo = that.test_controller.GetMediaInfo(sid);
+    let mediaInfo = {
+      peer_connection_: originalMediaInfo.peer_connection_,
+      local_video_width: originalMediaInfo.local_video_width,
+      local_video_height: originalMediaInfo.local_video_height,
+      local_video_frame: originalMediaInfo.local_video_frame,
+      local_video_bitrate: originalMediaInfo.local_video_bitrate,
+      stream_type: originalMediaInfo.stream_type,
+      stat_interval_: 3,
+      video_send_packets_base_: 0,
+      video_recv_packets_base_: 0,
+      video_send_lost_pack_base_: 0,
+      video_recv_lost_pack_base_: 0,
+      audio_send_packets_base_: 0,
+      audio_recv_packets_base_: 0,
+      audio_send_lost_pack_base_: 0,
+      audio_recv_lost_pack_base_: 0,
+      video_send_qpsum_base: 0,
+      video_send_frame_encoded_base: 0,
+      video_recv_qpsum_base: 0,
+      video_recv_frame_decoded_base: 0,
+      video_send_bitrate_base_: 0,
+      video_recv_bitrate_base_: 0,
+      audio_send_bitrate_base_: 0,
+      audio_recv_bitrate_base_: 0,
+    };
+    return mediaInfo;
+  }
+  detectNetworkWeak = () => {
+    return new Promise((resolve, reject) => {
+      let detectionsNumber = 3
+    let finalResult = true
+    let setTimer = () => {
+      setTimeout(() => {
+        this.test_controller.GetStats(this.mediaInfo).then(media_stat => {
+          if (detectionsNumber>2) {
+            // 不考虑第一次的评估结果，重新计算码率
+            detectionsNumber--;
+            setTimer()
+            return
+          }
+          console.log('media_stat:')
+          console.log(media_stat)
+          // 分辨率、帧率
+          let googAvailableSendBandwidth = (media_stat["VideoBwe"]["googAvailableSendBandwidth"] / 1000).toFixed(2);
+          let googTransmitBitrate = (media_stat["VideoBwe"]["googTransmitBitrate"] / 1000).toFixed(2);
+          let ssrcVideoSendLostRate = media_stat["ssrcVideoSend"]["lostRate"];
+          let ssrcAudioSendLostRate = media_stat["ssrcAudioSend"]["lostRate"];
+          let weak_googAvailableSendBandwidth = 200;
+          let weak_ssrcVideoSendLostRate = 20;
+          let weak_ssrcAudioSendLostRate = 20;
+          let weak_str = "网络正常";
+          if (googAvailableSendBandwidth < weak_googAvailableSendBandwidth) {
+            weak_str = "当前网络不佳";
+          }
+          let bpsSend = (media_stat.ssrcVideoSend["bpsSend"] / 1000).toFixed(2)
+          let fps = media_stat["ssrcVideoSend"].googFrameRateSent
+          let str =
+            "带宽评估:" + (googAvailableSendBandwidth == undefined ? "none" : googAvailableSendBandwidth + "kbps") + "; "
+            + "视频码率:" + bpsSend + "kb" + "; "
+            + "音频码率:" + (media_stat.ssrcAudioSend["bpsSend"] / 1000).toFixed(2) + "kb" + "; "
+            + "视频丢包率:" + (ssrcVideoSendLostRate == undefined ? "none" : ssrcVideoSendLostRate + "%") + "; "
+            + "音频丢包率:" + (ssrcAudioSendLostRate == undefined ? "none" : ssrcAudioSendLostRate + "%") + "; "
+            + weak_str + "; "
+            + "当前编码格式:" + media_stat["ssrcVideoSend"].googCodecName + "; "
+            + "分辨率:" + media_stat["ssrcVideoSend"].resolution + "; "
+            + "帧率:" + media_stat["ssrcVideoSend"].googFrameRateSent;
+            console.log('弱网', str)
+          // document.getElementById("publish_media_stat1").innerText = str;
+          let result =  (bpsSend < 200 ) && googAvailableSendBandwidth < weak_googAvailableSendBandwidth
+          if (result) {
+            console.log('[!]弱网单次评估' + result);
+          } else {
+            finalResult = false
+            console.log('弱网单次评估' + result);
+          }
+          if (detectionsNumber > 0 && finalResult) {
+            detectionsNumber -= 1
+            setTimer();
+          } else {
+            console.log('弱网综合检测结果：' + finalResult)
+            resolve(finalResult)
+          }
+        });
+        
+      }, 3000) 
+    } 
+    setTimer()
+    })
+  }
   ocrClick = () => {
     if (this.isFileSuccuse()) {
       this.state.faceCustomerType = 2
@@ -1022,14 +1149,14 @@ class Video extends Component {
       return a.order - b.order;
     })
     for (let i =1;i<=12;i++){
-      if(document.getElementById('video'+i).name){
+      if(sortedlist[i-1].videoName){
         list.push({
-          name: 'video' + i,
-          title: sortedlist[i-1].videoName,
-          mute: sortedlist[i-1].mute,
-          noVideo: sortedlist[i-1].noVideo
-        })
-      }
+            name: 'video' + sortedlist[i-1].idIndex,
+            title: sortedlist[i-1].videoName,
+            mute: sortedlist[i-1].mute,
+            noVideo: sortedlist[i-1].noVideo
+          })
+        }
     }
     console.log(list)
     this.state.listVideoPicture = list
@@ -1234,17 +1361,33 @@ class Video extends Component {
 
     pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
       //可获取画中画窗口的一些数据，如宽高等
+      console.log('开启画中画')
       pictureInPictureVideo.style.display = 'block';
       pictureInPictureVideo.play();
       this.state.isPictureInPicture = true
     });
 
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
+      console.log('关闭画中画')
       pictureInPictureVideo.srcObject = null;
       pictureInPictureVideo.style.display = "none";
       this.state.listVideoPicture = []
       worker.postMessage(false);
       this.state.isPictureInPicture = false
+      
+      // 画中画循环播放逻辑
+      this.setState({
+        isPictureConfirmModalVisible: true
+      })
+      const loopPlay = () => {
+        console.log('loopPlay status', this.state.isPictureInPicture);
+        if(!this.state.isPictureInPicture && document.getElementById("publish_video1")){
+          let audio = new Audio(PIPictureClosedAudio)
+          audio.play()
+          setTimeout(loopPlay, 3000);
+        }
+      }
+      setTimeout(loopPlay, 0);
     });
 
   }
@@ -1312,9 +1455,8 @@ class Video extends Component {
       })
     }
   }
-  mountClick = () => {
-    window.IMEvt = msg => {
-      console.log(JSON.parse(msg));
+  handleReceiveMsg = (msg) => {
+    console.log(JSON.parse(msg));
       const Mival = JSON.parse(msg);
       if (Mival.typeId == 1210) {
         // 进行初始化操作
@@ -1347,6 +1489,7 @@ class Video extends Component {
           }, ()=>{
             this.pictureInPicture('Refresh')
           })
+          this.messageClick('客户人脸已离框', 'error')
         }
       }
       else if (Mival.typeId == 3003) { // app进入前台
@@ -1363,6 +1506,18 @@ class Video extends Component {
           })
         }
       }
+      else if (Mival.typeId == 5001) { // 客户端离框
+        this.messageClick('客户人脸已离框', 'error')
+        // this.saveVideoPoint('ffd', '客户人脸离框');
+      }
+      else if (Mival.typeId == 5002) { // 客户端
+        this.messageClick('客户背光、曝光过度', 'error')
+        // this.saveVideoPoint('env', '客户端背光、曝光过度');
+      }
+      else if (Mival.typeId == 5003) { // 客户端弱网
+        this.messageClick('客户当前网络较弱', 'error')
+        // this.saveVideoPoint('wnd', '客户端弱网');
+      }
       else if (Mival.typeId == 1220) {
         // 一炒多的图片  1214
         if (Mival.sessionId == this.state.sessionId) {
@@ -1393,6 +1548,9 @@ class Video extends Component {
           if (Mival.type == 1) {
             this.switchExternal()
             this.saveLog('whiteboard start, typeId=1218,')
+            if (typeof this.props.sfpCallback === 'function'){
+              this.props.sfpCallback()
+            }
           } else if (Mival.type == 2) {
             if (streamShare) {
               streamShare.getTracks().forEach(track => track.stop());
@@ -1406,6 +1564,7 @@ class Video extends Component {
             } else {
               if (document.getElementById('video20').name) {
                 this.test_controller.UnPublish(document.getElementById('video20').name)
+                if(this.state.drawCanvasInterval) clearInterval(this.state.drawCanvasInterval)
               }
               this.setState({
                 isWhiteboard: false
@@ -1436,6 +1595,9 @@ class Video extends Component {
                 
               }
           }
+          if (this.state.isPictureInPicture) {
+            this.pictureInPicture('Refresh')
+          }
         }
       } else if (Mival.typeId == 121305) {
         if (Mival.sessionId == this.state.sessionId) {
@@ -1471,33 +1633,25 @@ class Video extends Component {
             });
             let sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name; 
             this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
+            this.sendMessage({
                 'typeId': 1013,
                 'muteStatus': 1,
                 'data': {
                   'sessionId': this.state.sessionId,
                   'userId': this.props.tellerAccount
                 }
-              })
-            }, function (code, message, data) {
-              // console.log(data)
             })
           }
           document.getElementById('audio1').muted = true
           console.log('音频流静音')
           console.log(document.getElementById('audio1').muted)
           setTimeout(() => {
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1223,
-                'state': 1, // app解除静音
-                'sessionId': this.state.sessionId,
-                'userId': Mival.data.userId //this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
-              })
-            });
+            this.sendMessage({
+              'typeId': 1223,
+              'state': 1, // app解除静音
+              'sessionId': this.state.sessionId,
+              'userId': Mival.data.userId //this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+            })
           }, 1000);
         }
       } else if (Mival.typeId == 1401) {
@@ -1511,42 +1665,166 @@ class Video extends Component {
           this.setState({
             videoList: this.state.videoList
           })
+          if (this.state.isPictureInPicture) {
+            this.pictureInPicture('Refresh')
+          }
         }
       } else if (Mival.typeId == 10020) {
-        // 录制服务异常中断，请重试
+        // 录制中断
         this.messageClick('录制服务异常中断，请重试', 'error')
-        let audio = new Audio(recordErrorAudio)
-        audio.play()
-      }
-    };
-    window.IMOpenfire = msg => {
-      console.log('im登录', msg)
-      if (msg.status == 'error') {
-        this.state.imStatus = false
-        this.saveLog('Im connection establishment failed')
-        this.roomCallBack(2, 'im建立连接失败', 5)
-      } else if (msg.status == 'success') {
-        this.state.imStatus = true
-        setTimeout(() => {
-          if (this.state.imRoomId && !this.state.imJoinRoom) {
-            joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
-            this.state.imJoinRoom = true
-            console.log('IMOpenfire 加入im房间')
+        this.saveLog('recording error')
+        this.setState({
+          isRecordingeErrorModalVisible: true,
+          recordId: ''
+        })
+        // 循环播放录制中断语音
+        const loopPlay = () => {
+          if(!this.state.recordId && document.getElementById("publish_video1")){
+            let audio = new Audio(recordErrorAudio)
+            audio.play()
+            setTimeout(loopPlay, 3000);
           }
-        }, 200);
-      } else if (msg.status == 'close') {
-        if (!this.state.manualClose) {
-          this.timer && clearInterval(this.timer);
-          this.state.imStatus = false
-          console.log('IMOpenfireclose')
-          this.saveLog('Repeated login of account')
-          this.roomCallBack(2, '账号重复登录', 9)
+        }
+        setTimeout(loopPlay, 0);
 
+      } else if (Mival.typeId == 33001 && this.state.sessionId == Mival.data.sessionId) {
+        if (Mival.type == 1) {
+          this.saveAuthorize(Mival.data.userId)
+          this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
         }
+        console.log('33001 done')
+      } else if (Mival.typeId == 2210 && this.state.sessionId == Mival.sessionId) {
+        if (Mival.status == 1) { 
+          // 开启了业务录制
+          console.log('业务录制开启')
+          this.state.businessId = Mival.id;
+          this.saveLog('Start business recording')
+          this.enableServerRecording( Mival.id)
+
+          this.startFaceDetection();
+          this.startImageDetection();
+        } else if (Mival.status == 2) {
+          // 关闭了业务录制
+          console.log('业务录制关闭')
+          this.saveLog('Stop business recording')
+          this.test_controller.StopRemoteRecord(this.state.businessRecordId)
+          this.state.businessId = '';
+          clearInterval(this.state.faceDetectionTimer);
+          clearInterval(this.state.imageDetectionTimer);
+        }
+      } else if (Mival.typeId == 2002 && this.state.sessionId == Mival.sessionId) {
+        // 会议到时间
+        console.log('会议超过时间限制')
+        this.endSessionValue();
+      }
+  }
+  startFaceDetection = () => {
+    console.log('startFaceDetection!!!!')
+    clearInterval(this.state.faceDetectionTimer);
+    const timer = setInterval( async () => {
+      const path = this.test_controller.TakePicture(0, 0, 0, document.getElementById("publish_video1").name, 'png')
+      try {
+          let result = await API.faceDetection({
+            activityId: this.props.businessNumber,
+            sessionId: `${this.props.tellerAccount}_${Date.now()}`,
+            // sessionId: this.state.sessionId,
+            roomId: this.state.channelId + '',
+            appId: this.state.appId,
+            recordId: this.state.recordId,
+            base64Image: path.replace('data:image/png;base64,', '')
+          });
+          if (result.faceNum == 0) {
+            // 人脸出框
+            this.messageClick('检测到您的人脸已出框', 'error')
+            // 打点
+            this.saveVideoPoint('ffd', 'RM端人脸离框');
+          }
+        } catch (err) {
+          console.error(err);
+          if (err.status == 502 || err.status == 404) {
+          }
+        }
+    }, 5000);
 
+    this.state.faceDetectionTimer = timer;
+  }
+  startImageDetection = () => {
+    console.log('startImageDetection!!!!')
+    clearInterval(this.state.imageDetectionTimer);
+    const timer = setInterval( async () => {
+      const path = this.test_controller.TakePicture(0, 0, 0, document.getElementById("publish_video1").name, 'png')
+      const img = new Image()
+      img.src = path;
+      img.width = 300 // 
+      img.onload = () => {
+        const origin = cv.imread(img)
+        // let start = new Date().getTime()
+        const res = isLight(origin)
+        if (res==1 || res== -1){
+          // 背景曝光过度
+          this.messageClick('检测到当前背光、曝光过度', 'error')
+          this.saveVideoPoint('env', 'RM端背光、曝光过度');
+        }
+        origin.delete()
+        // let end = new Date().getTime()
+        // console.log('执行时间(s) ', (end - start)/1000 )
       }
+    }, 3000);
 
+    this.state.imageDetectionTimer = timer;
+  }
+  lightDetect() {
+    try {
+      if (document.getElementById("publish_video1").name) {
+        const path = this.test_controller.TakePicture(0, 0, 0, document.getElementById("publish_video1").name, 'png')
+        console.log('检测图像长度',path.length)
+        const img = new Image()
+        img.src = path;
+        img.width = 300 // 
+        img.onload = () => {
+          const origin = cv.imread(img)
+          // let start = new Date().getTime()
+          const res = isLight(origin)
+          if (res==1 || res==-1){
+            // 背景曝光过度
+            this.state.envInfo.lightResult = '不合格'
+          } else {
+            this.state.envInfo.lightResult = '合格'
+          }
+          this.setState({
+            envInfo: this.state.envInfo
+          })
+          origin.delete()
+        }
+      }
+      //  else {
+      //   setTimeout(() => {
+      //     this.lightDetect()
+      //   }, 1000);
+      // }
+    }catch(err){
+      console.error(err)
     }
+  }
+  saveVideoPoint = async (code, content) => {
+    try {
+      let result = await API.saveVideoPoint({
+        title: POINT_TYPE[code],
+        content: [content],
+        code,
+        activityId: this.props.businessNumber,
+        sessionId: this.state.sessionId,
+        roomId: this.state.channelId + '',
+        appId: this.state.appId,
+        recordId: this.state.recordId,
+      });
+    } catch (err) {
+      console.error(err);
+      if (err.status == 502 || err.status == 404) {
+      }
+    }
+  }
+  mountClick = () => {
     let data = {
       account: this.props.tellerAccount,
       type: '2',
@@ -1642,26 +1920,38 @@ class Video extends Component {
         }
       }
       console.log(objList, objList1, objList2)
+      const cameraList = objList.filter(el => !el.actionname.includes(RECORD_DEVICE_NAME))
+      const recorderDevice = objList.find(el => el.actionname.includes(RECORD_DEVICE_NAME))
       this.setState({
-        cameraList: objList,
+        cameraList: cameraList,
+        recorderDevice: recorderDevice,
         microphoneList: objList1,
         speakerList: objList2.length > 0 ? [objList2[0]] : []
       })
       let indexId = 0
-      objList.map((item, index) => {
-        if (item.actionname.indexOf('Integrated Camera') != -1) {
+      let microId = 0
+      // 摄像头设置默认
+      objList.forEach((item, index) => {
+        if (item.actionname.indexOf('HP Full-HD Camera') != -1) {
+          indexId = index
+        } else if (item.actionname.indexOf('Integrated Camera') != -1) {
           indexId = index
         }
       })
-      console.log(indexId)
+      // 麦克风设置默认
+      objList1.forEach((item, index) => {
+        if (item.actionname.indexOf('Microphone Array (Realtek High Definition Audio(SST))') != -1) {
+          microId = index
+        }
+      })
+      console.log(indexId, microId)
       this.setState({
         cameraValue: objList[indexId].actionid,
-        microphoneValue: objList1[0].actionid
+        microphoneValue: objList1[microId].actionid
       })
       if (!this.state.appId && !this.state.sessionType) {
         console.log('cameraValue', this.state.cameraValue)
         this.mpaasSig(data);
-        this.showEnvDetection()
       } else {
         console.log('cameraValue', this.state.cameraValue)
         this.setState({
@@ -1726,6 +2016,10 @@ class Video extends Component {
         this.state.rtoken = rtoken
       this.createRoom()
       this.saveLog('RM mrtc create room successfully, room_id=' + room_id)
+
+      this.state.imStatus = true
+      this.saveLog('Join im room')
+      console.log('加入IM房间')
     };
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
@@ -1776,9 +2070,15 @@ class Video extends Component {
         this.test_controller.Publish(publish_config)
       })
       // this.publishAllScreen();
+      // 单独发布录制屏幕设备的流
+      this.publishRecorderDevice()
       
       this.roomCallBack(1, '', 0)
       this.saveLog('mrtc join room success')
+
+      this.state.imStatus = true
+      this.saveLog('Join im room')
+      console.log('加入IM房间')
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
@@ -1793,12 +2093,9 @@ class Video extends Component {
         this.state.rtoken = '',
         this.state.sessionId = '',
         this.state.imRoomId = ''
-      this.state.imJoinRoom = false
       if (this.state.imStatus) {
         console.log('disconnect断开连接')
-        this.state.manualClose = true
         this.state.imStatus = false
-        disconnect();
       }
       this.test_controller.Disconnect()
       let data = {
@@ -1809,71 +2106,24 @@ class Video extends Component {
       this.mpaasSig(data);
     };
     this.test_controller.OnSendTextMsgSucc = (msgId) => {
-      console.log('发送成功', msgId)
-      this.setState({
-        documentError: '',
-        isModalVisibleCustomer: false,
-      })
-      this.saveLog('mrtc OnSendTextMsgSucc:' + msgId)
+      // console.log('发送成功', msgId)
+      // this.saveLog('mrtc OnSendTextMsgSucc:' + msgId)
     }
     this.test_controller.OnSendTextMsgFailed = (msgId, code, msg) => {
       console.log('发送失败', msgId, code, msg)
-      this.setState({
-        documentError: '推送授权白板失败，请重试'
-      })
+      const Mival = JSON.parse(msg)
+      // 失败处理
+      if (Mival.typeId == '3300') {
+        this.setState({
+          documentError: '推送授权白板失败，请重试'
+        })
+      }
       this.saveLog('mrtc OnSendTextMsgFail:' + msgId +', code=' + code + ',msg=' + msg)
     }
     this.test_controller.OnReceiveTextMsg = (uid, msg) => {
-      console.log('收到手机端消息', uid, msg, JSON.parse(msg).typeId, JSON.parse(msg).data.sessionId, this.state.sessionId)
-      if (JSON.parse(msg).typeId == 33001 && this.state.sessionId == JSON.parse(msg).data.sessionId) {
-        if (JSON.parse(msg).type == 1) {
-          this.saveAuthorize(JSON.parse(msg).data.userId)
-          this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
-        }
-      }
-      // 线下demo静音处理
-      if (JSON.parse(msg).typeId == 4004 && this.state.sessionId == JSON.parse(msg).data.sessionId) {
-        if (this.isFileSuccuse()) {
-          if (!this.state.voiceStatue) {
-            // 静音本地
-            this.setState({
-              voiceStatue: true,
-              voiceImg: voiceImgCloe,
-              voiceName: '解除静音'
-            });
-            let sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name; 
-            this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1013,
-                'muteStatus': 1,
-                'data': {
-                  'sessionId': this.state.sessionId,
-                  'userId': this.props.tellerAccount
-                }
-              })
-            }, function (code, message, data) {
-              // console.log(data)
-            })
-          }
-          document.getElementById('audio1').muted = true
-          console.log('音频流静音')
-          console.log(document.getElementById('audio1').muted)
-          setTimeout(() => {
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1223,
-                'state': 1, // app解除静音
-                'sessionId': this.state.sessionId,
-                'userId': uid //this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
-              })
-            });
-          }, 1000);
-        }
-      }
-      this.saveLog('mrtc OnReceiveTextMsg info:' + msg)
+      console.log('收到手机端消息',uid, msg, JSON.parse(msg))
+      // this.saveLog('mrtc OnReceiveTextMsg info:' + msg)
+      this.handleReceiveMsg(msg)
     }
     this.test_controller.StreamFilterHandler = async (publish_tag, stream, stream_type, publish_device, media_type) => {
       console.log(`stream processed by client, publish_device=${publish_device}, media_type=${media_type}, publish_tag=${publish_tag},stream_type=${stream_type}`);
@@ -1889,12 +2139,13 @@ class Video extends Component {
       if (publish_tag == 'tag1') {
         console.log('tag1', stream)
         let newStream = stream;
-
         if (stream.getVideoTracks()[0]) {
-          await startBeauty(newStream);
-          newStream = beautyCaptureStream();
-          await startHs(newStream);
-          newStream = hsCaptureStream();
+          if (this.state.beautyType || isSuccuseHs){
+            await startBeauty(newStream);
+            newStream = beautyCaptureStream();
+            await startHs(newStream);
+            newStream = hsCaptureStream();
+          }
           // 清理原始流
           newStream.oninactive = function () {
             clearOriginStream(stream);
@@ -1916,9 +2167,26 @@ class Video extends Component {
       }
 
       if (publish_tag == 'projectionWhiteboard' && publish_device == 2) {
-
         let newStream1 = stream;
         if (stream.getVideoTracks()[0]) {
+          try {
+            console.log('共享')
+            console.log(stream.getVideoTracks()[0])
+            if ( stream.getVideoTracks()[0] instanceof BrowserCaptureMediaStreamTrack) {
+              console.log('tab共享')
+              this.saveLog('Share type = tab')
+            } else if (stream.getVideoTracks()[0] instanceof MediaStreamTrack && stream.getVideoTracks()[0].label.includes('screen')) {
+              console.log('屏幕共享')
+              this.saveLog('Share type = screen')
+            } else if (stream.getVideoTracks()[0].label.includes('window')){
+              console.log('窗口共享')
+              this.saveLog('Share type = window')
+            } 
+          } catch (err) {
+            console.log('不支持此浏览器记录投屏类型日志')
+            console.log(navigator.userAgent)
+            console.log(err)
+          }
           if (this.state.operateShow) {
             await startMix(newStream1, 'mix');
 
@@ -1930,6 +2198,7 @@ class Video extends Component {
             canvas.width = this.state.widthVideo
           } else {
             await startMix(newStream1, 'none');
+            isGraffiti = false
           }
 
           newStream1 = mixCaptureStream();
@@ -1950,27 +2219,25 @@ class Video extends Component {
             stream = null;
           }
         }
+        if (stream.getAudioTracks()[0] && newStream1.addTrack) {
+          newStream1.addTrack(stream.getAudioTracks()[0])
+        }
         return newStream1
-      } else {
-        return stream
       }
-
+      return stream
     }
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
       this.state.sessionType = true
       if (sid == document.getElementById('video20').name) {
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 2030,
-            'sessionId': this.state.sessionId,
-            'sharedScreen': 1,
-            'tellerId': this.props.tellerAccount
-          })
-        });
-        if (this.state.screenName == '切换共享') {
+        this.sendMessage({
+          'typeId': 2030,
+          'sessionId': this.state.sessionId,
+          'sharedScreen': 1,
+          'tellerId': this.props.tellerAccount
+        })
+        if (this.state.screenName == '共享屏幕') {
           this.state.isSharedScreen = true
           this.state.isScreenSwitching = false
         }
@@ -1981,29 +2248,31 @@ class Video extends Component {
 
           loading: false,
         });
+        setTimeout(() => {
+          this.showEnvDetection()
+        }, 1500);
+
 
         this.enterRoom()
         this.updateMeetingInfo()
         this.timer = setInterval(
           () => {
             if (!this.state.voiceStatue && this.state.analyserHeight.get(sid).toFixed(2) > 0.1) {
-              callNimIM('sendCustomCmdMsg', {
-                customId: this.state.imRoomId,
-                content: JSON.stringify({
-                  'typeId': 3200,
-                  'decibelValue': this.state.analyserHeight.get(sid).toFixed(2),
-                  "data": {
-                    'sessionId': this.state.sessionId,
-                    'userId': this.props.tellerAccount,
-                    'data': (new Date()).valueOf()
-                  }
-
-                })
-              });
+              this.sendMessage({
+                'typeId': 3200,
+                'decibelValue': this.state.analyserHeight.get(sid).toFixed(2),
+                "data": {
+                  'sessionId': this.state.sessionId,
+                  'userId': this.props.tellerAccount,
+                  'data': (new Date()).valueOf()
+                }
+              })
             }
           },
           1000
         );
+        this.mediaInfo = this.generateMediaInfo(document.getElementById("publish_video1").name);
+
       } else {
         var box = document.getElementById("whiteboardDIV");
         var box1 = document.getElementById("operate")
@@ -2078,6 +2347,10 @@ class Video extends Component {
         participants.map((item, index) => {
           if (item.uid != this.state.tellerAccount) {
             item.publish.map((itemOne, indexOne) => {
+              if (itemOne.tag && itemOne.tag.includes('UnSubscribe_RM')) {
+                console.log('过滤订阅的tag:', itemOne.tag)
+                return
+              }
               let array = this.state.roomCustomerList;
               let newArray = [...array];
               newArray.push({
@@ -2138,6 +2411,7 @@ class Video extends Component {
                 console.log(config_param)
                 console.log('发起订阅')
                 this.test_controller.Subscribe(config_param)
+                document.getElementById(config_param.subscribe_video_id).name = 'temp'
 
               }
             })
@@ -2155,22 +2429,19 @@ class Video extends Component {
     this.test_controller.OnNewPublish = (feed) => {
       console.log('有新发布者', feed);
       console.log(new Date())
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
+      if (feed.tag && feed.tag.includes('UnSubscribe_RM')) {
+        console.log('过滤订阅的tag:', feed.tag)
+        return
+      }
+      this.sendMessage({
           'typeId': 1013,
           'muteStatus': this.state.voiceStatue ? 1 : 0,
           'data': {
             'sessionId': this.state.sessionId,
             'userId': this.props.tellerAccount
           }
-        })
-      }, function (code, message, data) {
-        console.log(data)
       })
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
+      this.sendMessage({
           'typeId': 1014,
           'sessionId': this.state.sessionId,
           'meetingInfo': {
@@ -2179,9 +2450,6 @@ class Video extends Component {
             'customers': this.props.meetingInfo.customers,
             'otherAttendees': this.props.meetingInfo.otherAttendees
           }
-
-        })
-      }, function (code, message, data) {
       })
       this.sendNotification()
       let array = this.state.roomCustomerList;
@@ -2268,14 +2536,11 @@ class Video extends Component {
     this.test_controller.OnUnPublishSucc = (sid) => {
       console.log('取消发布成功', sid, document.getElementById('publish_video1').name)
       if (document.getElementById('publish_video1').name && sid != document.getElementById('publish_video1').name) {
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
+        this.sendMessage({
             'typeId': 2030,
             'sessionId': this.state.sessionId,
             'sharedScreen': 0,
             'tellerId': this.props.tellerAccount
-          })
         })
         this.state.isSharedScreen = false
         this.setState({
@@ -2374,6 +2639,10 @@ class Video extends Component {
       //   let audio = new Audio(src)
       //   audio.play()
       // }
+      if (participant.includes('UnHint')){
+        console.log('过滤掉的uid', participant)
+        return
+      }
       
 
       this.appGetUsernameClick(participant).then((res) => {
@@ -2411,44 +2680,97 @@ class Video extends Component {
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
       if (sid == document.getElementById('publish_video1').name) {
-        this.messageClick('当前网络环境较差', 'error')
-        this.saveLog('mrtc OnNetworkWeak')
+        
+        this.detectNetworkWeak().then((isWeak) => {
+          console.log('弱网结果：' + isWeak)
+          if (isWeak) {
+            this.messageClick('当前网络环境较差', 'error')
+            this.saveLog('mrtc OnNetworkWeak')
+            this.saveVideoPoint('wnd', 'RM端弱网');
+            if (this.props.isWeakSound && this.state.ablePlayNetweakAudio) {
+              this.state.ablePlayNetweakAudio = false;
+              let src = networkWeakAudio
+              let audio = new Audio(src)
+              audio.play()
+              setTimeout(() => {
+                this.state.ablePlayNetweakAudio = true;
+              }, 30000);
+            }
+            if (this.props.OnNetworkWeak) {
+              this.props.OnNetworkWeak(bpsSend, bpsRecv, sid)
+            }
+          }
+        })
+        
       }
     };
     // 开始服务端录制成功
-    this.test_controller.OnStartRemoteRecordSucc = (record_id) => {
-      console.log('开始服务端录制成功', record_id);
-      this.state.recordId = record_id
-      this.videoRecordCallback('1', true)
-      this.saveLog('mrtc OnStartRemoteRecordSucc')
+    this.test_controller.OnStartRemoteRecordSucc = (record_id, record_third_id) => {
+      console.log('开始服务端录制成功', record_id, record_third_id);
+      if (!record_third_id) {
+        // 全局录制
+        this.state.recordId = record_id
+        this.videoRecordCallback('1', true)
+        this.saveLog('mrtc OnStartRemoteRecordSucc')
+      } else {
+        // 业务录制
+        this.state.businessRecordId = record_id
+        this.businessRecordCallback('1', true, record_third_id)
+        this.saveLog('mrtc OnStartRemoteBusinessRecordSucc, businessId=' + record_third_id)
+      }
+      
+      if (this.state.isRecordingeErrorModalVisible) {
+        this.setState({
+          isRecordingeErrorModalVisible: false
+        })
+      }
     };
     // 开始服务端录制失败
     this.test_controller.OnStartRemoteRecordFailed = (
       record_id,
       err_code,
-      err_msg
+      err_msg,
+      record_third_id
     ) => {
-      this.videoRecordCallback('1', false)
-      console.log('开始服务端录制失败', record_id, err_code, err_msg)
-      this.saveLog('mrtc OnStartRemoteRecordFailed, code='+err_code)
+      console.log('开始服务端录制失败', record_id, err_code, err_msg, record_third_id)
+      if (!record_third_id) {
+        this.videoRecordCallback('1', false)
+        this.saveLog('mrtc OnStartRemoteRecordFailed, code='+err_code)
+      } else {
+        this.businessRecordCallback('1', false, record_third_id)
+        this.saveLog('mrtc OnStartRemoteBusinessRecordFailed, code='+err_code + ',businessId=' + record_third_id)
+      }
     };
     // 结束服务端录制成功
-    this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
-      console.log('结束服务端录制成功', recordId);
-      this.videoRecordCallback('2', true)
-      this.saveLog('mrtc OnStopRemoteRecordSucc, recordId='+recordId)
-      // this.endSessionValue()
+    this.test_controller.OnStopRemoteRecordSucc = (recordId, record_third_id) => {
+      console.log('结束服务端录制成功', recordId, record_third_id);
+      if (!record_third_id) {
+        this.videoRecordCallback('2', true)
+        this.saveLog('mrtc OnStopRemoteRecordSucc, recordId='+recordId)
+        this.state.recordId = '';
+      } else {
+        this.businessRecordCallback('2', true, record_third_id)
+        this.saveLog('mrtc OnStopRemoteBusinessRecordSucc, recordId='+recordId + ',businessId=' + record_third_id)
+        this.state.businessRecordId = '';
+      }
       // 获取服务端录制结果
     };
     // 结束服务端录制失败
     this.test_controller.OnStopRemoteRecordFailed = (
       recordId,
       err_code,
-      err_msg
+      err_msg,
+      record_third_id
     ) => {
-      this.videoRecordCallback('2', false)
-      console.log('结束服务端录制失败', recordId, err_code, err_msg)
-      this.saveLog('mrtc OnStopRemoteRecordFailed, err_code='+err_code)
+      console.log('结束服务端录制失败', recordId, err_code, err_msg, record_third_id)
+      if (!record_third_id) {
+        this.videoRecordCallback('2', false)
+        this.saveLog('mrtc OnStopRemoteRecordFailed, err_code='+err_code)
+      } else {
+        this.businessRecordCallback('2', false, record_third_id)
+        this.saveLog('mrtc OnStopRemoteBusinessRecordFailed, err_code='+err_code+',businessId=' + record_third_id)
+      }
+      
     };
     // 开启浏览器录制成功
     this.test_controller.OnClientStartRecordSuccess = (
@@ -2571,6 +2893,23 @@ class Video extends Component {
     ) => {
       console.log('下载失败', clientRecordId, code, msg)
     };
+    // 日志上传成功
+    this.test_controller.OnUploadLogSucc =  (filePath) => {
+      // const filePath = 'https://mpaas.oss-cn-hk-hsbc-d01-a.ali-ops.cloud.cn.hsbc/log/0E6C7637D9A53DF38D4CFC614EC8915C_41B8EEB302057/wmzTeller_681269134338102_1681269140267_1.log?Expires=1681269740&OSSAccessKeyId=Cq0vGDNN7WQeyn8n&Signature=avYEdwRSdblKIY7LhB6FzwpPAD8%3D'
+
+      console.info('OnUploadLogSucc', filePath)
+      this.saveLog('mrtc OnUploadLogSucc, filePath=' + filePath)
+
+      // const exp1 = /.+\.log/g 
+      // const url = filePath.match(exp1)[0]
+      // console.log(url)
+      this.uploadLogCallback(filePath)
+    };
+    this.test_controller.OnUploadLogFail =  (code, err_msg) => {
+      // test_controller.trace(`upload log failed, err_code=${code}, err_msg=${JSON.stringify(err_msg)}`);
+      console.info('OnUploadLogFail', code, err_msg)
+      this.saveLog('mrtc OnUploadLogFail, code=' + code, ',msg=' + err_msg)
+    };
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
@@ -2731,7 +3070,7 @@ class Video extends Component {
     }
     // 停止共享
     this.test_controller.OnDesktopDisplayClosed = () => {
-      console.log('OnDesktopDisplayClosed', this.state.isSharedScreen, this.state.laveRoomSharedScreen)
+      console.log('OnDesktopDisplayClosed', this.state.isSharedScreen, this.state.laveRoomSharedScreen, streamShare)
 
       if (this.state.isScreenSwitching) {
         this.state.isScreenSwitching = false
@@ -2890,12 +3229,54 @@ class Video extends Component {
       // duration: 10
     })
   }
+  // 全局录制
   videoRecordCallback = async (type, status) => {
+    if (status) {
+      // 全局录制且开启成功，通知app
+      this.sendMessage({
+        'typeId': 1030,
+        'type': type,
+        'sessionId': this.state.sessionId,
+        'recordId': this.state.recordId
+      })
+    }
+    try {
+      let result = await API.videoRecordCallback({
+        activityId: this.props.businessNumber,
+        sessionId: this.state.sessionId,
+        roomId: this.state.channelId + '',
+        appId: this.state.appId,
+        recordId: this.state.recordId,
+        type: type,
+        status: status
+      });
+      console.log(result);
+    } catch (err) {
+      console.error(err);
+      if (err.status == 502 || err.status == 404) {
+      }
+    }
+  }
+  // 业务录制回调
+  businessRecordCallback  = async (type, status, businessId) => {
+    if (status) {
+      this.sendMessage({
+        'typeId': 1031,
+        'type': type,
+        'id': businessId,
+        'sessionId': this.state.sessionId,
+        'recordId': this.state.recordId,
+        'businessRecordId': this.state.businessRecordId
+      })
+    }
     try {
       let result = await API.videoRecordCallback({
         activityId: this.props.businessNumber,
         sessionId: this.state.sessionId,
         roomId: this.state.channelId + '',
+        id: businessId,
+        appId: this.state.appId,
+        recordId: this.state.businessRecordId,
         type: type,
         status: status
       });
@@ -2906,6 +3287,21 @@ class Video extends Component {
       }
     }
   }
+  uploadLogCallback = async (url) => {
+    try {
+      let result = await API.uploadLogCallback({
+        activityId: this.props.businessNumber,
+        sessionId: this.state.sessionId,
+        roomId: this.state.channelId + '',
+        tellerAccount: this.props.tellerAccount,
+        fileUrl: url
+      });
+    } catch (err) {
+      // console.error(err);
+      if (err.status == 502 || err.status == 404) {
+      }
+    }
+  }
   // 保存mettingInfo
   updateMeetingInfo = async () => {
     let customers
@@ -2938,9 +3334,7 @@ class Video extends Component {
       });
       console.log(result);
       this.appGetUsername(document.getElementById('publish_video1').name)
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
+      this.sendMessage({
           'typeId': 1014,
           'sessionId': this.state.sessionId,
           'meetingInfo': {
@@ -2949,9 +3343,6 @@ class Video extends Component {
             'customers': this.props.meetingInfo.customers,
             'otherAttendees': this.props.meetingInfo.otherAttendees
           }
-
-        })
-      }, function (code, message, data) {
       })
     } catch (err) {
       console.error(err);
@@ -2978,12 +3369,10 @@ class Video extends Component {
       this.stopASR()
       this.asr_controller.Disconnect()
     }
-    if (this.state.imStatus) {
-      console.log('disconnect断开连接')
-      this.state.manualClose = true
-      disconnect();
-    }
     message.destroy()
+    clearInterval(this.state.drawCanvasInterval)
+    clearInterval(this.state.faceDetectionTimer);
+    clearInterval(this.state.imageDetectionTimer);
   }
   finishSession = () => {
     // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
@@ -3101,42 +3490,50 @@ class Video extends Component {
 
   }
   addToScriptClick = () => {
+    let params =  `?v=${SDK_VERISON}`
     const _dependScripts = [
-      // 'http://121.196.19.70/download/asr_api.js',
-      // 'http://121.196.19.70/download/reconnecting-websocket.min.js',
-      // 'http://121.196.19.70/download/resampler.js',
-      this.props.resourcePath + "/asr_api.js",
-      this.props.resourcePath + "/reconnecting-websocket.min.js",
-      this.props.resourcePath + "/resampler.js",
-      this.props.resourcePath + "/beauty/beauty_frame_pkg.js",
-      this.props.resourcePath + "/adapter.js",
-      this.props.resourcePath + "/getMediaInfo.js",
-      this.props.resourcePath + "/EBML.js",
-      this.props.resourcePath + "/mcu.js",
-      this.props.resourcePath + "/meeting_desk_stream.js",
-      this.props.resourcePath + "/meeting_html_stream.js",
-      this.props.resourcePath + "/meeting_file_stream.js",
-      this.props.resourcePath + "/meeting_im.js",
-      this.props.resourcePath + "/meeting_vod.js",
-      this.props.resourcePath + "/meeting_invite.js",
-      this.props.resourcePath + "/client_record.js",
-      this.props.resourcePath + "/remote_record.js",
-      this.props.resourcePath + "/meeting_camera_stream.js",
-      this.props.resourcePath + "/meeting_api.js",
-
-      this.props.resourcePath + "/eruda.js",
-      this.props.resourcePath + "/iconfont.js",
-      this.props.resourcePath + "/html2canvas.js",
-      this.props.resourcePath + "/dom-to-image.js",
-
-      this.props.resourcePath + "/hs/hs_human_segmentation_wrapper.js",
-      this.props.resourcePath + "/hs/hs_human_segmentation.js",
-      this.props.resourcePath + "/hs/hs_human_segmentation.wasm",
-
-      this.props.resourcePath + "/mix/mix_frame.js",
-      this.props.resourcePath + "/mix/pageBoard.js"
+      // this.props.resourcePath + "/opencv.js" + params,
+      this.props.resourcePath + "/asr_api.js" + params,
+      this.props.resourcePath + "/reconnecting-websocket.min.js" + params,
+      this.props.resourcePath + "/resampler.js" + params,
+      this.props.resourcePath + "/beauty/beauty_frame_pkg.js" + params,
+      this.props.resourcePath + "/adapter.js" + params,
+      this.props.resourcePath + "/getMediaInfo.js" + params,
+      this.props.resourcePath + "/EBML.js" + params,
+      this.props.resourcePath + "/mcu.js" + params,
+      this.props.resourcePath + "/meeting_desk_stream.js" + params,
+      this.props.resourcePath + "/meeting_html_stream.js" + params,
+      this.props.resourcePath + "/meeting_file_stream.js" + params,
+      this.props.resourcePath + "/meeting_im.js" + params,
+      this.props.resourcePath + "/meeting_vod.js" + params,
+      this.props.resourcePath + "/meeting_invite.js" + params,
+      this.props.resourcePath + "/client_record.js" + params,
+      this.props.resourcePath + "/remote_record.js" + params,
+      this.props.resourcePath + "/meeting_camera_stream.js" + params,
+      this.props.resourcePath + "/meeting_api.js" + params,
+
+      this.props.resourcePath + "/eruda.js" + params,
+      this.props.resourcePath + "/iconfont.js" + params,
+      this.props.resourcePath + "/html2canvas.js" + params,
+      this.props.resourcePath + "/dom-to-image.js" + params,
+
+      this.props.resourcePath + "/hs/hs_human_segmentation_wrapper.js" + params,
+      this.props.resourcePath + "/hs/hs_human_segmentation.js" + params,
+      this.props.resourcePath + "/hs/hs_human_segmentation.wasm" + params,
+
+      this.props.resourcePath + "/mix/mix_frame.js" + params,
+      this.props.resourcePath + "/mix/pageBoard.js"  + params,
 
     ]
+    try{
+      if (!cv){
+        _dependScripts.unshift(this.props.resourcePath + "/opencv.js" + params)
+      }
+    } catch(err) {
+      console.log(err)
+      _dependScripts.unshift(this.props.resourcePath + "/opencv.js" + params)
+    }
+    
     const that = this
     let i = 0
     scriptAdd()
@@ -3151,14 +3548,14 @@ class Video extends Component {
           if (document.all) { //如果是IE     
             script.onreadystatechange = () => {
               if (script.readyState == 'loaded' || script.readyState == 'complete') {
-                that.test_controller = new McuController();
+                that.test_controller = new MeetingController();
                 that.asr_controller = new AsrController()
                 that.mountClick()
               }
             }
           } else {
             script.onload = () => {
-              that.test_controller = new McuController();
+              that.test_controller = new MeetingController();
               that.asr_controller = new AsrController()
               that.mountClick()
             }
@@ -3182,7 +3579,17 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.6')
+    console.log('hsbc_teller_sdk', SDK_VERISON)
+    // window.document.startRecord = () => {
+    //   this.enableServerRecording();
+    // }
+    // window.document.stopRecord = (recordId) => {
+    //   this.test_controller.StopRemoteRecord(recordId || this.state.recordId)
+    // }
+    // window.document.detectNetworkWeak = () => {
+    //   console.log('detectNetworkWeak')
+    //   this.test_controller.detectNetworkWeak()        
+    // }
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -3196,6 +3603,18 @@ class Video extends Component {
     }
     this.setState({
       videoList: arr
+    }, () => {
+      // 设置播放回调
+      for(let i=1;i<=12;i++){
+        let dom = document.getElementById('video'+ i)
+        dom.addEventListener("loadedmetadata", (event) => {
+          console.log('video'+ i +' loadedmetadata:' + dom.srcObject.id)
+          this.saveLog('video'+ i +' loadedmetadata, id=' + dom.srcObject.id)
+          // let arrItem = this.state.videoList.find(el => el.idIndex == i) || {}
+          // console.log(arrItem.videoName)
+
+        });
+      }
     })
     if (this.props.sessionId) {
       this.getRoomStatus({
@@ -3221,20 +3640,15 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
+        this.saveVideoPoint('mute', 'RM端静音')
+        this.sendMessage({
             'typeId': 1013,
             'muteStatus': 1,
             'data': {
               'sessionId': this.state.sessionId,
               'userId': this.props.tellerAccount
             }
-          })
-        }, function (code, message, data) {
-          console.log(data)
         })
-
       } else if (this.state.voiceStatue) {
         // 打开本地
         this.setState({
@@ -3248,20 +3662,21 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalAudioEnable(1, parseInt(sid, 10));
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
+        this.saveVideoPoint('mute', 'RM端解除静音')
+        this.sendMessage({
             'typeId': 1013,
             'muteStatus': 0,
             'data': {
               'sessionId': this.state.sessionId,
               'userId': this.props.tellerAccount
             }
-          })
-        }, function (code, message, data) {
-          console.log(data)
         })
       }
+      if (this.state.isPictureInPicture) {
+        setTimeout(() => {
+          this.pictureInPicture('Refresh')
+        }, 0);
+      }
     }
   };
   isFileSuccuse = () => {
@@ -3286,17 +3701,12 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalVideoEnable(0, parseInt(sid, 10));
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
+        this.sendMessage({
             'typeId': 1012,
             'state': 0,
             'sessionId': this.state.sessionId,
             'userId': this.props.tellerAccount
-          })
-        }, function (code, message, data) {
-          console.log(data)
-        })
+      })
       } else if (this.state.audioed) {
         this.state.audioed = false,
           this.setState({
@@ -3308,16 +3718,11 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalVideoEnable(1, parseInt(sid, 10));
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 1012,
-            'state': 1,
-            'sessionId': this.state.sessionId,
-            'userId': this.props.tellerAccount
-          })
-        }, function (code, message, data) {
-          console.log(data)
+        this.sendMessage({
+          'typeId': 1012,
+          'state': 1,
+          'sessionId': this.state.sessionId,
+          'userId': this.props.tellerAccount
         })
       }
     }
@@ -3332,30 +3737,58 @@ class Video extends Component {
           streamShare = ''
         }
         if (this.state.isSharedScreen) {
-          const publish_config = {}
+          this.test_controller.UnPublish(document.getElementById('video20').name)
+          setTimeout(() => {
           publish_config.media_type = 1
           publish_config.publish_device = 2
+          publish_config.need_volume_analyser = true
           publish_config.video_profile_type = 1
-          // publish_config.video_profile_type=100
-          // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+          publish_config.desktopStreamToCanvas = false
           publish_config.enableDesktopAudio = true
           publish_config.degradationType = 2
-          publish_config.desktopStreamToCanvas = false
-          publish_config.sid = document.getElementById('video20').name
-          this.test_controller.ChangeMediaStream(publish_config)
-          this.state.isScreenSwitching = true
+          publish_config.publish_video_id = 'video20'
+          publish_config.publish_streamId_id = 'subscribe_streamId20'
+          publish_config.publish_tag = 'projectionWhiteboard'
+          this.test_controller.Publish(publish_config)
+          }, 300);
+          // const publish_config = {}
+          // publish_config.media_type = 1
+          // publish_config.publish_device = 2
+          // publish_config.video_profile_type = 1
+          // // publish_config.video_profile_type=100
+          // // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+          // publish_config.enableDesktopAudio = true
+          // publish_config.degradationType = 2
+          // publish_config.desktopStreamToCanvas = false
+          // publish_config.sid = document.getElementById('video20').name
+          // this.test_controller.ChangeMediaStream(publish_config)
+          // this.state.isScreenSwitching = true
         } else {
           if (document.getElementById('video20').name) {
-            publish_config.media_type = 1;
-            publish_config.publish_device = 2;
-            publish_config.video_profile_type = 1
-            // publish_config.video_profile_type=100
-            // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
-            publish_config.enableDesktopAudio = true
-            publish_config.desktopStreamToCanvas = false
-            publish_config.degradationType = 2
-            publish_config.sid = document.getElementById('video20').name;
-            this.test_controller.ChangeMediaStream(publish_config);
+            this.test_controller.UnPublish(document.getElementById('video20').name)
+            setTimeout(() => {
+              publish_config.media_type = 1
+              publish_config.publish_device = 2
+              publish_config.need_volume_analyser = true
+              publish_config.video_profile_type = 1
+              publish_config.desktopStreamToCanvas = false
+              publish_config.enableDesktopAudio = true
+              publish_config.degradationType = 2
+              publish_config.publish_video_id = 'video20'
+              publish_config.publish_streamId_id = 'subscribe_streamId20'
+              publish_config.publish_tag = 'projectionWhiteboard'
+              this.test_controller.Publish(publish_config)
+            }, 300);
+            // publish_config.media_type = 1;
+            // publish_config.publish_device = 2;
+            // publish_config.video_profile_type = 1
+            // // publish_config.video_profile_type=100
+            // // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+            // publish_config.enableDesktopAudio = true
+            // publish_config.desktopStreamToCanvas = false
+            // publish_config.degradationType = 2
+            // publish_config.sid = document.getElementById('video20').name;
+            // this.test_controller.ChangeMediaStream(publish_config);
           } else {
             publish_config.media_type = 1
             publish_config.publish_device = 2
@@ -3434,23 +3867,21 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10))
+        this.saveVideoPoint('mute', 'RM端静音')
       } else {
         // 当前是
         this.test_controller.SetLocalAudioEnable(1, parseInt(sid, 10));
+        this.saveVideoPoint('mute', 'RM端解除静音')
         this.setState({
           voiceImg: voiceImgOpen,
           voiceName: '静音'
         })
       }
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1011,
-          'state': 1,
-          'sessionId': this.state.sessionId,
-          'userId': this.props.tellerAccount
-        })
-      }, function (code, message, data) {
+      this.sendMessage({
+        'typeId': 1011,
+        'state': 1,
+        'sessionId': this.state.sessionId,
+        'userId': this.props.tellerAccount
       })
     } else {
       this.setState({
@@ -3459,41 +3890,42 @@ class Video extends Component {
     }
 
   };
+  handleOkPictureConfirm = () => {
+    this.pictureInPictureClick('add')
+    this.setState({isPictureConfirmModalVisible: false})
+  }
+  handleOkRecordConfirm = () => {
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
+    this.saveLog('Start recording')
+    this.enableServerRecording()
+  }
   handleOk = () => {
     // 代表此时按钮是暂停会话，把isSuspend改成true变成恢复会话
-    callNimIM('sendCustomCmdMsg', {
-      customId: this.state.imRoomId,
-      content: JSON.stringify({
-        'typeId': 1012,
-        'state': 1,
-        'sessionId': this.state.sessionId,
-        'userId': this.props.tellerAccount
-      })
-    }, function (code, message, data) {
-      console.log(data)
-    });
+    this.sendMessage({
+      'typeId': 1012,
+      'state': 1,
+      'sessionId': this.state.sessionId,
+      'userId': this.props.tellerAccount
+    })
     this.setState({
       isSuspend: true,
       suspendName: '恢复'
     });
-    callNimIM('sendCustomCmdMsg', {
-      customId: this.state.imRoomId,
-      content: JSON.stringify({
-        'typeId': 1011,
-        'state': 0,
-        'sessionId': this.state.sessionId,
-        'userId': this.props.tellerAccount
-      })
-    }, function (code, message, data) {
-      console.log(data)
-    });
+    this.sendMessage({
+      'typeId': 1011,
+      'state': 0,
+      'sessionId': this.state.sessionId,
+      'userId': this.props.tellerAccount
+    })
     let sid = document.getElementById('publish_video1').name;
     if (!sid) {
       // 纯音频的时候sid在publish_streamId标签中
       sid = document.getElementById('publish_streamId1').name
     }
     this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
-    this.test_controller.SetLocalVideoEnable(0, parseInt(sid, 10));
+    this.saveVideoPoint('mute', 'RM端静音')
     this.setState({
       isModalVisible: false
     })
@@ -3673,6 +4105,9 @@ class Video extends Component {
         //   videoList: this.state.videoList
         // })
         this.videoListSort();
+        if (this.state.isPictureInPicture) {
+          this.pictureInPicture('Refresh')
+        }
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -3697,15 +4132,12 @@ class Video extends Component {
         console.log('ocrCallback', result.data,val)
         // this.messageClick('姓名：' + result.data.idCardName + ',身份证号：' + result.data.idCardNumber,'success')
         // this.messageClick('识别成功','success')
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 1020,
-            'sessionId': this.state.sessionId,
-            'cameraState': 1,
-            "userId": this.state.faceCustomerUid
-          })
-        });
+        this.sendMessage({
+          'typeId': 1020,
+          'sessionId': this.state.sessionId,
+          'cameraState': 1,
+          "userId": this.state.faceCustomerUid
+        })
         if(this.state.documentType == 'ID_CARD') {
           if (result.data.side == 'front' && val == 1) {
             if(this.state.certificateValidity) {
@@ -3865,6 +4297,7 @@ class Video extends Component {
         })
         // this.messageClick('识别失败', 'error')
         this.errorCodeClick('ocr',result.code)
+        this.saveLog('OCR failed, error code=' + result.code)
       }
     } catch (err) {
       this.setState({
@@ -3963,6 +4396,9 @@ class Video extends Component {
         //   videoList: this.state.videoList
         // })
         this.videoListSort();
+        if (this.state.isPictureInPicture) {
+          this.pictureInPicture('Refresh')
+        }
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -3973,15 +4409,12 @@ class Video extends Component {
     }
   };
   handleCancelFacial = () => {
-    callNimIM('sendCustomCmdMsg', {
-      customId: this.state.imRoomId,
-      content: JSON.stringify({
-        'typeId': 1020,
-        'sessionId': this.state.sessionId,
-        'cameraState': 1, // 1--打开前置  2--打开后置
-        "userId": this.state.faceCustomerUid
-      })
-    });
+    this.sendMessage({
+      'typeId': 1020,
+      'sessionId': this.state.sessionId,
+      'cameraState': 1, // 1--打开前置  2--打开后置
+      "userId": this.state.faceCustomerUid
+    })
     this.setState({
       isModalVisibleFacial: false
     })
@@ -4006,15 +4439,12 @@ class Video extends Component {
         }
   }
   newFaceClick=()=>{
-    callNimIM('sendCustomCmdMsg', {
-      customId: this.state.imRoomId,
-      content: JSON.stringify({
-        'typeId': 1020,
-        'sessionId': this.state.sessionId,
-        'cameraState': 2, // 1--打开前置  2--打开后置
-        "userId": this.state.faceCustomerUid
-      })
-    });
+    this.sendMessage({
+      'typeId': 1020,
+      'sessionId': this.state.sessionId,
+      'cameraState': 2, // 1--打开前置  2--打开后置
+      "userId": this.state.faceCustomerUid
+    })
     this.setState({
       clickedFacial: false,
       clickedOcr: false,
@@ -4125,15 +4555,12 @@ class Video extends Component {
     } else {
       if (this.state.faceCustomerType == 2) {
         // ocr
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 1020,
-            'sessionId': this.state.sessionId,
-            'cameraState': 2, // 1--打开前置  2--打开后置
-            "userId": item.customId
-          })
-        });
+        this.sendMessage({
+          'typeId': 1020,
+          'sessionId': this.state.sessionId,
+          'cameraState': 2, // 1--打开前置  2--打开后置
+          "userId": item.customId
+        })
       }
       var sid
       if (item.feedId == document.getElementById("feedId1").innerText) {
@@ -4204,19 +4631,25 @@ class Video extends Component {
     }
   }
   sgsinImage = () => {
-    if (this.state.IDtypeFrontOrBack == IDtypeFront) {
-      this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-        isFaceImage: true,
-        facialImgFront: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-      })
-    } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
-      this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-        isFaceImage: true,
-        facialImgBack: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-      })
-    }
+    const imgBase64 = this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+    // console.log(imgBase64)
+
+    compressImage(imgBase64, (compressedImg)=>{
+      // console.log(compressedImg)
+      if (this.state.IDtypeFrontOrBack == IDtypeFront) {
+        this.setState({
+          facialImg: compressedImg,
+          isFaceImage: true,
+          facialImgFront: compressedImg,
+        })
+      } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
+        this.setState({
+          facialImg: compressedImg,
+          isFaceImage: true,
+          facialImgBack: compressedImg,
+        })
+      }
+    })
 
   }
   handleChangeOcr = (val) => {
@@ -4228,10 +4661,10 @@ class Video extends Component {
     })
   }
   componentWillReceiveProps(props) {
-    this.state.channelId = props.roomId,
-      this.state.rtoken = props.mtoken,
-      this.state.sessionId = props.sessionId,
-      this.state.imRoomId = props.imRoomId
+    this.state.channelId = props.roomId || this.state.channelId
+    this.state.rtoken = props.mtoken || this.state.rtoken
+    this.state.sessionId = props.sessionId || this.state.sessionId
+    this.state.imRoomId = props.imRoomId || this.state.imRoomId
   }
   appGetUsernameClick = async (userId) => {
     let data = ''
@@ -4379,6 +4812,21 @@ class Video extends Component {
       })
     }
   }
+  changePdfRendering = () => {
+    if (this.props.pdfRendering) {
+      // 暂停绘制
+      clearInterval(this.state.drawCanvasInterval)
+    } else {
+      // 继续绘制
+      if (!this.drawFunction) {
+        console.log('未开始远程签署')
+        return
+      }
+      clearInterval(this.state.drawCanvasInterval)
+      this.state.drawCanvasInterval = setInterval(this.drawFunction, 1000 / 20);
+    }
+
+  }
   navigatorClick = () => {
     const that = this
     const publish_config = {};
@@ -4408,8 +4856,10 @@ class Video extends Component {
     canvas.width = 960;
     canvas.height = 540;
 
-
-    videoMedia.addEventListener('play', (event) => {
+    if (this.state.whiteboardPlayEvent) {
+      videoMedia.removeEventListener('play', this.state.whiteboardPlayEvent)
+    }
+    this.state.whiteboardPlayEvent = (event) => {
       var $this = this; //cache
       if ($this.state.operateShow) {
         isGraffiti = false
@@ -4420,20 +4870,21 @@ class Video extends Component {
         canvas.width = this.state.whiteboardWidth
       }
       console.log('addEventListener', !$this.paused, !$this.ended, x, y, width, height)
-      loop()
-      function loop() {
-        if (!$this.paused && !$this.ended) {
-          // if(!that.state.tabTitles.find(el=>el.value == 'customerScreen')) {
-          cobj.drawImage(videoMedia, x, y, width, height, 0, 0, 960, 540);
-          // } else {
-          //   cobj.fillStyle = 'rgb(0 0 0)'
-          //   cobj.fillRect(0,0,960,540)
-          // }
 
-          setTimeout(loop, 1000 / 20); // drawing at 30fps
-        }
+      if (this.state.drawCanvasInterval) clearInterval(this.state.drawCanvasInterval)
+      $this.drawFunction = () => {
+          if (!$this.paused && !$this.ended) {
+            // if(!that.state.tabTitles.find(el=>el.value == 'customerScreen')) {
+            cobj.drawImage(videoMedia, x, y, width, height, 0, 0, 960, 540);
+            // } else {
+            //   cobj.fillStyle = 'rgb(0 0 0)'
+            //   cobj.fillRect(0,0,960,540)
+            // }
+          }
       }
 
+      this.state.drawCanvasInterval = setInterval($this.drawFunction , 1000/ 20);
+
       if (document.getElementById('video20').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 5
@@ -4456,7 +4907,8 @@ class Video extends Component {
         publish_config.publish_tag = 'projectionWhiteboard'
         this.test_controller.Publish(publish_config)
       }
-    }, 0);
+    }
+    videoMedia.addEventListener('play', this.state.whiteboardPlayEvent);
     navigator.mediaDevices.getDisplayMedia({
       video: true,
       preferCurrentTab: true,
@@ -4488,13 +4940,34 @@ class Video extends Component {
             that.test_controller.UnPublish(document.getElementById('video20').name)
           }
         }
+
+        // 关闭当前共享屏幕
+        document.getElementById('video20') && document.getElementById('video20').name ? this.test_controller.UnPublish(document.getElementById('video20').name) : ''
+        that.state.isSharedScreen = false
+        that.state.isScreenSwitching = false
+        that.setState({
+          screenName: '共享模式'
+        });
+        that.tabTitlesClick('RMScreen', 'delect')
+
       }, error => {
         console.log("Unable to acquire screen capture", error);
       });
   }
-  // publishAllScreen = () => {
-    
-  // }
+  publishRecorderDevice = () => {
+    if (this.state.recorderDevice){
+      let publish_config = {}
+      publish_config.media_type = 3
+      publish_config.publish_device = 1
+      publish_config.videoSource = this.state.recorderDevice.actionid
+      publish_config.video_profile_type = 100
+      publish_config.video_profile_diy = { width: 640, height: 360, frameRate: 15, bitrate: 400 }
+      publish_config.publish_video_id = 'publish_video_record_device'
+      publish_config.publish_streamId_id = 'publish_streamId_record_device'
+      publish_config.publish_tag = 'sharedScreen'
+      this.test_controller.Publish(publish_config)
+    }
+  }
   publishAllScreen = () => {
     const that = this
     const publish_config = {};
@@ -4767,6 +5240,7 @@ class Video extends Component {
       jsHeapSizeLimit: '未知', // 上下文内可用堆的最大体积
       totalJSHeapSize: '未知', // 已分配的堆体积
       usedJSHeapSize: '未知', // 当前 JS 堆活跃段（segment）的体积
+      lightResult: this.state.envInfo? this.state.envInfo.lightResult : '未知'
     }
      
     if (navigator) {
@@ -4800,8 +5274,12 @@ class Video extends Component {
           // console.log(`有效网络连接类型: ${effectiveType}`);
           // console.log(`估算的下行速度/带宽: ${downlink}Mb/s`);
           // console.log(`估算的往返时间: ${rtt}ms`);
-          if (!window.navigator.onLine) {envInfo.networkInfo = ''} 
-          else envInfo.networkInfo = `等效网络类型：${effectiveType}；预估下行速度/带宽：${downlink}Mb/s；预估往返延时：${rtt}ms`
+          if (!window.navigator.onLine) {
+            envInfo.networkInfo = ''} 
+          else {
+            envInfo.networkInfo = `等效网络类型：${effectiveType}；预估下行速度/带宽：${downlink}Mb/s；预估往返延时：${rtt}ms`
+            envInfo.networkResult =  downlink > 0.2? '合格': '不合格'
+          } 
         }
         setNetworkInfo()
         navigator.connection.removeEventListener('change', self.envDetection);
@@ -4831,7 +5309,8 @@ class Video extends Component {
       // console.log('当前 JS 堆活跃段（segment）的体积', envInfo.usedJSHeapSize)
       envInfo.memoryResult = '合格'
     }
-    
+    // 背景曝光环境检测
+    this.lightDetect()
 
     this.setState({
       // isModalVisibleEnvironment: true,
@@ -4842,6 +5321,9 @@ class Video extends Component {
     this.setState({
       isModalVisibleEnvironment: false,
     })
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
   }
   // handleCancelEnvDetection = () => {
   //   this.setState({
@@ -4893,16 +5375,39 @@ class Video extends Component {
       this.setState({
         beautyName: '开启美颜'
       })
+      beautyMode = 'none'
       beautySetMode('none')
+      beautyStop()
+      if(!isSuccuseHs) {
+        stopHs()
+      }
     } else {
       this.state.beautyType = true
+      beautyMode = 'beauty'
       beautySetMode('beauty')
       this.setState({
         beautyName: '关闭美颜'
       })
     }
+    this.changeMediaStream();
 
   }
+  changeMediaStream = () => {
+    let publish_config = {}
+      publish_config.sid = document.getElementById('publish_video1').name
+      publish_config.media_type = 1
+      publish_config.publish_device = 1
+      // publish_config.videoSource = this.state.cameraValue
+      // publish_config.audioSource = this.state.microphoneValue
+      publish_config.need_volume_analyser = true
+      publish_config.video_profile_type = 100
+      publish_config.video_profile_diy = { width: 640, height: 360, frameRate: 15, bitrate: 400 }
+      // publish_config.publish_video_id = 'publish_video1'
+      // publish_config.publish_streamId_id = 'publish_streamId1'
+      // publish_config.publish_tag = 'tag1'
+      this.test_controller.ChangeMediaStream(publish_config)
+  }
+
   componentDidMount() {
     var box = document.getElementById("whiteboardDIV");
     var box1 = document.getElementById("operate")
@@ -4920,117 +5425,81 @@ class Video extends Component {
   muteOpposite = (value) => {
     console.log(value);
     if (value == 'video1') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
+      })
     }
     if (value == 'video2') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId2').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId2').innerText).uid
+      })
     } if (value == 'video3') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId3').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId3').innerText).uid
+      })
     } if (value == 'video4') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId4').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId4').innerText).uid
+      })
     } if (value == 'video5') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId5').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId5').innerText).uid
+      })
     } if (value == 'video6') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId6').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId6').innerText).uid
+      })
     } if (value == 'video7') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId7').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId7').innerText).uid
+      })
     } if (value == 'video8') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId8').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId8').innerText).uid
+      })
     } if (value == 'video9') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId9').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId9').innerText).uid
+      })
     }
     if (value == 'video10') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId10').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId10').innerText).uid
+      })
     }
     if (value == 'video11') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId11').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId11').innerText).uid
+      })
     }
     if (value == 'video12') {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1223,
-          'sessionId': this.state.sessionId,
-          'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId12').innerText).uid
-        })
-      });
+      this.sendMessage({
+        'typeId': 1223,
+        'sessionId': this.state.sessionId,
+        'userId': this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId12').innerText).uid
+      })
     }
 
   }
@@ -5039,14 +5508,11 @@ class Video extends Component {
     this.state.shareMaskState = this.props.shareMask
     // 加延迟是因为在关闭的时候可以看到部分rm的操作
     setTimeout(() => {
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
-          'typeId': 1230,
-          'sessionId': this.state.sessionId,
-          'type': this.state.shareMaskState ? 1 : 2
-        })
-      });
+      this.sendMessage({
+        'typeId': 1230,
+        'sessionId': this.state.sessionId,
+        'type': this.state.shareMaskState ? 1 : 2
+      })
     }, 100)
 
   }
@@ -5054,11 +5520,18 @@ class Video extends Component {
     if (!isSuccuseHs) {
 
       hsSetMode('blur')
+      hsMode = 'blur'
       isSuccuseHs = true
     } else {
       hsSetMode('none')
+      hsMode = 'none'
       isSuccuseHs = false
+      stopHs()
+      if(!this.state.beautyType) {
+        beautyStop()
+      }
     }
+    this.changeMediaStream();
   }
   virtualization = () => {
     this.virtualizationClick()
@@ -5085,6 +5558,17 @@ class Video extends Component {
       return false;
     }
   }
+  isHKPassValidTime=(value)=>{
+    if (!value.split('.') || value.split('.').length < 3 || value.split('.').some(el => el == '')) return false;
+    let start = new Date('2020.01.01').valueOf();
+    let end = new Date('2023.12.31').valueOf();
+    var time = new Date(value).valueOf();
+    if(start<=time && end >= time ){
+      return true;
+    }else{
+      return false;
+    }
+  }
   handleChangeCertificateValidity = (event) => {
     // 护照只有起始日期，单独处理
     if (this.state.documentType == 'PASSPORT_CARD' && event.target.value.split('.').length >2) {
@@ -5105,6 +5589,12 @@ class Video extends Component {
           certificateValidity: event.target.value,
           certificateValidityType: true
         });
+      } else if (this.state.documentType == 'HK_MO_PASS_CARD' && this.isHKPassValidTime(event.target.value.split('-')[1])){
+        // 疫情政策对港澳来往通行证放宽限制，有效期限从2020.1.1到2023.12.31都算有效
+        this.setState({ 
+          certificateValidity: event.target.value,
+          certificateValidityType: true
+        });
       } else {
         this.setState({ 
           certificateValidity: event.target.value,
@@ -5119,6 +5609,9 @@ class Video extends Component {
     if (this.props.shareMask != prevProps.shareMask) {
       this.sendNotification()
     }
+    if (this.props.pdfRendering != prevProps.pdfRendering) {
+      this.changePdfRendering()
+    }
   }
   onChangeOCRCustomer = (e) => {
     console.log(e)
@@ -5219,8 +5712,10 @@ class Video extends Component {
 
             }))
           }
-
-
+          this.setState({
+            documentError: '',
+            isModalVisibleCustomer: false,
+          })
         }
       })
       // this.customerFaceClick(this.state.customerList[this.state.customerSelect])
@@ -5669,7 +6164,7 @@ class Video extends Component {
                     <audio id={'audio'+(item.idIndex)} autoPlay />
                     <label style={{ display: 'none' }} id={'feedId'+(item.idIndex)} type="text" />
                     
-                    <div style={{ display: (item.videoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div onClick={this.muteOpposite.bind(this, 'video'+(item.idIndex))} style={{ display: (item.videoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
                     {
                       item.mute && <img
                         alt=""
@@ -5736,6 +6231,23 @@ class Video extends Component {
               !this.state.isSuspend && <span>确定是否暂停会话？</span>
             }
           </Modal>
+          {/* 画中画重新开启确认 */}
+          <Modal closable={false} centered={true} visible={this.state.isPictureConfirmModalVisible} maskClosable={false} footer={[
+            <div key='end'>
+              {/* <Button className="modelButtonCancel" onClick={()=> {this.setState({isPictureConfirmModalVisible: false})}}>取消</Button> */}
+              <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkPictureConfirm}>确定</Button>
+            </div>
+          ]}>
+            <div className='endModal'>画中画已关闭，请重新开启</div>
+          </Modal>
+          {/* 双录中断重新开启确认 */}
+          <Modal closable={false} centered={true} visible={this.state.isRecordingeErrorModalVisible} maskClosable={false} footer={[
+            <div key='end'>
+              <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkRecordConfirm}>确定</Button>
+            </div>
+          ]}>
+            <div className='endModal'>双录异常中断，请重新开启</div>
+          </Modal>
           {/* 是否退出会议*/}
           <Modal closable={false} centered={true} visible={this.state.isModalVisibleEnd} maskClosable={false} footer={[
             <div key='end'>
@@ -5743,7 +6255,7 @@ class Video extends Component {
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}>确定</Button>
             </div>
           ]}>
-            <div className='endModal'>是否要结束并退出会议？</div>
+            <div className='endModal'>{this.state.businessId? '正在进行业务录制，是否确认结束并退出会议？': '是否要结束并退出会议？'}</div>
           </Modal>
           {/* ocr及人脸 */}
           <Modal title={this.state.titleModal} width={800} closable={true} maskClosable={false} onCancel={this.handleCancelFacial} centered={true} visible={this.state.isModalVisibleFacial} footer={[
@@ -6086,22 +6598,26 @@ class Video extends Component {
           <Modal title="环境检测" maskClosable={false} width={650} closable={false} centered={true} visible={this.state.isModalVisibleEnvironment} footer={[
             <div key='env'>
               {/* <Button className="modelButtonCancel" onClick={this.handleCancelEnvDetection}>取消</Button> */}
-              <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnvDetection}>确定</Button>
+              <Button className="modelButtonOk" type="primary" disabled={this.state.loading} danger onClick={this.handleOkEnvDetection}>确定</Button>
             </div>
           ]}>
-             <Collapse defaultActiveKey={['1', '2', '3', '4', '5']} ghost>
+             <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} ghost>
              
-              <Panel header={'网络检测 - ' +this.state.envInfo.networkResult} key="5" className={this.state.envInfo.networkResult=='不合格'? 'panel-error':''} >
+              <Panel header={<span>网络检测 - {this.state.envInfo.networkResult } {this.state.envInfo.networkResult=='不合格'? <img src={IconFail} />: <img src={IconSuccess} />}</span>} 
+                key="5" className={this.state.envInfo.networkResult=='不合格'? 'panel-error':''} >
                 <p className='envClass'>网络状态：{this.state.envInfo.networkStatus}</p>
                 {this.state.envInfo.networkInfo?<p className='envClass'>{this.state.envInfo.networkInfo}</p>:null}
               </Panel>
-              <Panel header={'设备电量 - ' +this.state.envInfo.batteryResult} key="2" className={this.state.envInfo.batteryResult=='不合格'? 'panel-error':''}>
+              <Panel header={<span>设备电量 - {this.state.envInfo.batteryResult} {this.state.envInfo.batteryResult=='不合格'? <img src={IconFail} />: <img src={IconSuccess} />} </span>} 
+                key="2" className={this.state.envInfo.batteryResult=='不合格'? 'panel-error':''}>
                 <p className='envClass'>电量：{this.state.envInfo.batteryLevel}（{this.state.envInfo.batteryCharging}）</p>
               </Panel>
-              <Panel header={'内存检测 - ' +this.state.envInfo.memoryResult} key="1" className={this.state.envInfo.memoryResult=='不合格'? 'panel-error':''}>
+              <Panel header={<span>内存检测 - {this.state.envInfo.memoryResult} {this.state.envInfo.memoryResult=='不合格'? <img src={IconFail} />: <img src={IconSuccess} />}</span>} 
+                key="1" className={this.state.envInfo.memoryResult=='不合格'? 'panel-error':''}>
                 <p className='envClass'>最大可用内存：{this.state.envInfo.jsHeapSizeLimit} ；当前已使用：{this.state.envInfo.usedJSHeapSize} </p>
               </Panel>
-              <Panel header={'摄像头设备 - ' +this.state.envInfo.cameraResult} key="3" className={this.state.envInfo.cameraResult=='不合格'? 'panel-error':''}>
+              <Panel header={<span>摄像头设备 - {this.state.envInfo.cameraResult}{this.state.envInfo.cameraResult=='不合格'? <img src={IconFail} />: <img src={IconSuccess} />}</span>} 
+                key="3" className={this.state.envInfo.cameraResult=='不合格'? 'panel-error':''}>
                 <div >
                   {
                     this.state.cameraList.map((item, index) => {
@@ -6114,7 +6630,7 @@ class Video extends Component {
                   {this.state.cameraList.length == 0 ? <p className="envClass">获取不到摄像头设备，请检查</p> : null}
                 </div>
               </Panel>
-              <Panel header={'麦克风设备 - ' +this.state.envInfo.microResult} key="4" className={this.state.envInfo.microResult=='不合格'? 'panel-error':''}>
+              <Panel header={<span>麦克风设备 - {this.state.envInfo.microResult} {this.state.envInfo.microResult=='不合格'? <img src={IconFail} />: <img src={IconSuccess} />}</span>} key="4" className={this.state.envInfo.microResult=='不合格'? 'panel-error':''}>
                 <div>
                   {
                     this.state.microphoneList.map((item, index) => {
@@ -6126,6 +6642,9 @@ class Video extends Component {
                   {this.state.cameraList.length == 0 ? <p className="envClass">获取不到麦克风设备，请检查</p> : null}
                 </div>
               </Panel>
+              <Panel header={<span>背光、曝光 - {this.state.envInfo.lightResult} {this.state.envInfo.lightResult=='合格'? <img src={IconSuccess} />: <img src={IconFail} />}</span>} key="6" className={this.state.envInfo.lightResult=='合格'? '':'panel-error'}>
+                 <p className="envClass">{this.state.envInfo.lightResult=='合格'? '无过度背光、曝光':'过度背光、曝光'}</p> 
+              </Panel>
             </Collapse>
           </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>
@@ -6134,6 +6653,7 @@ class Video extends Component {
 
           <video className="mixedvideo" id="recordvideo" autoPlay width="0" height="0"></video>
           <video className="mixedvideo" id="record_video" muted autoPlay></video>
+          <video className="mixedvideo" id="publish_video_record_device" muted autoPlay></video>
 
         </Spin>
       </div>);
@@ -6168,10 +6688,18 @@ Video.defaultProps = {
     customers: ['--'],
     otherAttendees: undefined
   },
+  pdfRendering: false,
   isTranscribing: false,
   shareMask: false,
   isOpenSound: false, // true开启进出音效   false不开启
+  isWeakSound: false,
   userSide: 2,
+  meetingDuration: null, // 会议时长，单位小时
+  recordMode: 1, // 录制模式 1远程录制 2网点录制
+  defaultBranchCode: "",// 员工网点缩写
+  customerId: "", //客户号
+  salesBranchCode: "", //网点编号(分行号)
+  financialOffice: "", // 理财室
   logUrl: 'http://hsbc.cn-shanghai.log.aliyuncs.com/logstores/hsbc/track?APIVersion=0.6.0&app=meeting-ui',
   internalUrl: 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting'
 }