react_hsbc_teller 2.0.0 → 2.0.2-4.1

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'
@@ -17,11 +19,13 @@ import beautyImg from '../../assets/img/whiteningLut.jpg'
 import ocrImage from '../../assets/img/jietu.png'
 import faceImage from '../../assets/img/jietu_face.png'
 import autod from '../../assets/mp3/joinmeeting.mp3'
+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";
@@ -37,6 +41,9 @@ import 'antd/lib/radio/style'
 
 import Space from "antd/lib/space";
 import 'antd/lib/space/style'
+import { Collapse } from 'antd';
+import 'antd/lib/collapse/style'
+const { Panel } = Collapse;
 
 
 import styled from 'styled-components';
@@ -45,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.24.1'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -52,14 +61,33 @@ const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
 }
+const POINT_TYPE = {
+  tts: '文字转语音',
+  asr: '语音转文字',
+  ffd:	"人脸出框检测",
+  env:	"环境检测",
+  pipd:	"画中画显示、关闭",
+  pwd:	"违禁词检测",
+  wnd:	"弱网",
+  mute:  "静音",
+  expDark: '曝光、背光',
+  fcd: '人脸变化检测'
+}
+const RECORD_DEVICE_NAME = 'screen-capture-recorder'
+// const RECORD_DEVICE_NAME = 'Full HD webcam'
+let media_status = 0
 let pictureInPictureVideo
 let mix_stream
 let worker
 let streamShare
+let streamRecord
 let videoName
+let lastFaceNum = 1
 let muteJson = new Map()
-let dateTime = 0
+// let dateTime = 0
 let messageValue = ''
+let messageValueMap = new Map()
+let third_id_Map = new Map()
 // let beautyType = false
 // let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
