react_hsbc_teller 2.0.7 → 2.0.9

package/packages/pages/video/video.jsx

@@ -6,8 +6,11 @@ import QRCode  from 'qrcode.react';
 import API from '../../api/api';
 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'
@@ -20,6 +23,8 @@ 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 Modal from "antd/lib/modal";
 import 'antd/lib/modal/style'
@@ -47,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.9'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -54,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
@@ -73,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};
@@ -118,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');
@@ -134,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;//控制是否内部来进行关闭流
@@ -173,6 +198,7 @@ class Video extends Component {
   }
   cancel = axios.CancelToken.source()
   state = {
+    ablePlayNetweakAudio: true,
     beautyType: false,
     beautyName: '开启美颜',
     signNoClick: false,
@@ -205,6 +231,7 @@ class Video extends Component {
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
+    isPictureConfirmModalVisible:false,
     screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
@@ -292,6 +319,8 @@ class Video extends Component {
     cardFailReason: '',
     videoType: '',
     certificateValidityType: true,
+    drawCanvasInterval: null,
+    faceDetectionTimer: null, // 人脸检测定时器
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -299,7 +328,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.7&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 => {
 
@@ -321,6 +350,12 @@ class Video extends Component {
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         callbackUrl: this.props.callbackUrl,
+        meetingDuration: this.props.meetingDuration,
+        recordMode: this.props.recordMode,
+        defaultBranchCode: this.props.defaultBranchCode,
+        customerId: this.props.customerId,
+        salesBranchCode:  this.props.salesBranchCode,
+        financialOffice:  this.props.financialOffice,
         roomId: this.state.channelId,
         mtoken: this.state.rtoken,
         type: 2
@@ -345,6 +380,8 @@ class Video extends Component {
         this.test_controller.Publish(publish_config)
       })
       // this.publishAllScreen();
+      // 单独发布录制屏幕设备的流
+      this.publishRecorderDevice()
 
       this.props.createRoomCallback({
         type: 1,
@@ -497,37 +534,31 @@ class Video extends Component {
       {
         subscribe_video_id: 'video1',
         subscribe_audio_id: 'audio1',
-        subscribe_streamId_id: 'subscribe_streamId1',
         feedId_id: 'feedId1'
       },
       {
         subscribe_video_id: 'video2',
         subscribe_audio_id: 'audio2',
-        subscribe_streamId_id: 'subscribe_streamId2',
         feedId_id: 'feedId2'
       },
       {
         subscribe_video_id: 'video3',
         subscribe_audio_id: 'audio3',
-        subscribe_streamId_id: 'subscribe_streamId3',
         feedId_id: 'feedId3'
       },
       {
         subscribe_video_id: 'video4',
         subscribe_audio_id: 'audio4',
-        subscribe_streamId_id: 'subscribe_streamId4',
         feedId_id: 'feedId4'
       },
       {
         subscribe_video_id: 'video5',
         subscribe_audio_id: 'audio5',
-        subscribe_streamId_id: 'subscribe_streamId5',
         feedId_id: 'feedId5'
       },
       {
         subscribe_video_id: 'video6',
         subscribe_audio_id: 'audio6',
-        subscribe_streamId_id: 'subscribe_streamId6',
         feedId_id: 'feedId6'
       }
     ];
@@ -549,7 +580,7 @@ class Video extends Component {
     }
   }
   // 开启录制
-  enableServerRecording = () => {
+  enableServerRecording = (record_business_id) => {
     const that = this
     this.rateAll().then((res) => {
       console.log('退出房间者', res)
@@ -625,7 +656,7 @@ class Video extends Component {
           height: 175
         },
         {
-          tag: 'RM_ALL_SCREEN',
+          tag: 'sharedScreen', // 一期暂时不需要录制
           xPosition: 960,
           yPosition: 180,
           width: 320,
@@ -666,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, // 字体⼤⼩
@@ -680,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)
 
     })
 
@@ -698,6 +740,7 @@ 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)} `)
@@ -945,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
@@ -1012,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
@@ -1224,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);
     });
 
   }
@@ -1336,6 +1489,7 @@ class Video extends Component {
           }, ()=>{
             this.pictureInPicture('Refresh')
           })
+          this.messageClick('客户人脸已离框', 'error')
         }
       }
       else if (Mival.typeId == 3003) { // app进入前台
@@ -1352,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) {
@@ -1382,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());
@@ -1395,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
@@ -1425,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) {
@@ -1492,20 +1665,165 @@ 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()
+        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);
+          }
+        }
+        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,
@@ -1602,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
+        }
+      })
+      // 麦克风设置默认
+      objList1.forEach((item, index) => {
+        if (item.actionname.indexOf('Microphone Array (Realtek High Definition Audio(SST))') != -1) {
+          microId = index
         }
       })
-      console.log(indexId)
+      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({
@@ -1740,6 +2070,8 @@ class Video extends Component {
         this.test_controller.Publish(publish_config)
       })
       // this.publishAllScreen();
+      // 单独发布录制屏幕设备的流
+      this.publishRecorderDevice()
       
       this.roomCallBack(1, '', 0)
       this.saveLog('mrtc join room success')
@@ -1774,12 +2106,8 @@ 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)
@@ -1794,57 +2122,8 @@ class Video extends Component {
     }
     this.test_controller.OnReceiveTextMsg = (uid, msg) => {
       console.log('收到手机端消息',uid, msg, JSON.parse(msg))
-      // 线下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)
+      // this.saveLog('mrtc OnReceiveTextMsg info:' + msg)
       this.handleReceiveMsg(msg)
-      // 33001 已合并到 handleReceiveMsg
-      // 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])
-      //   }
-      // }
     }
     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}`);
@@ -1860,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);
@@ -1887,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');
 
@@ -1901,6 +2198,7 @@ class Video extends Component {
             canvas.width = this.state.widthVideo
           } else {
             await startMix(newStream1, 'none');
+            isGraffiti = false
           }
 
           newStream1 = mixCaptureStream();
@@ -1921,11 +2219,12 @@ 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) => {
@@ -1938,7 +2237,7 @@ class Video extends Component {
           'sharedScreen': 1,
           'tellerId': this.props.tellerAccount
         })
-        if (this.state.screenName == '切换共享') {
+        if (this.state.screenName == '共享屏幕') {
           this.state.isSharedScreen = true
           this.state.isScreenSwitching = false
         }
@@ -1949,6 +2248,10 @@ class Video extends Component {
 
           loading: false,
         });
+        setTimeout(() => {
+          this.showEnvDetection()
+        }, 1500);
+
 
         this.enterRoom()
         this.updateMeetingInfo()
@@ -1968,6 +2271,8 @@ class Video extends Component {
           },
           1000
         );
+        this.mediaInfo = this.generateMediaInfo(document.getElementById("publish_video1").name);
+
       } else {
         var box = document.getElementById("whiteboardDIV");
         var box1 = document.getElementById("operate")
@@ -2042,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({
@@ -2057,8 +2366,6 @@ class Video extends Component {
                 config_param = {
                   subscribe_video_id: 'video21',
                   subscribe_audio_id: 'audio21',
-                  subscribe_streamId_id: 'subscribe_streamId21',
-                  feedId_id: 'feedId21',
                   feedId: itemOne.feedId
                 }
 
@@ -2072,8 +2379,6 @@ class Video extends Component {
                 config_param = {
                   subscribe_video_id: 'video20',
                   subscribe_audio_id: 'audio20',
-                  subscribe_streamId_id: 'subscribe_streamId20',
-                  feedId_id: 'feedId20',
                   feedId: itemOne.feedId
                 }
 
@@ -2089,7 +2394,6 @@ class Video extends Component {
                       config_param = {
                         subscribe_video_id: 'video'+i,
                         subscribe_audio_id: 'audio'+i,
-                        subscribe_streamId_id: 'subscribe_streamId'+i,
                         feedId_id: 'feedId'+i,
                         feedId: itemOne.feedId
                       }
@@ -2102,6 +2406,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'
 
               }
             })
@@ -2119,6 +2424,10 @@ class Video extends Component {
     this.test_controller.OnNewPublish = (feed) => {
       console.log('有新发布者', feed);
       console.log(new Date())
+      if (feed.tag && feed.tag.includes('UnSubscribe_RM')) {
+        console.log('过滤订阅的tag:', feed.tag)
+        return
+      }
       this.sendMessage({
           'typeId': 1013,
           'muteStatus': this.state.voiceStatue ? 1 : 0,
@@ -2154,8 +2463,6 @@ class Video extends Component {
           config_param = {
             subscribe_video_id: 'video21',
             subscribe_audio_id: 'audio21',
-            subscribe_streamId_id: 'subscribe_streamId21',
-            feedId_id: 'feedId21',
             feedId: feed.feedId
           }
 
@@ -2175,8 +2482,6 @@ class Video extends Component {
           config_param = {
             subscribe_video_id: 'video20',
             subscribe_audio_id: 'audio20',
-            subscribe_streamId_id: 'subscribe_streamId20',
-            feedId_id: 'feedId20',
             feedId: feed.feedId
           }
 
@@ -2198,7 +2503,6 @@ class Video extends Component {
                 config_param = {
                   subscribe_video_id: 'video'+i,
                   subscribe_audio_id: 'audio'+i,
-                  subscribe_streamId_id: 'subscribe_streamId'+i,
                   feedId_id: 'feedId'+i,
                   feedId: feed.feedId
                 }
@@ -2325,6 +2629,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) => {
@@ -2362,44 +2670,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 = (
@@ -2522,6 +2883,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);
@@ -2682,7 +3060,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
@@ -2841,12 +3219,24 @@ 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
       });
@@ -2857,6 +3247,51 @@ class Video extends Component {
       }
     }
   }
+  // 业务录制回调
+  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
+      });
+      console.log(result);
+    } catch (err) {
+      console.error(err);
+      if (err.status == 502 || err.status == 404) {
+      }
+    }
+  }
+  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
@@ -2925,6 +3360,9 @@ class Video extends Component {
       this.asr_controller.Disconnect()
     }
     message.destroy()
+    clearInterval(this.state.drawCanvasInterval)
+    clearInterval(this.state.faceDetectionTimer);
+    clearInterval(this.state.imageDetectionTimer);
   }
   finishSession = () => {
     // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
@@ -3042,42 +3480,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()
@@ -3092,14 +3538,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()
             }
@@ -3123,7 +3569,17 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.7')
+    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({
@@ -3137,6 +3593,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({
@@ -3162,6 +3630,7 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
+        this.saveVideoPoint('mute', 'RM端静音')
         this.sendMessage({
             'typeId': 1013,
             'muteStatus': 1,
@@ -3183,6 +3652,7 @@ class Video extends Component {
           sid = document.getElementById('publish_streamId1').name
         }
         this.test_controller.SetLocalAudioEnable(1, parseInt(sid, 10));
+        this.saveVideoPoint('mute', 'RM端解除静音')
         this.sendMessage({
             'typeId': 1013,
             'muteStatus': 0,
@@ -3192,6 +3662,11 @@ class Video extends Component {
             }
         })
       }
+      if (this.state.isPictureInPicture) {
+        setTimeout(() => {
+          this.pictureInPicture('Refresh')
+        }, 0);
+      }
     }
   };
   isFileSuccuse = () => {
@@ -3252,30 +3727,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
@@ -3354,9 +3857,11 @@ 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: '静音'
@@ -3375,6 +3880,17 @@ 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变成恢复会话
     this.sendMessage({
@@ -3399,7 +3915,7 @@ class Video extends Component {
       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
     })
@@ -3579,6 +4095,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')
@@ -3768,6 +4287,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({
@@ -3866,6 +4386,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')
@@ -4098,19 +4621,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) => {
@@ -4122,10 +4651,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 = ''
@@ -4273,6 +4802,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 = {};
@@ -4302,8 +4846,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
@@ -4314,20 +4860,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
@@ -4350,7 +4897,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,
@@ -4382,13 +4930,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 = {};
@@ -4661,6 +5230,7 @@ class Video extends Component {
       jsHeapSizeLimit: '未知', // 上下文内可用堆的最大体积
       totalJSHeapSize: '未知', // 已分配的堆体积
       usedJSHeapSize: '未知', // 当前 JS 堆活跃段（segment）的体积
+      lightResult: this.state.envInfo? this.state.envInfo.lightResult : '未知'
     }
      
     if (navigator) {
@@ -4694,8 +5264,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);
@@ -4725,7 +5299,8 @@ class Video extends Component {
       // console.log('当前 JS 堆活跃段（segment）的体积', envInfo.usedJSHeapSize)
       envInfo.memoryResult = '合格'
     }
-    
+    // 背景曝光环境检测
+    this.lightDetect()
 
     this.setState({
       // isModalVisibleEnvironment: true,
@@ -4736,6 +5311,9 @@ class Video extends Component {
     this.setState({
       isModalVisibleEnvironment: false,
     })
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
   }
   // handleCancelEnvDetection = () => {
   //   this.setState({
@@ -4787,16 +5365,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")
@@ -4909,11 +5510,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()
@@ -4940,6 +5548,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) {
@@ -4960,6 +5579,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,
@@ -4974,6 +5599,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)
@@ -5074,8 +5702,10 @@ class Video extends Component {
 
             }))
           }
-
-
+          this.setState({
+            documentError: '',
+            isModalVisibleCustomer: false,
+          })
         }
       })
       // this.customerFaceClick(this.state.customerList[this.state.customerSelect])
@@ -5524,7 +6154,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=""
@@ -5591,6 +6221,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'>
@@ -5598,7 +6245,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={[
@@ -5941,22 +6588,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) => {
@@ -5969,7 +6620,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) => {
@@ -5981,6 +6632,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>
@@ -5989,6 +6643,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>);
@@ -6023,10 +6678,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'
 }