@@ -69,6 +97,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};
@@ -114,7 +144,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');
@@ -130,21 +160,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;//控制是否内部来进行关闭流
@@ -169,6 +203,7 @@ class Video extends Component {
   }
   cancel = axios.CancelToken.source()
   state = {
+    ablePlayNetweakAudio: true,
     beautyType: false,
     beautyName: '开启美颜',
     signNoClick: false,
@@ -201,6 +236,7 @@ class Video extends Component {
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
+    isPictureConfirmModalVisible:false,
     screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
@@ -240,14 +276,14 @@ class Video extends Component {
     microphoneList: [],
     speakerList: [],
     isModalVisibleInspection: false,
+    envInfo: {},
+    isModalVisibleEnvironment: false,
     cameraValue: '',
     microphoneValue: '',
     imStatus: false,
-    imJoinRoom: false,
     analyserData: new Map(),
     analyserHeight: new Map(),
     OnVolumeAnalyserMap: new Map(),
-    manualClose: false,
     defaultValue: '1',
     customOcrSid: '',
     shareMaskState: false,
@@ -288,6 +324,8 @@ class Video extends Component {
     cardFailReason: '',
     videoType: '',
     certificateValidityType: true,
+    drawCanvasInterval: null,
+    faceDetectionTimer: null, // 人脸检测定时器
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -295,7 +333,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.0&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 => {
 
@@ -315,8 +353,16 @@ class Video extends Component {
     try {
       let result = await API.createRoom({
         staffId: this.props.tellerAccount,
+        staffName: this.props.staffName,
         activityId: this.props.businessNumber,
         callbackUrl: this.props.callbackUrl,
+        meetingDuration: this.props.meetingDuration,
+        recordMode: this.props.recordMode,
+        defaultBranchCode: this.props.defaultBranchCode,
+        customerId: this.props.customerId,
+        customerType: this.props.customerType.toString(),
+        salesBranchCode:  this.props.salesBranchCode,
+        financialOffice:  this.props.financialOffice,
         roomId: this.state.channelId,
         mtoken: this.state.rtoken,
         type: 2
@@ -324,6 +370,7 @@ class Video extends Component {
       console.log(result);
       this.state.imRoomId = result.imRoomId,
         this.state.sessionId = result.sessionId;
+
       let publish_config = {}
       publish_config.media_type = 1
       publish_config.publish_device = 1
@@ -337,15 +384,11 @@ class Video extends Component {
       publish_config.publish_streamId_id = 'publish_streamId1'
       publish_config.publish_tag = 'tag1'
       this.test_controller.Publish(publish_config)
-      // 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.publishAllScreen();
+      // 单独发布录制屏幕设备的流
+      this.publishRecorderDevice()
+
       this.props.createRoomCallback({
         type: 1,
         errorManage: '',
@@ -455,11 +498,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;
@@ -486,48 +524,56 @@ class Video extends Component {
         publish_video_id: 'publish_video1',
         publish_streamId_id: 'publish_streamId1',
         publish_tag: 'tag1'
-      }
+      },
+      // {
+      //   publish_video_id: 'publish_video2',
+      //   publish_streamId_id: 'publish_streamId2',
+      //   publish_tag: 'tag2'
+      // },
+      // {
+      //   publish_video_id: 'publish_video3',
+      //   publish_streamId_id: 'publish_streamId3',
+      //   publish_tag: 'tag3'
+      // }
     ];
     config_param.initSubscribe = [
       {
         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'
       }
     ];
     this.test_controller.InitRoomConfig(config_param)
     this.saveLog('mrtc InitRoomConfig start')
+    // 预热摄像头
+    config_param.videoSource = this.state.cameraValue
+    config_param.audioSource = this.state.microphoneValue
+    this.test_controller.PreOpenLocalMedia(config_param)
   };
   rateAll = async () => {
     let data = ''
@@ -544,7 +590,7 @@ class Video extends Component {
     }
   }
   // 开启录制
-  enableServerRecording = () => {
+  enableServerRecording = (record_business_id) => {
     const that = this
     this.rateAll().then((res) => {
       console.log('退出房间者', res)
@@ -612,46 +658,18 @@ class Video extends Component {
           width: 213,
           height: 175
         },
+        {
+          tag: 'customer6',
+          xPosition: 1278,
+          yPosition: 0,
+          width: 213,
+          height: 175
+        },
         // {
-        //   tag: 'customer6',
-        //   xPosition: 1440,
-        //   yPosition: 0,
-        //   width: 240,
-        //   height: 180
-        // },
-        // {
-        //   tag: 'customer7',
-        //   xPosition: 1680,
-        //   yPosition: 0,
-        //   width: 240,
-        //   height: 180
-        // },
-        // {
-        //   tag: 'customer8',
-        //   xPosition: 1680,
+        //   tag: 'sharedScreen', // 一期暂时不需要录制
+        //   xPosition: 960,
         //   yPosition: 180,
-        //   width: 240,
-        //   height: 180
-        // },
-        // {
-        //   tag: 'customer9',
-        //   xPosition: 1680,
-        //   yPosition: 360,
-        //   width: 240,
-        //   height: 180
-        // },
-        // {
-        //   tag: 'customer10',
-        //   xPosition: 1680,
-        //   yPosition: 540,
-        //   width: 240,
-        //   height: 180
-        // },
-        // {
-        //   tag: 'customer11',
-        //   xPosition: 1680,
-        //   yPosition: 720,
-        //   width: 240,
+        //   width: 320,
         //   height: 180
         // }
       ]
@@ -689,12 +707,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.state.branchName || ''} ${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, // 字体⼤⼩
@@ -703,7 +732,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)
 
     })
 
@@ -719,6 +748,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) {
@@ -906,47 +944,38 @@ class Video extends Component {
       this.messageClick('当前暂无客户', 'error')
     }
   }
-  messageClick = (value, valueOne) => {
-    console.log(value, valueOne)
-    if (messageValue != value) {
+  messageClick = (value, tipType) => {
+    console.log('messageClick', value, tipType)
+    const intervalSec = 5 // 相同提示触发间隔
+    const durationSec = 4.5 // 提示持续时间
+    if (messageValueMap.get(value) == undefined) {
+      // map中没有相同消息
       messageValue = value
-      dateTime = new Date().getTime()
-      if (valueOne == 'error') {
-        message.error({
-          content: value,
-          icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-          className: 'errorClassName',
-          top: 200,
-          duration: 10
-        })
-      } else if (valueOne == 'success') {
-        message.success({
-          content: value,
-          icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-          className: 'successClassName',
-          top: 200,
-          duration: 10
-        })
-      }
-    } else if (((new Date().getTime()) - dateTime) / 1000 > 30) {
-      dateTime = new Date().getTime()
-      if (valueOne == 'error') {
+      messageValueMap.set(value, setTimeout(() => {
+        messageValueMap.delete(value) 
+      }, intervalSec * 1000))
+
+      if (tipType == 'error') {
         message.error({
           content: value,
           icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
           className: 'errorClassName',
           top: 200,
-          duration: 10
+          duration: durationSec
         })
-      } else if (valueOne == 'success') {
+      } else if (tipType == 'success') {
         message.success({
           content: value,
           icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
           className: 'successClassName',
           top: 200,
-          duration: 10
+          duration: durationSec
         })
       }
+      clearTimeout(this.messageClearTimer)
+      this.messageClearTimer = setTimeout(() => {
+        messageValue = ''
+      }, durationSec * 1000);
     }
 
   }
@@ -960,6 +989,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
@@ -975,6 +1098,10 @@ class Video extends Component {
       streamShare.getTracks().forEach(track => track.stop());
       streamShare = ''
     }
+    if (streamRecord) {
+      streamRecord.getTracks().forEach(track => track.stop());
+      streamRecord = ''
+    }
     this.finishSession()
 
   };
@@ -1011,14 +1138,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
@@ -1050,11 +1177,14 @@ class Video extends Component {
     worker = new Worker(url);
     window.URL.revokeObjectURL(blob);
 
-
     worker.onmessage = () => {
-      cobj.clearRect(0, 0, 640, 360 * this.state.listVideoPicture.length);
+      const messageBoxHeight = 50;
+      const recordBoxHeight = 50; // this.state.businessRecordId ? 50 : 0;
+      const baseStartHeight = messageBoxHeight + recordBoxHeight
+
+      cobj.clearRect(0, 0, 640, 360 * this.state.listVideoPicture.length + baseStartHeight);
       canvas.width = 640;
-      canvas.height = 360 * this.state.listVideoPicture.length;
+      canvas.height = 360 * this.state.listVideoPicture.length + baseStartHeight;
       for (let i = 0; i < this.state.listVideoPicture.length; i++) {
 
         let videoId = this.state.listVideoPicture[i].name;
@@ -1070,15 +1200,15 @@ class Video extends Component {
         }
         if (this.state.listVideoPicture[i].noVideo) {
           cobj.fillStyle = '#333';
-          cobj.fillRect((640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight)
+          cobj.fillRect((640 - newVideoWidth) / 2, 360 * i + baseStartHeight, newVideoWidth, newVideoHeight)
         } else {
-          cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, 640, 360);
+          cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i + baseStartHeight, 640, 360);
 
         }
         cobj.beginPath();
         cobj.strokeStyle = this.props.titleColor;
         cobj.fillStyle = this.props.titleBackground;
-        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60)
+        cobj.fillRect(0, 360 * (i + 1) - 60 + baseStartHeight, 300, 60)
         cobj.fill();
         cobj.stroke();
         cobj.beginPath();
@@ -1096,12 +1226,12 @@ class Video extends Component {
             break;
           }
         }
-        cobj.strokeText(str, 70, 360 * (i + 1) - 20);
+        cobj.strokeText(str, 70, 360 * (i + 1) - 20 + baseStartHeight);
         cobj.stroke();
         //左边框
         cobj.beginPath();
-        cobj.moveTo(0, 0);
-        cobj.lineTo(0, 360 * this.state.listVideoPicture.length);
+        cobj.moveTo(0, 0 + baseStartHeight);
+        cobj.lineTo(0, 360 * this.state.listVideoPicture.length + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1109,8 +1239,8 @@ class Video extends Component {
 
         //下边框
         cobj.beginPath();
-        cobj.moveTo(0, 0);
-        cobj.lineTo(640, 0);
+        cobj.moveTo(0, 0 + baseStartHeight);
+        cobj.lineTo(640, 0 + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1118,8 +1248,8 @@ class Video extends Component {
 
         //右边框
         cobj.beginPath();
-        cobj.moveTo(640, 360 * this.state.listVideoPicture.length);
-        cobj.lineTo(640, 0);
+        cobj.moveTo(640, 360 * this.state.listVideoPicture.length + baseStartHeight);
+        cobj.lineTo(640, 0 + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1128,8 +1258,8 @@ class Video extends Component {
 
         //上边框
         cobj.beginPath();
-        cobj.moveTo(0, 360 * this.state.listVideoPicture.length);
-        cobj.lineTo(640, 360 * this.state.listVideoPicture.length);
+        cobj.moveTo(0, 360 * this.state.listVideoPicture.length + baseStartHeight);
+        cobj.lineTo(640, 360 * this.state.listVideoPicture.length + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1140,9 +1270,9 @@ class Video extends Component {
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
         if (this.state.listVideoPicture[i].mute) {
-          cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+          cobj.drawImage(img1, 10, 360 * (i + 1) - 60 + baseStartHeight, microphoneSize, microphoneSize);
         } else {
-          cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+          cobj.drawImage(img, 10, 360 * (i + 1) - 60 + baseStartHeight, microphoneSize, microphoneSize);
 
           // 绘制实时音量
           let sid = document.getElementById(this.state.listVideoPicture[i].name).name
@@ -1159,9 +1289,9 @@ class Video extends Component {
               // 以画布左上角为坐标原点
               let drawArea = {
                 x1: 28 / 50 * microphoneSize + 10, // 波动范围右下角的点坐标
-                y1: 25 / 50 * microphoneSize + 360 * (i + 1) - 60,
+                y1: 25 / 50 * microphoneSize + 360 * (i + 1) - 60 + baseStartHeight,
                 x2: 22 / 50 * microphoneSize + 10,  // 波动范围左上角的点坐标
-                y2: 10 / 50 * microphoneSize + 360 * (i + 1) - 60,
+                y2: 10 / 50 * microphoneSize + 360 * (i + 1) - 60 + baseStartHeight,
               }
 
 
@@ -1191,6 +1321,53 @@ class Video extends Component {
         }
 
       }
+      cobj.fillStyle = '#333333';
+      cobj.fillRect(0, 0, 640, baseStartHeight)
+      // 录制中状态
+      if (this.state.businessRecordId) {
+        let str = '· 录制中'
+        // cobj.fillStyle = '#F8F2F3';
+        cobj.font = "normal lighter 30px sans-serif";
+        // cobj.fillRect(0, 0, 640, recordBoxHeight)
+        cobj.textAlign = 'center';
+        cobj.strokeStyle = 'red';
+        cobj.lineWidth = 2
+        cobj.strokeText(str, 320, recordBoxHeight - 15);
+        cobj.stroke();
+      }
+      // 消息提示
+      if (messageValue) {
+        let str = messageValue
+        cobj.fillStyle = '#F8F2F3';
+        cobj.font = "normal lighter 30px sans-serif";
+        // const textWidth = Math.min(cobj.measureText(str).width, 610)
+        cobj.fillRect(0, recordBoxHeight, 640, messageBoxHeight)
+        cobj.textAlign = 'center';
+        cobj.strokeStyle = 'black';
+        cobj.lineWidth = 2
+        cobj.strokeText(str, 320, recordBoxHeight + messageBoxHeight - 15);
+        cobj.stroke();
+      }
+
+      // 敏感词提示
+      // let str = this.state.sensitiveTitle || ''
+      // if (str)
+      //   cobj.fillStyle = 'red';
+      //   cobj.font = "normal lighter 32px sans-serif";
+      //   const textWidth = Math.min(cobj.measureText(str).width, 610)
+      //   cobj.fillRect(320 - textWidth/ 2, 24, textWidth, 32)
+      //   cobj.textAlign = 'center';
+      //   cobj.strokeStyle = 'white';
+      //   cobj.lineWidth = 2
+      //   for (let k = 0; k < str.length; k++) {
+      //     if (cobj.measureText(str.substring(0, k + 1)).width > 610) {
+      //       str = str.substring(0, k - 2)
+      //       str += '...'
+      //       break;
+      //     }
+      //   }
+      //   cobj.strokeText(str, 320, 50);
+      //   cobj.stroke();
     };
 
     const captureStream = canvas.captureStream();
@@ -1203,17 +1380,37 @@ class Video extends Component {
 
     pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
       //可获取画中画窗口的一些数据，如宽高等
+      console.log('开启画中画')
       pictureInPictureVideo.style.display = 'block';
       pictureInPictureVideo.play();
       this.state.isPictureInPicture = true
+      clearTimeout(this.loopPlay)
     });
 
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
+      console.log('关闭画中画')
       pictureInPictureVideo.srcObject = null;
       pictureInPictureVideo.style.display = "none";
       this.state.listVideoPicture = []
       worker.postMessage(false);
       this.state.isPictureInPicture = false
+
+      clearTimeout(this.loopPlay)
+      // 画中画循环播放逻辑
+      if (document.hidden && this.state.businessRecordId) {
+        this.setState({
+          isPictureConfirmModalVisible: true
+        })
+        this.loopPlay = () => {
+          console.log('loopPlay status', this.state.isPictureInPicture);
+          if(!this.state.isPictureInPicture && document.getElementById("publish_video1")){
+            let audio = new Audio(PIPictureClosedAudio)
+            audio.play()
+            setTimeout(this.loopPlay, 3000);
+          }
+        }
+        setTimeout(this.loopPlay, 0);
+      }
     });
 
   }
@@ -1281,9 +1478,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) {
         // 进行初始化操作
@@ -1316,6 +1512,7 @@ class Video extends Component {
           }, ()=>{
             this.pictureInPicture('Refresh')
           })
+          this.messageClick('客户切换其他软件', 'error')
         }
       }
       else if (Mival.typeId == 3003) { // app进入前台
@@ -1332,6 +1529,30 @@ class Video extends Component {
           })
         }
       }
+      else if (Mival.typeId == 5001) { // 客户端离框
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          TITLE = this.getUserTitle(Mival.data.userId)
+        }
+        this.messageClick(TITLE+'人脸已离框', 'error')
+        // this.saveVideoPoint('ffd', '客户人脸离框');
+      }
+      else if (Mival.typeId == 5002) { // 客户端背光
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          TITLE = this.getUserTitle(Mival.data.userId)
+        }
+        this.messageClick(TITLE+'背光、曝光过度', 'error')
+        // this.saveVideoPoint('env', '客户端背光、曝光过度');
+      }
+      else if (Mival.typeId == 5003) { // 客户端弱网
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          TITLE = this.getUserTitle(Mival.data.userId)
+        }
+        this.messageClick(TITLE+'当前网络较弱', 'error')
+        // this.saveVideoPoint('wnd', '客户端弱网');
+      }
       else if (Mival.typeId == 1220) {
         // 一炒多的图片  1214
         if (Mival.sessionId == this.state.sessionId) {
@@ -1362,6 +1583,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());
@@ -1375,6 +1599,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
@@ -1405,6 +1630,9 @@ class Video extends Component {
                 
               }
           }
+          if (this.state.isPictureInPicture) {
+            this.pictureInPicture('Refresh')
+          }
         }
       } else if (Mival.typeId == 121305) {
         if (Mival.sessionId == this.state.sessionId) {
@@ -1440,33 +1668,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) {
@@ -1480,37 +1700,186 @@ 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')
+        // this.setState({
+        //   isRecordingeErrorModalVisible: true,
+        //   businessRecordId: '',
+        // })
+        // // 循环播放录制中断语音
+        // clearTimeout(this.recordLoopPlay)
+        // this.recordLoopPlay = () => {
+        //   console.log('loop recordId', this.state.recordId, 'businessRecordId ', this.state.businessRecordId)
+        //   if(!this.state.businessRecordId && document.getElementById("publish_video1")){
+        //     let audio = new Audio(recordErrorAudio)
+        //     audio.play()
+        //     setTimeout(this.recordLoopPlay, 3000);
+        //   }
+        // }
+        // setTimeout(this.recordLoopPlay, 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)
+
+          if (this.props.whetherDetectFace){
+            this.startFaceDetection();
+          }
+          if (this.props.whetherDetectLight){
+            this.startImageDetection();
+          }
+        } else if (Mival.status == 2) {
+          // 关闭了业务录制
+          console.log('业务录制关闭', this.state.businessRecordId)
+          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();
       }
-    };
-    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房间')
+  }
+  getUserTitle = (userId) => {
+    const user = this.state.videoList.find(el => el.userId == userId)
+    if (!user) return '客户'
+    if (user.isPIBIntranet) return '行内人员'
+    else if (user.userSide == 1) return '访客'
+    else return '客户'
+  }
+  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,', '')
+          });
+          const changeNum = lastFaceNum - result.faceNum
+          if (result.faceNum == 0) {
+            // 人脸出框
+            this.messageClick('检测到您的人脸已出框', 'error')
+            this.saveVideoPoint('ffd', 'RM端人脸离框');
+          } else if (lastFaceNum == 0 && result.faceNum == 1) { 
+            // 0->1不需要提示
+          } else if (changeNum != 0) {
+            this.messageClick('检测到参会人员数量发生变化', 'error')
+            this.saveVideoPoint('fcd', 'RM端人脸数量发生变化');
+          }
+          lastFaceNum = result.faceNum;
+        } catch (err) {
+          console.error(err);
+          if (err.status == 502 || err.status == 404) {
           }
-        }, 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)
-
         }
+    }, this.props.faceDetectInterval * 1000);
 
+    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('expDark', 'RM端背光、曝光过度');
+        }
+        origin.delete()
+        // let end = new Date().getTime()
+        // console.log('执行时间(s) ', (end - start)/1000 )
       }
+    }, this.props.lightDetectInterval * 1000);
 
+    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,
+        client: 'rm',
+        customerId: this.props.tellerAccount
+      });
+    } catch (err) {
+      console.error(err);
+      if (err.status == 502 || err.status == 404) {
+      }
     }
+  }
+  mountClick = () => {
     let data = {
       account: this.props.tellerAccount,
       type: '2',
@@ -1606,21 +1975,34 @@ 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)
@@ -1640,6 +2022,7 @@ class Video extends Component {
       this.state.sessionType = false
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头', 'error')
       this.roomCallBack(2, '获取设备失败', 1)
+      this.showEnvDetection()
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -1688,6 +2071,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) => {
@@ -1721,12 +2108,13 @@ class Video extends Component {
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
+
       let publish_config = {}
       publish_config.media_type = 1
       publish_config.publish_device = 1
-      publish_config.need_volume_analyser = true
       publish_config.videoSource = this.state.cameraValue
       publish_config.audioSource = this.state.microphoneValue
+      publish_config.need_volume_analyser = true
       // publish_config.video_profile_type = 3
       publish_config.video_profile_type = 100
       publish_config.video_profile_diy = { width: 640, height: 360, frameRate: 15, bitrate: 400 }
@@ -1734,8 +2122,17 @@ class Video extends Component {
       publish_config.publish_streamId_id = 'publish_streamId1'
       publish_config.publish_tag = 'tag1'
       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) => {
@@ -1750,12 +2147,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 = {
@@ -1766,71 +2160,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}`);
@@ -1846,28 +2193,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();
-        //   // 清理原始流
-        // newStream.oninactive = function () {
-        //   clearOriginStream(stream);
-        // };
-        // newStream.getVideoTracks()[0].onended = function () {
-        //   clearOriginStream(stream);
-        // };
-        // function clearOriginStream(stream) {
-        //   stream.getTracks().forEach((track) => {
-        //     track.stop();
-        //   });
-        //   stream = null;
-        // }
-        // };
         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);
@@ -1889,10 +2221,26 @@ class Video extends Component {
       }
 
       if (publish_tag == 'projectionWhiteboard' && publish_device == 2) {
-        // this.graffiti()
-        console.log('projectionWhiteboard', stream)
         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');
 
@@ -1904,9 +2252,12 @@ class Video extends Component {
             canvas.width = this.state.widthVideo
           } else {
             await startMix(newStream1, 'none');
+            isGraffiti = false
           }
 
           newStream1 = mixCaptureStream();
+          newStream1.getVideoTracks()[0].contentHint = "text"; // 解决清晰度问题
+
           console.log('projectionWhiteboard1', newStream1)
           // 清理原始流
           newStream1.oninactive = function () {
@@ -1922,27 +2273,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
         }
@@ -1953,29 +2302,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")
@@ -2050,6 +2401,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({
@@ -2065,8 +2420,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
                 }
 
@@ -2080,8 +2433,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
                 }
 
@@ -2097,7 +2448,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
                       }
@@ -2110,6 +2460,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'
 
               }
             })
@@ -2127,22 +2478,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': {
@@ -2151,9 +2499,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;
@@ -2172,8 +2517,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
           }
 
@@ -2193,8 +2536,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
           }
 
@@ -2216,7 +2557,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
                 }
@@ -2240,14 +2580,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({
@@ -2346,13 +2683,17 @@ 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) => {
         console.log('退出房间者', res)
         let data = res ? res.username ? res.username : '客户' : '客户'
         console.log(data)
-        this.messageClick((data + '已退出会议'), 'error')
+        // this.messageClick((data + '已退出会议'), 'error')
         this.saveLog(data + ' leave room')
         if (res.userType == 1) {
           // 2--坐席  1--客户
@@ -2365,12 +2706,14 @@ class Video extends Component {
             let audio = new Audio(src)
             audio.play()
           }
+          this.messageClick(('客户已退出会议'), 'error')
         } else if (res.userType == 2) {
           if (this.props.isOpenSound) {
             let src = internalLeft
             let audio = new Audio(src)
             audio.play()
           }
+          this.messageClick(('内部人员已退出会议'), 'error')
         } 
         // console.log('退出房间者',res)
         // let data = res? res : '客户'
@@ -2383,44 +2726,105 @@ 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);
+      // 重进会议前端会丢失之前的third_id，从服务端去取
+      if (!record_third_id && third_id_Map.get(recordId)) {
+        record_third_id = third_id_Map.get(recordId)
+      }
+      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)
+      // 重进会议前端会丢失之前的third_id，从服务端去取
+      if (!record_third_id && third_id_Map.get(recordId)) {
+        record_third_id = third_id_Map.get(recordId)
+      }
+      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 = (
@@ -2484,6 +2888,28 @@ class Video extends Component {
       msg
     ) => {
       console.log('服务端录制失败通知', recordId, feedId, code, msg)
+      this.saveLog(`recording error, recordId=${recordId}`)
+
+      // 如果在业务双录中，需要重新开启；如果是full录制出错，则不用处理
+      if (this.state.businessRecordId == recordId) {
+        // 录制中断
+        this.messageClick('双录异常中断，请重新开启', 'error')
+        this.setState({
+          isRecordingeErrorModalVisible: true,
+          businessRecordId: '',
+        })
+        // 循环播放录制中断语音
+        clearTimeout(this.recordLoopPlay)
+        this.recordLoopPlay = () => {
+          console.log('loop recordId', this.state.recordId, 'businessRecordId ', this.state.businessRecordId)
+          if(!this.state.businessRecordId && document.getElementById("publish_video1")){
+            let audio = new Audio(recordErrorAudio)
+            audio.play()
+            setTimeout(this.recordLoopPlay, 3000);
+          }
+        }
+        setTimeout(this.recordLoopPlay, 0);
+      }
     };
     // 停止浏览器录制成功回调
     this.test_controller.OnClientStopRecordSuccess = (
@@ -2543,6 +2969,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);
@@ -2703,7 +3146,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
@@ -2732,13 +3175,155 @@ class Video extends Component {
 
 
     };
+
+    const that = this;
+    this.asr_controller.OnGetSign = function(bizName, subBiz, uid) {
+      return 'signature'
+    }
+    // 连接成功回调
+    this.asr_controller.OnAsrConnectOK = function() {
+      // 需要状态控制
+      if (media_status == 1) {
+        return
+      }
+
+      const config_param = {}
+      const biz_name = 'demo'
+      const sub_biz = 'default'
+      const uid = that.props.tellerAccount
+      const sampleRate = 16000
+      const procType = 8
+      config_param.bizName = biz_name
+      config_param.subBiz = sub_biz
+      config_param.uid = uid
+      config_param.sampleRate = sampleRate
+      config_param.procType = procType
+      config_param.mediaStreamType = 2 // 1:麦克风;2:传stream
+      // console.log(test_controller.GetMediaInfo(document.getElementById('publish_video1').name).audio_)
+      config_param.audio_ = that.test_controller.GetMediaInfo(document.getElementById('publish_video1').name).audio_
+      config_param.idleTime = 6 // 12s没有识别结果返回通知上层
+      config_param.tag = 'asr_tag0'
+      that.asr_sid = that.asr_controller.TurnOnMicrophone(config_param, config_param.audio_)
+    }
+    // 初始化成功
+    this.asr_controller.OnInitOk = function(sid, tag) {
+      console.log('OnInitOk:')
+      media_status = 1
+    }
+
+    // 初始化失败
+    this.asr_controller.OnInitError = function(sid, code, msg, tag) {
+      console.log('OnInitError:' + msg)
+      that.asr_sid = ''
+    }
+
+    // 识别结果
+    this.asr_controller.OnAsrMessage = function(msg, sid, tag, status) {
+      that.asr_controller.trace(`OnAsrMessage sid=${sid},status=${status},tag=${tag}`)
+      const parse = JSON.parse(msg)
+      const resultValue = parse.value
+      const sentence_id = parse.sentence_id
+      // sentence_id相同,取最后一个值
+      let text = resultValue || ''
+      const sensitiveArr = that.props.sensitiveWords
+      // const regex = new RegExp(sensitiveArr.join('|'), 'g') // /\#{(.+?)\}/g;
+      // text = text.replace(regex, function(r) { return '<span style="background: red;">' + r + '</span>' })
+      let matchArr = sensitiveArr.filter(el => text.includes(el));
+      if (matchArr.length>0) {
+        matchArr.forEach(el => {
+          that.messageClick('检测到敏感词:' + matchArr, 'error')
+          that.state.sensitiveTitle = '检测到敏感词:' + matchArr
+          clearTimeout(that.state.sensitiveTitleTimer)
+          that.state.sensitiveTitleTimer = setTimeout(() => {
+            that.state.sensitiveTitle = ''
+          }, 3000);
+          if (!that.state.sensitiveRecordMap[sentence_id] || !that.state.sensitiveRecordMap[sentence_id].includes(el)){
+            API.addSensitiveRecord({
+              tellerId: that.props.tellerAccount,
+              sessionId: that.state.sessionId,
+              sensitiveWord: el
+            });
+            if (!that.state.sensitiveRecordMap[sentence_id]) {
+              that.state.sensitiveRecordMap[sentence_id] = []
+            } 
+            that.state.sensitiveRecordMap[sentence_id].push(el)
+          }
+        })
+      }
+      // that.AsrResultText = text
+    }
+
+    // 停止录音回调
+    this.asr_controller.OnTurnOffMicrophoneOK = function(sid, tag) {
+      media_status = 0
+      that.asr_controller.Disconnect()
+    }
+    this.asr_controller.OnAsrMsgIdle = function(sid, tag) {
+      // that.AsrResultText = ''
+      that.asr_controller.trace('OnAsrMsgIdle')
+    }
+    this.asr_controller.OnAsrDisconnectOK = function() {
+      that.asr_controller.trace('Disconnect is  success')
+    }
+
   }
+  startASR() {
+    // const publish_sid = document.getElementById('publish_video1').name
+
+    if (media_status == 1) {
+      return
+    }
+    this.asr_controller.Connect(this.props.asrServerUrl)
+    message.success({
+      content: '敏感词检测已开启',
+      icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+      className: 'successClassName',
+      top: 200,
+      // duration: 10
+    })
+    this.state.isAsrStart = true
+    this.state.sensitiveRecordMap = {}
+    // this.AsrResultText = ''
+  }
+  stopASR() {
+    this.state.isAsrStart = false
+    // this.AsrResultText = ''
+    // const { publish_sid } = this.getSidsInfo()
+    if (media_status == 0) {
+      return
+    }
+    this.asr_controller.TurnOffMicrophone(this.asr_sid)
+    // clearInterval(this.asrTimer)
+    // if (this.localRecordStatus && this.client_record_id) {
+    //   test_controller.StopRecord(this.client_record_id)
+    // }
+    message.success({
+      content: '敏感词检测已关闭',
+      icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+      className: 'successClassName',
+      top: 200,
+      // 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,
+        customerId: this.props.customerId,
         type: type,
         status: status
       });
@@ -2749,6 +3334,52 @@ 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,
+        customerId: this.props.customerId,
+        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
@@ -2780,10 +3411,9 @@ class Video extends Component {
         type: '2'
       });
       console.log(result);
+      this.queryRecordStatus()
       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': {
@@ -2792,9 +3422,6 @@ class Video extends Component {
             'customers': this.props.meetingInfo.customers,
             'otherAttendees': this.props.meetingInfo.otherAttendees
           }
-
-        })
-      }, function (code, message, data) {
       })
     } catch (err) {
       console.error(err);
@@ -2817,12 +3444,19 @@ class Video extends Component {
         console.error(err)
       }
     }
-    if (this.state.imStatus) {
-      console.log('disconnect断开连接')
-      this.state.manualClose = true
-      disconnect();
+    if (this.state.isAsrStart){
+      this.stopASR()
+      this.asr_controller.Disconnect()
+    }
+    if (this.state.isPictureInPicture) {
+      document.exitPictureInPicture()
     }
     message.destroy()
+    clearTimeout(this.loopPlay)
+    clearTimeout(this.recordLoopPlay)
+    clearInterval(this.state.drawCanvasInterval)
+    clearInterval(this.state.faceDetectionTimer);
+    clearInterval(this.state.imageDetectionTimer);
   }
   finishSession = () => {
     // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
@@ -2879,6 +3513,21 @@ class Video extends Component {
       this.roomCallBack(2, '获取tiken失败', 'SYS-01')
     }
   }
+  queryBranchName = async () => {
+    try {
+      let result = await API.getBranchName({
+        branchCode: this.props.salesBranchCode
+      })
+      this.setState({
+        branchName: result.branchName || ''
+      })
+      console.log('branchName', this.state.branchName)
+    } catch (err) {
+      console.error(err);
+      
+    }
+  }
+ 
   getRoomStatus = async data => {
     try {
       let result = await API.getRoomStatus({
@@ -2926,7 +3575,7 @@ class Video extends Component {
       loading: true,
     })
     const that = this
-    axios.get(this.props.resourcePath + "/mcu.js")
+    axios.get(this.props.resourcePath + `/mcu.js?v=${SDK_VERISON}`)
       .then(response => this.addToScriptClick()).catch(function (error) {
         console.log(error);
         that.state.sessionType = false
@@ -2940,36 +3589,50 @@ class Video extends Component {
 
   }
   addToScriptClick = () => {
+    let params =  `?v=${SDK_VERISON}`
     const _dependScripts = [
-      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()
@@ -2984,13 +3647,15 @@ 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()
             }
           }
@@ -3013,7 +3678,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.0')
+    console.log('hsbc_teller_sdk', SDK_VERISON)
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -3027,6 +3692,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({
@@ -3035,6 +3712,10 @@ class Video extends Component {
     } else {
       this.addToScript()
     }
+
+    if (this.props.salesBranchCode) {
+      this.queryBranchName()
+    }
   }
 
   voice = () => {
@@ -3052,20 +3733,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({
@@ -3079,22 +3755,51 @@ 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);
+      }
     }
   };
+  queryRecordStatus = async()=>{
+    try {
+      let result = await API.getRecordStatus({
+        roomId: this.state.channelId + ''
+      });
+      console.log('RecordStatus', result)
+      if (result.fullRecordStatus == 1) { // 1开启 2未开启
+        // 全局录制
+        this.state.recordId = result.fullRecordId
+        if (result.businessRecordStatus == 1){
+          // 业务录制
+          this.state.businessRecordId = result.businessRecordId;
+          this.state.businessId = result.businessId;
+          third_id_Map.set(result.businessRecordId, result.businessId);
+          console.log(third_id_Map)
+          if (this.props.whetherDetectFace) this.startFaceDetection();
+          if (this.props.whetherDetectLight) this.startImageDetection();
+        }
+      } else {
+        this.state.recordId = ''
+      }
+    } catch (err) {
+      console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
+    }
+  }
   isFileSuccuse = () => {
     if (!this.state.sessionId || !this.state.sessionType || !this.state.imStatus) {
       this.messageClick('当前程序异常请先退出重开', 'error')
@@ -3117,17 +3822,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({
@@ -3139,16 +3839,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
         })
       }
     }
@@ -3163,30 +3858,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
@@ -3265,23 +3988,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({
@@ -3290,41 +4011,42 @@ class Video extends Component {
     }
 
   };
+  handleOkPictureConfirm = () => {
+    this.pictureInPictureClick('add')
+    this.setState({isPictureConfirmModalVisible: false})
+  }
+  handleOkRecordConfirm = () => {
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
+    this.saveLog('Start business recording')
+    this.enableServerRecording(this.state.businessId)
+  }
   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
     })
@@ -3504,6 +4226,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')
@@ -3528,15 +4253,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) {
@@ -3696,6 +4418,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({
@@ -3794,6 +4517,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')
@@ -3804,15 +4530,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
     })
@@ -3837,15 +4560,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,
@@ -3956,15 +4676,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) {
@@ -4035,19 +4752,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) => {
@@ -4059,10 +4782,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 = ''
@@ -4210,6 +4933,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 = {};
@@ -4239,8 +4977,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
@@ -4251,20 +4991,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
@@ -4287,7 +5028,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,
@@ -4319,6 +5061,104 @@ 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);
+      });
+  }
+  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 = {};
+    const canvas = document.createElement('canvas');
+    const videoMedia = document.getElementById('recordvideo');
+    const cobj = canvas.getContext('2d'); // 获取绘图环境
+    const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
+    const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
+    const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+    const bottom = document.getElementById("whiteboardDIV").getBoundingClientRect().bottom
+    let width = ((right - left) * window.screen.width / document.body.clientWidth) - 5
+    let height = ((bottom - top) * window.screen.width / document.body.clientWidth) - 30
+    let x = (left * window.screen.width / document.body.clientWidth)
+    let y = (top * window.screen.width / document.body.clientWidth) + 8
+    // console.error(left, right, top, bottom)
+    // console.error(width,height,x,y)
+
+
+    canvas.width = 960;
+    canvas.height = 540;
+
+
+    videoMedia.addEventListener('play', (event) => {
+      var $this = this; //cache
+      console.log('addEventListener', !$this.paused, !$this.ended, x, y, width, height)
+      loop()
+      function loop() {
+        if (!$this.paused && !$this.ended) {
+          cobj.drawImage(videoMedia, x, y, width, height, 0, 0, 960, 540);
+          setTimeout(loop, 1000 / 20); // drawing at 30fps
+        }
+      }
+
+        publish_config.media_type = 3
+        publish_config.publish_device = 5
+        publish_config.need_volume_analyser = false
+        publish_config.video_profile_type = 1
+        publish_config.degradationType = 2
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.publish_video_id = 'record_video'
+        publish_config.publish_streamId_id = 'record_video_streamId'
+        publish_config.publish_tag = 'RM_ALL_SCREEN'
+        this.test_controller.Publish(publish_config)
+    }, 0);
+    navigator.mediaDevices.getDisplayMedia({
+      video: true,
+      preferCurrentTab: true,
+    })
+      .then((stream) => {
+        if (streamRecord) {
+          streamRecord.getTracks().forEach(track => track.stop());
+          streamRecord = ''
+        }
+        videoMedia.srcObject = stream;
+        stream.getVideoTracks()[0].applyConstraints({
+          // width: 1280,
+          // height: 720
+          width: window.screen.width,
+          height: window.screen.height
+        })
+
+        streamRecord = stream
+
+        stream.getVideoTracks()[0].onended = async () => {
+          //单击停止共享按钮后，触发这个事件
+          streamRecord = ''
+          if (document.getElementById('record_video').name) {
+            that.test_controller.UnPublish(document.getElementById('record_video').name)
+          }
+        }
       }, error => {
         console.log("Unable to acquire screen capture", error);
       });
@@ -4494,6 +5334,109 @@ class Video extends Component {
       this.test_controller.GetDevices()
     }
   }
+  toggleAsr = () => {
+    if (this.isFileSuccuse()) {
+      if (!this.state.isAsrStart){
+        this.startASR()
+      } else {
+        this.stopASR()
+      }
+    }
+  }
+  showEnvDetection = () => {
+    this.envDetection()
+    this.setState({
+      isModalVisibleEnvironment: true,
+    })
+  }
+  
+  envDetection = () => {
+    let self = this
+    let envInfo = {
+      batteryCharging: '未知', // 电池充电
+      batteryLevel: '未知', // 电池电量
+      networkStatus: '未知', // 网络状态 （已连接/未连接）
+      cameraResult: this.state.cameraList.length>0 ? '合格': '不合格', // 摄像头检测
+      microResult: this.state.microphoneList.length>0 ? '合格': '不合格', // 麦克风检测
+      lightResult: this.state.envInfo? this.state.envInfo.lightResult : '未知'
+    }
+     
+    if (navigator) {
+      // 电量检测
+      navigator.getBattery().then(function(battery) {
+        // console.log(battery)
+        // 是否正在充电，yes-充电
+        envInfo.batteryCharging = (battery.charging ? "正在充电" : "不在充电")
+        // 当前剩余电量
+        envInfo.batteryLevel =  battery.level * 100 + "%"
+        envInfo.batteryResult = (battery.charging )? '合格': '不合格'
+        self.setState({
+          envInfo: envInfo
+        })
+        battery.removeEventListener("chargingchange", self.envDetection);
+        battery.removeEventListener("levelchange", self.envDetection);
+        battery.addEventListener("chargingchange", self.envDetection);
+        battery.addEventListener("levelchange", self.envDetection);
+      });
+      
+      // 网络检测
+      envInfo.networkStatus = window.navigator.onLine? '已连接': '未连接'
+      envInfo.networkResult =  window.navigator.onLine? '合格': '不合格'
+      window.removeEventListener("offline", self.envDetection);
+      window.removeEventListener("online", self.envDetection);
+      window.addEventListener("offline", self.envDetection);
+      window.addEventListener("online", self.envDetection);
+      if (navigator.connection){
+        function setNetworkInfo() {
+          const { rtt, downlink, effectiveType, saveData } = navigator.connection;
+          // 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`
+            envInfo.networkResult =  downlink > 0.2? '合格': '不合格'
+          } 
+        }
+        setNetworkInfo()
+        navigator.connection.removeEventListener('change', self.envDetection);
+        navigator.connection.addEventListener('change', self.envDetection);
+      }
+      
+    }
+    
+    // 背景曝光环境检测
+    this.lightDetect()
+
+    this.setState({
+      // isModalVisibleEnvironment: true,
+      envInfo: envInfo
+    })
+  }
+  handleRetryEnvDetection = () => {
+    this.lightDetect();
+    message.success({
+      content: '已更新检测结果',
+      icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+      className: 'successClassName',
+      top: 200,
+      duration: 3
+    })
+  }
+  handleOkEnvDetection = () => {
+    this.setState({
+      isModalVisibleEnvironment: false,
+    })
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
+  }
+  // handleCancelEnvDetection = () => {
+  //   this.setState({
+  //     isModalVisibleEnvironment: false
+  //   })
+  // }
   handleOkInspection = () => {
     this.setState({
       isModalVisibleInspection: false,
@@ -4539,16 +5482,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")
@@ -4566,117 +5532,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
+      })
     }
 
   }
@@ -4685,14 +5615,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)
 
   }
@@ -4700,11 +5627,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()
@@ -4731,6 +5665,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) {
@@ -4751,6 +5696,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,
@@ -4765,6 +5716,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)
@@ -4865,8 +5819,10 @@ class Video extends Component {
 
             }))
           }
-
-
+          this.setState({
+            documentError: '',
+            isModalVisibleCustomer: false,
+          })
         }
       })
       // this.customerFaceClick(this.state.customerList[this.state.customerSelect])
@@ -5079,6 +6035,13 @@ class Video extends Component {
       </div>
     )
 
+    const isEnvironmentOK = !this.state.loading && 
+                            this.state.envInfo.networkResult=='合格' &&
+                            this.state.envInfo.batteryResult=='合格' &&
+                            this.state.envInfo.cameraResult=='合格' &&
+                            this.state.envInfo.microResult=='合格' &&
+                            this.state.envInfo.lightResult=='合格'
+
     const sectionStyle = this.state.tabTitles.length > 0 ? {
       zIndex: '-1',
       width: '100%',
@@ -5189,13 +6152,19 @@ class Video extends Component {
 
                         </ul>
                       </div>
-                      {!this.state.loading && this.state.sessionId?
-                      <QRCode
-                            style={{'position': 'absolute', 'right': '10px', 'top': '-110px'}}
-                            value={this.state.sessionId}  //value参数为生成二维码的链接
-                            size={100} //二维码的宽高尺寸
+                      {!this.state.loading && this.state.sessionType && this.state.sessionId && this.props.recordMode == 2?
+                      <div className='QRCode'>
+                        <QRCode
+                            value={JSON.stringify({
+                              sessionId:this.state.sessionId,
+                              staffId: this.props.tellerAccount,
+                              staffName: this.props.staffName
+                            })}  //value参数为生成二维码的链接
+                            size={110} //二维码的宽高尺寸
                             fgColor="#000000"  //二维码的颜色
-                      /> : null}
+                        />
+                        <div className='sessionDiv'>{this.state.sessionId.slice(0, 4)}-{this.state.sessionId.slice(4-this.state.sessionId.length)}</div>
+                      </div> : null}
                     </div>
                   }
 
@@ -5233,6 +6202,40 @@ class Video extends Component {
                   </div>
 
                 </div>
+                {/* {
+                  this.state.cameraList.map((item, index) => {
+                    if (index > 0) 
+                    return <div
+                    className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
+                  >
+                    <div className="publishVideoDiv">
+
+                      <video
+                        id={"publish_video" + (index+1)}
+                        className={`publishVideoClass`}
+                        autoPlay
+                        muted={true}
+                        disablePictureInPicture
+                      />
+                      <label style={{ display: 'none' }} id={"publish_streamId"+ (index+1)} type="text" />
+
+                      <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
+                        <div>
+                          {
+                            this.state.voiceStatue && <img
+                              alt=""
+                              src={require("../../assets/img/jingyin.png").default}
+                              className="voiceClass"
+                            />
+                          }
+                          <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClass"  id={"publish_volumeView"+ (index+1)} width="40" height="70"></canvas>
+                        </div>
+                        <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>{this.state.titleNameRm}</div>
+                      </div>
+                    </div>
+                  </div>
+                  })
+                } */}
                 {/* <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ position: "relative", display: (this.state.videoList[0].videoName) ? '' : 'none' }}
                 >
@@ -5281,7 +6284,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=""
@@ -5331,6 +6334,8 @@ class Video extends Component {
             ocrClick={this.ocrClick}
             switchExternal={this.switchExternal}
             inspection={this.inspection}
+            toggleAsr={this.toggleAsr}
+            envDetection={this.showEnvDetection}
             beautyClick={this.beautyClick}
             graffiti={this.graffiti}
             virtualization={this.virtualization}
@@ -5345,6 +6350,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'>
@@ -5352,7 +6374,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={[
@@ -5692,10 +6714,61 @@ class Video extends Component {
 
             </div>
           </Modal>
+          <Modal title="环境检测" maskClosable={false} width={650} closable={false} centered={true} visible={this.state.isModalVisibleEnvironment} footer={[
+            <div key='env'>
+              <Button className="modelButtonCancel" onClick={this.handleRetryEnvDetection}>重新检测</Button>
+              <Button className={isEnvironmentOK ?"modelButtonOk": "modelButtonNo"} type="primary" disabled={!isEnvironmentOK } danger onClick={this.handleOkEnvDetection}>确定</Button>
+            </div>
+          ]}>
+             <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} ghost>
+             
+              <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={<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={<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) => {
+                      return <div key={index} className="envClass">
+                          {/* <input type="radio" name="camere" value={item.actionid} style={{ float: 'left' }} checked={this.state.cameraValue == item.actionid} readOnly disabled /><i></i> */}
+                          {item.actionname}{this.state.cameraValue == item.actionid ? '（当前设备）' : ''}
+                      </div>
+                    })
+                  }
+                  {this.state.cameraList.length == 0 ? <p className="envClass">获取不到设备，请检查电脑“设置”中的摄像头权限是否开启，并重启浏览器再试</p> : null}
+                </div>
+              </Panel>
+              <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) => {
+                      return <div key={index} className="envClass">
+                          {item.actionname}{this.state.microphoneValue == item.actionid ? '（当前设备）' : ''}
+                      </div>
+                    })
+                  }
+                  {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>
           <video className="mixedvideo" id="manedvideo" autoPlay width="0" height="0"></video>
           <video className="mixedvideo" id="video30" autoPlay width="0" height="0"></video>
 
+          <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>);
@@ -5711,7 +6784,7 @@ Video.defaultProps = {
   callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
   // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws', 
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
-
+  asrServerUrl: 'wss://ismis.alipay.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   // resourcePath: 'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
   prohbiitPrompt: '当前无客户',
@@ -5721,18 +6794,33 @@ Video.defaultProps = {
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['BOARD', 'SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY', 'GRAFFITI', 'BACKGROUND'],
+  menus: ['BOARD', 'SHARE', 'FRIES', 'OCR', 'PAPER_OCR', 'INVITE', 'PIP', 'BEAUTY', 'GRAFFITI', 'BACKGROUND'],
   customLeaveRoom: '客户离开房间',
+  sensitiveWords: ['保本保息', '无风险'],
   meetingInfo: {
     title: '--',
     host: '--',
     customers: ['--'],
     otherAttendees: undefined
   },
+  pdfRendering: false,
   isTranscribing: false,
   shareMask: false,
   isOpenSound: false, // true开启进出音效   false不开启
+  isWeakSound: false,
+  whetherDetectFace: false, // 是否在双录时开启人脸检测
+  whetherDetectLight: false, // 是否在双录时开启背光检测
+  faceDetectInterval: 6, // 人脸检测间隔（秒）
+  lightDetectInterval: 6, // 背光检测间隔（秒）
   userSide: 2,
+  meetingDuration: null, // 会议时长，单位小时
+  recordMode: 1, // 录制模式 1远程录制 2网点录制
+  defaultBranchCode: "",// 员工网点缩写
+  customerId: "", //客户号
+  customerType: "", // 客户类型
+  salesBranchCode: "", //网点编号(分行号)
+  financialOffice: "", // 理财室
+  staffName: '', // 坐席名称
   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'
 }