react_hsbc_teller 2.0.2 → 2.0.4-6.1

package/packages/pages/video/video.jsx

@@ -4,11 +4,15 @@
 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 Recorder from "js-audio-recorder";
+import MyAsrController from '../../utils/asrController'
 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'
@@ -16,12 +20,18 @@ import cameraImgCloe from '../../assets/img/icon_cameraOne.png'
 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 joinMeeting from '../../assets/mp3/joinmeeting.mp3'
+import ipadjoinMeeting from '../../assets/mp3/ipad_join_meeting.mp3'
+import ipadLeaveMeeting from '../../assets/mp3/ipad_leave_meeting.mp3'
+import recordErrorAudio from '../../assets/mp3/record_error.mp3'
+import IpadLeaveAudio from '../../assets/mp3/ipad_leave_error.mp3';
+import IpadLowPowerAudio from '../../assets/mp3/ipad_low_power.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,29 +47,59 @@ 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';
 import { Button } from '../../../node_modules/antd/lib/index';
 import SignMy from '../sign/signMy.jsx'
 import Step from '../components/step/step.jsx'
+import MultiModule from '../multiModule/multiModule'//签字、抄录
 import axios from 'axios';
 import CryptoJS from "crypto-js";
+
+const SDK_VERISON = '2.0.46.1'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
+  TELLER_DISCONNECT: -2, // 坐席连接断开
+}
+const POINT_TYPE = {
+  tts: '文字转语音',
+  asr: '语音转文字',
+  ffd:	"人脸出框检测",
+  env:	"环境检测",
+  pipd:	"画中画显示、关闭",
+  pwd:	"违禁词检测",
+  wnd:	"弱网",
+  mute:  "静音",
+  expDark: '曝光、背光',
+  fcd: '人脸变化检测',
+  padConnected: 'ipad已连接'
 }
+const RECORD_DEVICE_NAME = 'screen-capture-recorder'
+// const RECORD_DEVICE_NAME = 'Full HD webcam'
+const IPAD_SUFFIX = '_ipad'
+const H5_SUFFIX = '_h5'
+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 videoMessageMap = new Map() // 画中画消息数据
+let third_id_Map = new Map()
 // let beautyType = false
 // let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
@@ -69,6 +109,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};
@@ -102,6 +144,7 @@ function clearStreamRemain() {
     beautyDiv.beauty_canvas = null;
   }
   if (!(beautyDiv.beauty_player == null || beautyDiv.beauty_player == undefined)) {
+    console.log('beautyDiv destroy')
     beautyDiv.beauty_player.destroy();
     beautyDiv.beauty_player = null;
   }
@@ -114,7 +157,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 +173,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 +216,7 @@ class Video extends Component {
   }
   cancel = axios.CancelToken.source()
   state = {
+    ablePlayNetweakAudio: true,
     beautyType: false,
     beautyName: '开启美颜',
     signNoClick: false,
@@ -201,6 +249,8 @@ class Video extends Component {
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
+    isPictureConfirmModalVisible:false,
+    isDisconnectModalVisible: false,
     screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
@@ -240,14 +290,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 +338,8 @@ class Video extends Component {
     cardFailReason: '',
     videoType: '',
     certificateValidityType: true,
+    drawCanvasInterval: null,
+    faceDetectionTimer: null, // 人脸检测定时器
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -295,7 +347,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.2&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 +367,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,32 +384,31 @@ class Video extends Component {
       console.log(result);
       this.state.imRoomId = result.imRoomId,
         this.state.sessionId = result.sessionId;
+        window.imRoom.sessionId = result.sessionId;
+
+      let publish_config = {}
+      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 = 3
+      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'
+      if (this.props.recordMode == 2) {
+        // 分行模式，只收音 不发布摄像头
+        publish_config.media_type = 2
+        // publish_config.publish_streamId_id = 'publish_video1'
+      }
+      this.test_controller.Publish(publish_config)
+  
+      // this.publishAllScreen();
+      // 单独发布录制屏幕设备的流
+      // this.publishRecorderDevice()
 
-      this.state.cameraList.forEach((el, i) => {
-        let publish_config = {}
-        publish_config.media_type = i==0? 1:3
-        publish_config.publish_device = 1
-        publish_config.videoSource = el.actionid
-        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 }
-        publish_config.publish_video_id = 'publish_video' + (i+1)
-        publish_config.publish_streamId_id = 'publish_streamId'  + (i+1)
-        publish_config.publish_tag = 'tag' + (i+1)
-        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.props.createRoomCallback({
         type: 1,
         errorManage: '',
@@ -438,9 +497,16 @@ class Video extends Component {
       // let result = await API.mpaasSig({account: data.account, type: data.type});
       console.log('mpaasSig', result, result.mpsSig);
       window.sessionStorage.setItem('alimpassSig', result.mpsSig);
-      this.state.workSpaceId = result.workspaceId,
-        this.state.appId = result.appId,
+      this.state.workSpaceId = result.workspaceId
+        this.state.appId = result.appId
         this.state.bizName = result.bizName
+
+      //asr初始化
+      this.state.asrAppKey = this.props.asrAppKey || result.asrAppKey
+      this.state.asrServerUrl = this.props.asrServerUrl || result.asrServerUrl
+      this.state.asrToken = this.props.asrToken || result.asrToken
+      this.initAsrRecorder()
+
       window.sessionStorage.setItem('sigData', JSON.stringify(result));
       if (data.sigType == 1) {
         this.handleEdit()
@@ -459,11 +525,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;
@@ -472,7 +533,7 @@ class Video extends Component {
     config_param.sign = window.sessionStorage.getItem('alimpassSig')
     config_param.room_server_url = this.props.roomServerUrl;
     // 允许最大断网时间 (超过未重连, 直接关闭)
-    config_param.network_check_timeout = 10000;
+    config_param.network_check_timeout = 1200000; // sdk默认120秒。wpb要求一直重连，设定20分钟
     this.test_controller.Connect(config_param)
     this.saveLog('mrtc connect start')
   };
@@ -491,57 +552,56 @@ class Video extends Component {
         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'
-      }
+      // {
+      //   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 = ''
@@ -558,17 +618,18 @@ class Video extends Component {
     }
   }
   // 开启录制
-  enableServerRecording = () => {
+  enableServerRecording = (record_business_id) => {
     const that = this
+    const SCALE = 1.5
     this.rateAll().then((res) => {
-      console.log('退出房间者', res)
+      console.log('开启录制', res)
       let list = [
         {
           tag: 'projectionWhiteboard',
           xPosition: 0,
-          yPosition: 175,
-          width: 960,
-          height: 540
+          yPosition: 175 * SCALE,
+          width: 1280,
+          height: 720
         },
         // {
         //   tag: 'VIDEO_SOURCE_SCREEN_ONE',
@@ -588,68 +649,75 @@ class Video extends Component {
           tag: 'tag1',
           xPosition: 0,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
         {
-          tag: 'tag2',
-          xPosition: 213,
+          tag: 'customer1',
+          xPosition: 213 * SCALE,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
         {
-          tag: 'tag3',
-          xPosition: 426,
+          tag: 'customer2',
+          xPosition: 426 * SCALE,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
         {
-          tag: 'customer1',
-          xPosition: 639,
+          tag: 'customer3',
+          xPosition: 639 * SCALE,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
         {
-          tag: 'customer2',
-          xPosition: 852,
+          tag: 'customer4',
+          xPosition: 852 * SCALE,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
         {
-          tag: 'customer3',
-          xPosition: 1065,
+          tag: 'customer5',
+          xPosition: 1065 * SCALE,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
         {
-          tag: 'customer4',
-          xPosition: 1278,
+          tag: 'customer6',
+          xPosition: 1278 * SCALE,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 213 * SCALE,
+          height: 175 * SCALE
         },
+        // {
+        //   tag: 'sharedScreen', // 一期暂时不需要录制
+        //   xPosition: 960 * SCALE,
+        //   yPosition: 180 * SCALE,
+        //   width: 320 * SCALE,
+        //   height: 180 * SCALE
+        // }
       ]
       Array.isArray(res) ?
         res.map((item) => {
           list.push({
             tag: item.tag,
-            xPosition: item.xaxis,
-            yPosition: item.yaxis,
-            width: item.width,
-            height: item.height
+            xPosition: (item.xaxis * SCALE),
+            yPosition: (item.yaxis * SCALE),
+            width: (item.width * SCALE),
+            height: (item.height * SCALE)
           })
         }) :
         list.push({
           tag: 'VIDEO_SOURCE_SCREEN',
-          xPosition: 960,
-          yPosition: 535,
-          width: 320,
-          height: 180
+          xPosition: 960 * SCALE,
+          yPosition: 535 * SCALE,
+          width: 320 * SCALE,
+          height: 180 * SCALE
         })
       // list.push({
       //   tag: 'VIDEO_SOURCE_SCREEN_19_9',
@@ -660,33 +728,98 @@ class Video extends Component {
       // })
       const filePath = 'recordId_' + new Date().valueOf();
       const recordParam = {};
-      recordParam.width = 1280;
-      recordParam.height = 720;
+      recordParam.width = 1280 * SCALE;
+      recordParam.height = 720 * SCALE;
       recordParam.recordTotalStream = 0;
       recordParam.startTimeout = 10;
       recordParam.splitType = 0;
       recordParam.endType = 1;
       recordParam.crf = 26
       recordParam.overlaps = [
+        {
+          tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+          type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+          id: 2, // ⽔印 ID
+          enable: true,
+          xPosition: 16 * SCALE, // x 轴位置
+          yPosition: 8 * SCALE, // y 轴位置
+          text: `${this.props.recordMode ==1 ?'远程录制' :'网点录制'} ${this.state.salesBranchCode || ''} ${this.state.branchName || ''} ${this.state.financialOffice || ''}`,
+          fontSize: 16 * SCALE, // 字体⼤⼩
+          url: '' // ⽔印图⽚ HTTP 地址
+        },
         {
           tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
           type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
           id: 1, // ⽔印 ID
           enable: true,
-          xPosition: 1000, // x 轴位置
-          yPosition: 10, // y 轴位置
+          xPosition: 1080 * SCALE, // x 轴位置
+          yPosition: 10 * SCALE, // y 轴位置
           text: '', // ⽔印⽂字
-          fontSize: 16, // 字体⼤⼩
+          fontSize: 16 * SCALE, // 字体⼤⼩
           url: '' // ⽔印图⽚ HTTP 地址
         },
       ];
       recordParam.tagPositions = list
       console.log('recordParam', recordParam);
-      that.test_controller.StartRemoteRecord(filePath, recordParam, '')
+      that.test_controller.StartRemoteRecord(filePath, recordParam, record_business_id)
 
     })
 
   };
+  // 开启ipad录制
+  enableIpadRecording = (record_business_id) => {
+    const that = this
+    const filePath = 'recordId_' + new Date().valueOf() + '_ipad';
+      const recordParam = {};
+      recordParam.width = 1280;
+      recordParam.height = 720;
+      recordParam.recordTotalStream = 0;
+      recordParam.startTimeout = 10;
+      recordParam.splitType = 0;
+      recordParam.endType = 1;
+      recordParam.crf = 26
+      recordParam.overlaps = [
+        {
+          tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+          type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+          id: 2, // ⽔印 ID
+          enable: true,
+          xPosition: 16, // x 轴位置
+          yPosition: 8, // y 轴位置
+          text: `${this.props.recordMode ==1 ?'远程录制' :'网点录制'} ${this.state.salesBranchCode || ''} ${this.state.branchName || ''} ${this.state.financialOffice || ''}`,
+          fontSize: 16, // 字体⼤⼩
+          url: '' // ⽔印图⽚ HTTP 地址
+        },
+        {
+          tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
+          type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
+          id: 1, // ⽔印 ID
+          enable: true,
+          xPosition: 1080, // x 轴位置
+          yPosition: 10, // y 轴位置
+          text: '', // ⽔印⽂字
+          fontSize: 16, // 字体⼤⼩
+          url: '' // ⽔印图⽚ HTTP 地址
+        },
+      ];
+      recordParam.tagPositions = [{
+        tag: that.state.ipadTag,
+        xPosition: 0,
+        yPosition: 0,
+        width: 1280,
+        height: 720
+      },{
+        tag: 'tag1',
+        xPosition: 0,
+        yPosition: 0,
+        width: 0,
+        height: 0
+      }]
+      // recordParam.tagFilter = that.state.ipadTag
+      // recordParam.layoutParam = [that.state.ipadTag, 'tag1'];
+      console.log('recordParam', recordParam);
+      that.test_controller.StartRemoteRecord(filePath, recordParam, record_business_id+'_ipad')
+  };
   // 结束会话
   endSession = value => {
     if (value == 'customerHangUp') {
@@ -698,6 +831,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) {
@@ -885,49 +1027,77 @@ class Video extends Component {
       this.messageClick('当前暂无客户', 'error')
     }
   }
-  messageClick = (value, valueOne) => {
-    console.log(value, valueOne)
-    if (messageValue != value) {
-      messageValue = value
-      dateTime = new Date().getTime()
-      if (valueOne == 'error') {
+  messageClick = (value, tipType, userId) => {
+    console.log('messageClick', value, tipType)
+
+    if (userId) {
+      // 画中画实时消息
+      this.addPictureMessage(value, userId)
+    }
+    const intervalSec = 5 // 相同提示触发间隔
+    const durationSec = 4.5 // 提示持续时间
+    if (messageValueMap.get(value) == undefined) {
+      // map中没有相同消息
+      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
         })
       }
-    } else if (((new Date().getTime()) - dateTime) / 1000 > 30) {
-      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
-        })
+      if (!userId) {
+        // 坐席消息
+        messageValue = value
+
+        clearTimeout(this.messageClearTimer)
+        this.messageClearTimer = setTimeout(() => {
+          messageValue = ''
+        }, durationSec * 1000);
+      } 
+    }
+  }
+  // 画中画内消息
+  addPictureMessage = (value, userId) => {
+    console.log('addPictureMessage', value, userId)
+    
+    const intervalSec = 5 // 相同提示触发间隔
+    const durationSec = 4.5 // 提示持续时间
+    let mapItem = videoMessageMap.get(userId)
+    if (!mapItem) {
+      mapItem = {
+        messageValue: value,
+        clearTimer: null,
+        valueMap: new Map()
       }
     }
-
+    const valueMap = mapItem.valueMap
+    if (valueMap.get(value) == undefined) {
+      // map中没有相同消息
+      valueMap.set(value, setTimeout(() => {
+        valueMap.delete(value) 
+      }, intervalSec * 1000))
+
+      mapItem.messageValue = value
+      clearTimeout(mapItem.clearTimer)
+      mapItem.clearTimer = setTimeout(() => {
+        mapItem.messageValue = ''
+      }, durationSec * 1000)
+      videoMessageMap.set(userId, mapItem)
+    }
   }
   // 人脸识别
   facialRecognition = () => {
@@ -939,6 +1109,112 @@ 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 = (streamInfo) => {
+    return new Promise((resolve, reject) => {
+      const Total_Detect_Number = 3; // 触发弱网回调后，再连续检测3次
+      let detectionsNumber = Total_Detect_Number;
+    let finalResult = true
+    let setTimer = () => {
+      setTimeout(() => {
+        this.test_controller.GetStats(streamInfo || this.mediaInfo).then(media_stat => {
+          if (detectionsNumber> Total_Detect_Number-1) {
+            // 不考虑第一次的评估结果，重新计算码率（因为刚触发弱网时的获取的码率总是非常大，原因不明）
+            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 = 0.20;
+          // let weak_ssrcAudioSendLostRate = 0.20;
+          let weak_str = "网络正常";
+          if (googAvailableSendBandwidth < weak_googAvailableSendBandwidth) {
+            weak_str = "当前网络不佳";
+          }
+          let bpsSend = (media_stat.ssrcVideoSend["bpsSend"] / 1000).toFixed(2)
+          let bpsAudioSend = (media_stat.ssrcAudioSend["bpsSend"] / 1000).toFixed(2)
+          let fps = media_stat["ssrcVideoSend"].googFrameRateSent
+          let str =
+            "带宽评估:" + (googAvailableSendBandwidth == undefined ? "none" : googAvailableSendBandwidth + "kbps") + "; "
+            + "视频码率:" + bpsSend + "kb" + "; "
+            + "音频码率:" + bpsAudioSend + "kb" + "; "
+            + "视频丢包率:" + (ssrcVideoSendLostRate == undefined ? "none" : ssrcVideoSendLostRate + "%") + "; "
+            + "音频丢包率:" + (ssrcAudioSendLostRate == undefined ? "none" : ssrcAudioSendLostRate + "%") + "; "
+            + weak_str + "; "
+            + "当前编码格式:" + media_stat["ssrcVideoSend"].googCodecName + "; "
+            + "分辨率:" + media_stat["ssrcVideoSend"].resolution + "; "
+            + "帧率:" + fps + '; ' 
+            + "源帧率:" + media_stat["ssrcVideoSend"].googFrameRateInput;
+            console.log('弱网', str)
+
+          let bpsResult = (bpsSend && bpsSend < 200 ) || (bpsAudioSend && bpsAudioSend < 200 )
+          // 码率和带宽评估均低于200 
+          let result =  bpsResult && (!googAvailableSendBandwidth || googAvailableSendBandwidth < weak_googAvailableSendBandwidth)
+
+          if (fps !== undefined) {
+            // 丢包率>=10 或者帧率 <= 5
+            let videoResult = (Number(ssrcVideoSendLostRate) >= 0.1 ) || fps <= 5
+            console.log('丢包及帧率不满足', ssrcVideoSendLostRate, fps, videoResult)
+            result = videoResult || result
+          }
+          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
@@ -954,6 +1230,10 @@ class Video extends Component {
       streamShare.getTracks().forEach(track => track.stop());
       streamShare = ''
     }
+    if (streamRecord) {
+      streamRecord.getTracks().forEach(track => track.stop());
+      streamRecord = ''
+    }
     this.finishSession()
 
   };
@@ -990,14 +1270,15 @@ 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,
+            userId: sortedlist[i-1].userId,
+          })
+        }
     }
     console.log(list)
     this.state.listVideoPicture = list
@@ -1029,11 +1310,18 @@ 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;
+      if (this.state.listVideoPicture.length == 0) {
+        // 画中画设置最小高度，避免没有人时 宽度被拉得很大
+        canvas.height = 360 + baseStartHeight
+      }
       for (let i = 0; i < this.state.listVideoPicture.length; i++) {
 
         let videoId = this.state.listVideoPicture[i].name;
@@ -1049,15 +1337,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();
@@ -1075,12 +1363,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';
@@ -1088,8 +1376,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';
@@ -1097,8 +1385,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';
@@ -1107,8 +1395,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';
@@ -1118,10 +1406,11 @@ class Video extends Component {
         let microphoneSize = 50
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
+        if (!this.state.listVideoPicture[i].title.includes(IPAD_SUFFIX)) {
         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
@@ -1138,9 +1427,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,
               }
 
 
@@ -1164,12 +1453,74 @@ class Video extends Component {
               // requestAnimationFrame(aou.bind(this, analyser)) 
             )
           }
+        }
+        }
 
-
-
+        // 绘制消息
+        if (videoMessageMap.get(this.state.listVideoPicture[i].userId)) {
+          let str = videoMessageMap.get(this.state.listVideoPicture[i].userId).messageValue
+          if (str) {
+            cobj.fillStyle = '#F8F2F3';
+            cobj.font = "normal lighter 30px sans-serif";
+            // const textWidth = Math.min(cobj.measureText(str).width, 610)
+            const startY = 360 * i + baseStartHeight
+            cobj.fillRect(0, startY, 640, messageBoxHeight)
+            cobj.textAlign = 'center';
+            cobj.strokeStyle = 'black';
+            cobj.lineWidth = 2
+            cobj.strokeText(str, 320, startY + messageBoxHeight - 15);
+            cobj.stroke();
+          }
         }
 
       }
+      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();
@@ -1182,17 +1533,37 @@ class Video extends Component {
 
     pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
       //可获取画中画窗口的一些数据，如宽高等
+      console.log('开启画中画')
       pictureInPictureVideo.style.display = 'block';
       pictureInPictureVideo.play();
       this.state.isPictureInPicture = true
+      clearTimeout(this.loopPlayTimer)
     });
 
     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.loopPlayTimer)
+      // 画中画循环播放逻辑
+      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_streamId1")){
+            let audio = new Audio(PIPictureClosedAudio)
+            audio.play()
+            this.loopPlayTimer = setTimeout(this.loopPlay, 3000);
+          }
+        }
+        setTimeout(this.loopPlay, 0);
+      }
     });
 
   }
@@ -1260,9 +1631,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) {
         // 进行初始化操作
@@ -1295,6 +1665,7 @@ class Video extends Component {
           }, ()=>{
             this.pictureInPicture('Refresh')
           })
+          this.messageClick('客户切换其他软件', 'error', Mival.data.userId)
         }
       }
       else if (Mival.typeId == 3003) { // app进入前台
@@ -1311,6 +1682,80 @@ class Video extends Component {
           })
         }
       }
+      else if (Mival.typeId == 5001) { // 客户端离框
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          if (Mival.data.userId.includes(IPAD_SUFFIX)) {
+            TITLE = ''
+          } else {
+            TITLE = this.getUserTitle(Mival.data.userId)
+          }
+        }
+        this.messageClick(TITLE+'人脸已离框', 'error', Mival.data.userId)
+        // this.saveVideoPoint('ffd', '客户人脸离框');
+      }
+      else if (Mival.typeId == 5002) { // 客户端背光
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          if (Mival.data.userId.includes(IPAD_SUFFIX)) {
+            TITLE = ''
+          } else {
+            TITLE = this.getUserTitle(Mival.data.userId)
+          }
+        }
+        this.messageClick(TITLE+'背光、曝光过度', 'error', Mival.data.userId)
+        // this.saveVideoPoint('env', '客户端背光、曝光过度');
+      }
+      else if (Mival.typeId == 5003) { // 客户端弱网
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          if (Mival.data.userId.includes(IPAD_SUFFIX)) {
+            TITLE = 'iPad'
+          } else {
+            TITLE = this.getUserTitle(Mival.data.userId)
+          }
+        }
+        this.messageClick(TITLE+'当前网络较弱', 'error', Mival.data.userId)
+        // this.saveVideoPoint('wnd', '客户端弱网');
+      }
+      else if (Mival.typeId == 5004) { // ipad低电量
+        this.messageClick('iPad电量过低', 'error', Mival.data.userId)
+        
+        this.setState({
+          ipadLowPowerErrorModalVisible: true,
+        })
+        // 循环播放ipad低电量
+        clearTimeout(this.ipadLowPowerPlayTimer)
+        this.ipadLowPowerPlay = () => {
+          if(this.state.ipadLowPowerErrorModalVisible){
+            if (this.lowPowerAudio) this.lowPowerAudio.pause()
+            this.lowPowerAudio = new Audio(IpadLowPowerAudio)
+            this.lowPowerAudio.play()
+            this.ipadLowPowerPlayTimer = setTimeout(this.ipadLowPowerPlay, 3000);
+          }
+        }
+        setTimeout(this.ipadLowPowerPlay, 0);
+      }
+      else if (Mival.typeId == 5005) { // 客户端人脸数量变化
+        let TITLE = '客户'
+        if (Mival.data && Mival.data.userId) {
+          if (Mival.data.userId.includes(IPAD_SUFFIX)) {
+            TITLE = ''
+          } else {
+            TITLE = this.getUserTitle(Mival.data.userId)
+          }
+        }
+        this.messageClick(TITLE+'人脸数量发生变化', 'error', Mival.data.userId)
+      }
+      else if (Mival.typeId == 5006) { // 内网pib检测到敏感词
+        this.messageClick(Mival.content, 'error', Mival.data.userId)
+      }
+      else if (Mival.typeId == 5007) { // ipad充电状态
+        if (Mival.type == '1') { // 1充电 2不在充电
+          this.setState({ ipadLowPowerErrorModalVisible: false})
+          clearTimeout(this.ipadLowPowerPlayTimer)
+        } 
+      }
       else if (Mival.typeId == 1220) {
         // 一炒多的图片  1214
         if (Mival.sessionId == this.state.sessionId) {
@@ -1341,6 +1786,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());
@@ -1353,7 +1801,10 @@ class Video extends Component {
               })
             } else {
               if (document.getElementById('video20').name) {
+                this.saveLog('unPublish share, reason: receive stop whiteboard message 1218')
+                console.log('unPublish share, reason: receive stop whiteboard message 1218')
                 this.test_controller.UnPublish(document.getElementById('video20').name)
+                if(this.state.drawCanvasInterval) clearInterval(this.state.drawCanvasInterval)
               }
               this.setState({
                 isWhiteboard: false
@@ -1364,6 +1815,13 @@ class Video extends Component {
 
         }
 
+      } else if (Mival.typeId == 1219) {
+        // 传入分行信息
+        if (Mival.sessionId == this.state.sessionId && this.props.recordMode == 2) {
+          this.state.salesBranchCode = Mival.salesBranchCode;
+          this.state.financialOffice = Mival.financialOffice;
+          this.state.branchName = Mival.salesBranchName;
+        }
       } else if (Mival.typeId == 3100) {
         if(Mival.data.sessionId == this.state.sessionId) {
           muteJson.set(Mival.data.userId, JSON.stringify(Mival)) 
@@ -1384,6 +1842,27 @@ class Video extends Component {
                 
               }
           }
+          if (this.state.isPictureInPicture) {
+            this.pictureInPicture('Refresh')
+          }
+        }
+      } else if (Mival.typeId == 1214) {
+        if (Mival.sessionId == this.state.sessionId) {
+          this.setState({
+            moduleData: Mival,
+            isBackdrop: false
+          }, ()=>{
+            this.showModal('copy')
+          })
+        }
+      } else if (Mival.typeId == 1213) {
+        if (Mival.sessionId == this.state.sessionId) {
+          this.setState({
+            moduleData: Mival,
+            isBackdrop: false
+          }, ()=>{
+            this.showModal('subscribe') 
+          })
         }
       } else if (Mival.typeId == 121305) {
         if (Mival.sessionId == this.state.sessionId) {
@@ -1419,33 +1898,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) {
@@ -1459,37 +1930,194 @@ 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.recordLoopPlayTimer)
+        // 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()
+        //     this.recordLoopPlayTimer = 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.state.ipadTag) this.enableIpadRecording(Mival.id)
+
+          if (this.props.whetherDetectFace && this.props.recordMode != 2){
+            this.startFaceDetection();
+          }
+          if (this.props.whetherDetectLight && this.props.recordMode != 2){
+            this.startImageDetection();
+          }
+          if (this.props.whetherNeedAsr) {
+            this.startASR();
+          }
+        } else if (Mival.status == 2) {
+          // 关闭了业务录制
+          console.log('业务录制关闭', this.state.businessRecordId)
+          this.saveLog('Stop business recording')
+          this.test_controller.StopRemoteRecord(this.state.businessRecordId)
+          if (this.state.ipadRecordId) this.test_controller.StopRemoteRecord(this.state.ipadRecordId)
+
+          this.state.businessId = '';
+          clearInterval(this.state.faceDetectionTimer);
+          clearInterval(this.state.imageDetectionTimer);
+          if(this.state.isAsrStart) this.stopASR();
         }
+      } 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, this.props.lightSensitivity)
+        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, this.props.lightSensitivity)
+          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, prohibitedWords) => {
+    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',
+        prohibitedWords,
+        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',
@@ -1585,21 +2213,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)
@@ -1619,6 +2260,7 @@ class Video extends Component {
       this.state.sessionType = false
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头', 'error')
       this.roomCallBack(2, '获取设备失败', 1)
+      this.showEnvDetection()
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -1667,6 +2309,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) => {
@@ -1687,13 +2333,19 @@ class Video extends Component {
     };
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
-      console.log(code, sid)
+      console.log('OnMediaClose',code, sid)
       if (code == 5003 || code == 5004 || code == 5005 || code == 5007 || code == 5009 || code == 5010 || code == 5011 || code == 5012) {
-        if (sid == document.getElementById('publish_video1').name) {
+        if (sid == this.state.publishSid) {
           this.saveLog('Audio and video close notification，' + code)
           this.roomCallBack(2, '音视频异常关闭', 8)
-        } else {
+        } else if (sid == this.state.publishScreenSid) {
           this.state.isScreenSwitching = false
+          this.setSharedScreenState(false)
+          if (code == 5012) {
+            this.saveLog('Manual cancel share'); // 点了取消，拒绝系统授权
+          } else {
+            this.saveLog('System error stop share, code=' + code);
+          }
         }
       }
     };
@@ -1701,24 +2353,38 @@ class Video extends Component {
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
 
-      this.state.cameraList.forEach((el, i) => {
-        let publish_config = {}
-        publish_config.media_type = i==0? 1:3
-        publish_config.publish_device = 1
-        publish_config.videoSource = el.actionid
-        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 }
-        publish_config.publish_video_id = 'publish_video' + (i+1)
-        publish_config.publish_streamId_id = 'publish_streamId'  + (i+1)
-        publish_config.publish_tag = 'tag' + (i+1)
-        this.test_controller.Publish(publish_config)
-      })
+      let publish_config = {}
+      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 = 3
+      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'
+      if (this.props.recordMode == 2) {
+        // 分行模式，只收音 不发布摄像头
+        publish_config.media_type = 2
+        // publish_config.publish_streamId_id = 'publish_video1'
+      }
+      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.setSharedScreenState(false) 
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
@@ -1733,12 +2399,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 = {
@@ -1749,71 +2412,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}`);
@@ -1829,28 +2445,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);
@@ -1871,11 +2472,30 @@ class Video extends Component {
         return newStream
       }
 
-      if (publish_tag == 'projectionWhiteboard' && publish_device == 2) {
-        // this.graffiti()
-        console.log('projectionWhiteboard', stream)
+      if (publish_tag == 'projectionWhiteboard' && (publish_device == 2 || publish_device == 5)) {
         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')
+            } else if (stream.getVideoTracks()[0] instanceof CanvasCaptureMediaStreamTrack){
+              console.log('白板共享')
+              this.saveLog('Share type = whiteboard')
+            }
+          } catch (err) {
+            console.log('不支持此浏览器记录投屏类型日志')
+            console.log(navigator.userAgent)
+            console.log(err)
+          }
           if (this.state.operateShow) {
             await startMix(newStream1, 'mix');
 
@@ -1887,9 +2507,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 () {
@@ -1905,60 +2528,64 @@ 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
-          })
-        });
+        this.state.publishScreenSid = document.getElementById('video20').name
+        this.setSharedScreenState(true)
+        this.saveLog('Share success')
+        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
         }
+        this.videoInfo = this.generateMediaInfo(document.getElementById("video20").name);
       }
-      if (sid == document.getElementById('publish_video1').name) {
-
+      if (sid == document.getElementById('publish_streamId1').name) {
+        this.state.publishSid = document.getElementById('publish_streamId1').name
         this.setState({
 
           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_streamId1").name);
+
       } else {
         var box = document.getElementById("whiteboardDIV");
         var box1 = document.getElementById("operate")
@@ -1980,11 +2607,13 @@ class Video extends Component {
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       this.saveLog('mrtc OnPublishFailed 发布失败, code=' + err_code)
       console.log('Publishing media stream failed，', sid, err_code, err_msg)
-      if (sid == document.getElementById('publish_video1').name) {
+      if (sid == document.getElementById('publish_streamId1').name) {
         this.state.sessionType = false
         this.roomCallBack(2, '发布失败', 4)
       } else {
         this.messageClick('投屏失败请重新投屏', 'error')
+        this.setSharedScreenState(false)
+        this.saveLog('Share fail, code=' + err_code)
       }
 
     };
@@ -2033,6 +2662,14 @@ 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
+              }
+              if (itemOne.mediaSource == 'VIDEO_SOURCE_CAMERA' && item.uid.includes(IPAD_SUFFIX)) {
+                this.state.ipadTag = itemOne.tag;
+                console.log('ipadTag:', itemOne.tag)
+              }
               let array = this.state.roomCustomerList;
               let newArray = [...array];
               newArray.push({
@@ -2048,8 +2685,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
                 }
 
@@ -2063,8 +2698,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
                 }
 
@@ -2080,7 +2713,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
                       }
@@ -2093,6 +2725,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'
 
               }
             })
@@ -2105,27 +2738,34 @@ class Video extends Component {
       console.log('新加⼊房间者', participant);
       this.saveLog('mrtc someone joined room, userId=' + participant)
       this.state.isCustomer = true
+
+      if (participant.includes(IPAD_SUFFIX) && this.state.businessId){
+        this.saveVideoPoint('padConnected', 'ipad已连接');
+      }
+      if (participant.includes(H5_SUFFIX)){
+        this.messageClick('客户端已就绪，可进行签署', 'error')
+        if (typeof this.props.h5JoinCallback === 'function'){
+          this.props.h5JoinCallback()
+        }
+      }
     };
     // 推送“有新发布”给与会者
     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': {
@@ -2134,9 +2774,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;
@@ -2155,8 +2792,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
           }
 
@@ -2176,8 +2811,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
           }
 
@@ -2199,7 +2832,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
                 }
@@ -2214,6 +2846,15 @@ class Video extends Component {
         }
 
       }
+
+      // 记录ipad摄像头流，需要单独开启录制
+      if (feed.mediaSource == 'VIDEO_SOURCE_CAMERA' && feed.uid.includes(IPAD_SUFFIX)) {
+        this.state.ipadTag = feed.tag;
+        // 如果已经开启了业务录制且ipad未在录制，立即开启ipad录制（ipad后加入）
+        if (this.state.businessId && !this.state.ipadRecordId) {
+          this.enableIpadRecording(this.state.businessId)
+        } 
+      }
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -2221,18 +2862,17 @@ 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({
+      console.log('取消发布成功', sid, document.getElementById('publish_streamId1').name)
+      if (document.getElementById('publish_streamId1').name && sid != document.getElementById('publish_streamId1').name) {
+        this.sendMessage({
             'typeId': 2030,
             'sessionId': this.state.sessionId,
             'sharedScreen': 0,
             'tellerId': this.props.tellerAccount
-          })
         })
         this.state.isSharedScreen = false
+        this.setSharedScreenState(false)
+        this.saveLog('Stop share')
         this.setState({
 
           screenName: '共享模式'
@@ -2243,7 +2883,8 @@ class Video extends Component {
         // }
 
       }
-      if (sid == document.getElementById('publish_video1').name || !document.getElementById('publish_video1').name) {
+      if (sid == document.getElementById('publish_streamId1').name || !document.getElementById('publish_streamId1').name) {
+        console.log('OnUnPublishSucc clearStreamRemain!!!')
         clearStreamRemain()
       }
     };
@@ -2317,6 +2958,15 @@ class Video extends Component {
       }
 
       console.log('退出房间回调', leaveType);
+      // if (leaveType != 1) {
+      //   this.props.onLeaveRoom({
+      //     code: LEAVE_TYPE.TELLER_DISCONNECT,
+      //     errMsg: '坐席断开连接'
+      //   })
+      //   this.setState({
+      //     isDisconnectModalVisible: true
+      //   })
+      // }
     };
     // 推送“退出房间者”给与会者
     this.test_controller.OnParticipantLeaveRoom = (
@@ -2329,13 +2979,48 @@ class Video extends Component {
       //   let audio = new Audio(src)
       //   audio.play()
       // }
+      if (participant.includes('UnHint')){
+        console.log('过滤掉的uid', participant)
+        return
+      }
+
+      if (participant.includes(IPAD_SUFFIX) && this.state.businessId){
+        // ipad单独处理，双录过程中ipad如果离开，要提示+循环播报直到ipad重新入会
+        this.setState({
+          IpadLeaveErrorModalVisible: true,
+          ipadTag: '',
+        })
+        // 循环播放ipad退出语音
+        clearTimeout(this.ipadLeavePlayTimer)
+        this.ipadLeavePlay = () => {
+          if(!this.state.ipadTag && document.getElementById("publish_streamId1")){
+            let audio = new Audio(IpadLeaveAudio)
+            audio.play()
+            this.ipadLeavePlayTimer = setTimeout(this.ipadLeavePlay, 3000);
+          }
+        }
+        setTimeout(this.ipadLeavePlay, 0);
+        return
+      } else if (participant.includes(IPAD_SUFFIX)) {
+        // 非双录下ipad离开提示iPad已断开
+        this.setState({
+          ipadTag: '',
+        })
+        this.messageClick(('iPad 已断开'), 'error')
+        this.saveLog('iPad leave room')
+        if (this.props.isOpenSound && !this.state.businessId) {
+          let audio = new Audio(ipadLeaveMeeting)
+          audio.play()
+        }
+        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--客户
@@ -2348,12 +3033,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 : '客户'
@@ -2365,45 +3052,126 @@ 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')
+      if (sid == document.getElementById('publish_streamId1').name || sid == document.getElementById('video20').name) {
+        const stream = sid == document.getElementById('publish_streamId1').name ? this.mediaInfo : this.videoInfo
+        
+        this.detectNetworkWeak(stream).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 if (String(record_third_id).includes('_ipad')){
+        this.state.ipadRecordId = record_id
+        const busId = Number(record_third_id.split('_')[0])
+        this.ipadRecordCallback('1', true, busId)
+        this.saveLog('mrtc OnStartIpadRecordSucc')
+      } 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 if (String(record_third_id).includes('_ipad')){
+        const busId = Number(record_third_id.split('_')[0])
+        this.ipadRecordCallback('1', false, busId)
+        this.saveLog('mrtc OnStartIpadRecordFailed, 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)
+      }
+      console.log('record_third_id=', record_third_id)
+      if (!record_third_id) {
+        this.videoRecordCallback('2', true)
+        this.saveLog('mrtc OnStopRemoteRecordSucc, recordId='+recordId)
+        this.state.recordId = '';
+      } else if (String(record_third_id).includes('_ipad')){
+        const busId = Number(record_third_id.split('_')[0])
+        this.ipadRecordCallback('2', true, busId)
+        this.saveLog('mrtc OnStopIpadRecordSucc, recordId='+recordId)
+        this.state.ipadRecordId = '';
+      } 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 if (String(record_third_id).includes('_ipad')){
+        const busId = Number(record_third_id.split('_')[0])
+        this.ipadRecordCallback('2', false, busId)
+        this.saveLog('mrtc OnStopIpadRecordFailed, 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 = (
@@ -2467,6 +3235,29 @@ 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: '',
+        })
+        this.saveLog(`dual recording crash, recordId=${recordId}`);
+        // 循环播放录制中断语音
+        clearTimeout(this.recordLoopPlayTimer)
+        this.recordLoopPlay = () => {
+          console.log('loop recordId', this.state.recordId, 'businessRecordId ', this.state.businessRecordId)
+          if(!this.state.businessRecordId && document.getElementById("publish_streamId1")){
+            let audio = new Audio(recordErrorAudio)
+            audio.play()
+            this.recordLoopPlayTimer = setTimeout(this.recordLoopPlay, 3000);
+          }
+        }
+        setTimeout(this.recordLoopPlay, 0);
+      }
     };
     // 停止浏览器录制成功回调
     this.test_controller.OnClientStopRecordSuccess = (
@@ -2526,6 +3317,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);
@@ -2539,6 +3347,8 @@ class Video extends Component {
         if (this.state.screenName == '切换共享') {
           this.state.isSharedScreen = true
           this.state.isScreenSwitching = false
+          this.setSharedScreenState(true)
+          this.saveLog('Share changed')
         }
       }
     };
@@ -2556,9 +3366,13 @@ class Video extends Component {
         })
         this.messageClick('切换摄像头或麦克风失败，请先检查设备', 'error')
       } else if (this.state.screenName == '切换共享') {
+        this.saveLog('unPublish share, reason: trigger OnChangeMediaStreamFailed')
+        console.log('unPublish share, reason: trigger OnChangeMediaStreamFailed')
         this.test_controller.UnPublish(document.getElementById('video20').name)
         this.state.isSharedScreen = false
         this.state.isScreenSwitching = false
+        this.setSharedScreenState(false)
+        this.saveLog('Share fail, code=' + code)
         this.setState({
           screenName: '共享模式'
         });
@@ -2669,7 +3483,7 @@ class Video extends Component {
         let startX = x2 // 绘制起始点x
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
-        if (document.getElementById('publish_video1').name == sid && i == 39) {
+        if (document.getElementById('publish_streamId1').name == sid && i == 39) {
           this.state.analyserHeight.set(sid, number / 40 / 70)
           this.state.analyserHeight = this.state.analyserHeight
         }
@@ -2686,18 +3500,21 @@ 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
       } else {
         if (!streamShare) {
+          this.saveLog('unPublish share, reason: trigger OnDesktopDisplayClosed, manually click stop or stream onended')
+          console.log('unPublish share, reason: trigger OnDesktopDisplayClosed, manually click stop or stream onended')
           document.getElementById('video20') && document.getElementById('video20').name ? this.test_controller.UnPublish(document.getElementById('video20').name) : ''
         } else {
           console.log('白板')
         }
         this.state.isSharedScreen = false
         this.state.isScreenSwitching = false
+        this.setSharedScreenState(false)
         this.setState({
           screenName: '共享模式'
         });
@@ -2715,13 +3532,51 @@ class Video extends Component {
 
 
     };
+    
+  
+  }
+  startASR() {
+    // const publish_sid = document.getElementById('publish_video1').name
+
+    // if (media_status == 1) {
+    //   return
+    // }
+    this.asr_controller.initWebSocket(this.props.asrServerUrl)
+  }
+  stopASR() {
+    this.state.isAsrStart = false
+    // if (media_status == 0) {
+    //   return
+    // }
+    this.asr_controller.Disconnect()
+  
+    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
       });
@@ -2732,6 +3587,73 @@ 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) {
+      }
+    }
+  }
+  // ipad录制回调
+  ipadRecordCallback= async (type, status, businessId) => {
+    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.ipadRecordId,
+        customerId: this.props.customerId,
+        isIpad: 1,
+        type: type,
+        status: status
+      });
+    } 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
@@ -2763,10 +3685,9 @@ class Video extends Component {
         type: '2'
       });
       console.log(result);
-      this.appGetUsername(document.getElementById('publish_video1').name)
-      callNimIM('sendCustomCmdMsg', {
-        customId: this.state.imRoomId,
-        content: JSON.stringify({
+      this.queryRecordStatus()
+      this.appGetUsername(document.getElementById('publish_streamId1').name)
+      this.sendMessage({
           'typeId': 1014,
           'sessionId': this.state.sessionId,
           'meetingInfo': {
@@ -2775,9 +3696,6 @@ class Video extends Component {
             'customers': this.props.meetingInfo.customers,
             'otherAttendees': this.props.meetingInfo.otherAttendees
           }
-
-        })
-      }, function (code, message, data) {
       })
     } catch (err) {
       console.error(err);
@@ -2786,10 +3704,15 @@ class Video extends Component {
       }
     }
   }
+  componentDidCatch(error, info) {
+    console.log('componentDidCatch')
+    console.error(error, info)
+  }
+
   componentWillUnmount() {
     this.saveLog('Exit meeting')
     if (this.test_controller && this.state.sessionType) {
-      clearStreamRemain()
+      // clearStreamRemain() // 谨慎使用，有页面crash问题
       this.test_controller.LeaveRoom()
       this.test_controller.Disconnect()
       try {
@@ -2797,15 +3720,30 @@ class Video extends Component {
         beautyStop();
         console.log('beautyStop!!')
       } catch (err){
-        console.error(err)
+        console.log(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()
     }
+    worker.postMessage(false);
+    worker.terminate();
     message.destroy()
+    clearTimeout(this.loopPlayTimer)
+    clearTimeout(this.recordLoopPlayTimer)
+    clearTimeout(this.ipadLeavePlayTimer)
+    clearTimeout(this.ipadLowPowerPlayTimer)
+    clearInterval(this.state.drawCanvasInterval)
+    clearInterval(this.state.faceDetectionTimer);
+    clearInterval(this.state.imageDetectionTimer);
+    this.removeVideoEvent(['video20', 'video21', 'publish_video1'])
+    for(let i=1;i<=12;i++){
+      this.removeVideoEvent(['video'+ i])
+    }
   }
   finishSession = () => {
     // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
@@ -2821,6 +3759,7 @@ class Video extends Component {
         screenName: '共享模式',
       })
       this.state.isSharedScreen = false
+      this.setSharedScreenState(false)
       this.state.laveRoomSharedScreen = true
       // this.test_controller.UnPublish(document.getElementById('video20').name)
 
@@ -2834,6 +3773,7 @@ class Video extends Component {
         screenName: '共享模式',
       });
       this.state.isSharedScreen = false
+      this.setSharedScreenState(false)
       this.state.laveRoomSharedScreen = true
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.TELLER_EXIT,
@@ -2862,6 +3802,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({
@@ -2909,7 +3864,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
@@ -2923,36 +3878,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()
@@ -2967,13 +3936,13 @@ 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.mountClick()
               }
             }
           } else {
             script.onload = () => {
-              that.test_controller = new McuController();
+              that.test_controller = new MeetingController();
               that.mountClick()
             }
           }
@@ -2996,7 +3965,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.2')
+    console.log('hsbc_teller_sdk', SDK_VERISON)
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -3008,8 +3977,43 @@ class Video extends Component {
         hasOcr: 0,
       })
     }
+    this.videoErrorEvent = (event) => {
+      console.log(event)
+      console.log(`video load ${event.type || 'error'}: sid=${event.target.name}, domid=${event.target.id}`)
+      this.saveLog(`video load ${event.type || 'error'}: sid=${event.target.name}, domid=${event.target.id}`)
+    }
+    this.bindVideoEvent = (domArr) => {
+      domArr.forEach((domId) => {
+        document.getElementById(domId).addEventListener("error", this.videoErrorEvent);
+        document.getElementById(domId).addEventListener("emptied", this.videoErrorEvent);
+        document.getElementById(domId).addEventListener("stalled", this.videoErrorEvent);
+        document.getElementById(domId).addEventListener("suspend", this.videoErrorEvent);
+      })
+    }
+    this.removeVideoEvent = (domArr) => {
+      domArr.forEach((domId) => {
+        document.getElementById(domId).removeEventListener("error", this.videoErrorEvent);
+        document.getElementById(domId).removeEventListener("emptied", this.videoErrorEvent);
+        document.getElementById(domId).removeEventListener("stalled", this.videoErrorEvent);
+        document.getElementById(domId).removeEventListener("suspend", this.videoErrorEvent);
+      })
+    }
     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)
+
+        });
+        this.bindVideoEvent(['video'+ i])
+      }
+      this.bindVideoEvent(['video20', 'video21', 'publish_video1'])
     })
     if (this.props.sessionId) {
       this.getRoomStatus({
@@ -3018,8 +4022,101 @@ class Video extends Component {
     } else {
       this.addToScript()
     }
+
+    if (this.props.salesBranchCode) {
+      this.queryBranchName()
+    }
+    window.imRoom = {
+      sessionId: this.props.sessionId,
+      userId: this.props.tellerAccount
+    }
   }
+  initAsrRecorder = () => {
+    this.state.recorder = new Recorder({
+      sampleBits: 16,                 // 采样位数，，默认是16
+      sampleRate: 16000,              //音频采样率，默认是16000Hz，
+      numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
+      compiling: true                 // 是否边录边转换，默认是false
+    })
+    this.asr_controller = new MyAsrController({
+      token: this.state.asrToken,
+      appKey: this.state.asrAppKey,
+      url: this.state.asrServerUrl,
+      recorder: this.state.recorder
+    })
+
+    let that = this;
+    this.asr_controller.onConnectError = () => {
+      this.messageClick('违禁词检测服务连接失败', 'error')
+    }
+
+    this.asr_controller.onConnectOK = () => {
+      message.success({
+        content: '敏感词检测已开启',
+        icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+        className: 'successClassName',
+        top: 200,
+        // duration: 10
+      })
+      this.state.recorder.start().then(() => {
+        console.log('asr recorder 开启')
+      }, (error) => {
+        console.log(`出错了`);
+      });
+      this.state.isAsrStart = true
+      this.state.sensitiveRecordMap = {}
+      // this.AsrResultText = ''
+    }
 
+    this.asr_controller.onSentenceEnd = (msg) => {
+      console.log('句子解析结果', msg.result)
+      const resultValue = msg.result
+      const sentence_id = msg.index
+      API.keywordMatch({
+        text: resultValue,
+        appCode: `HSBCCode`
+      }).then((re) => {
+        if (re.data.match) {
+          let matchArr = re.data.matchRawTextItems.map(el => el.matchedRawKeywords);
+          let resultFormat = resultValue;
+          re.data.matchRawTextItems.sort((a,b)=> b.matchedText.length - a.matchedText.length).forEach(el => {
+            resultFormat = resultFormat.replace(el.matchedText, el.matchedRawKeywords)
+          })
+          console.log('敏感词：', resultValue, resultFormat)
+          this.saveVideoPoint('pwd', `${resultFormat}`, matchArr.toString())
+          if (matchArr.length>0) {
+            this.messageClick('检测到敏感词:' + matchArr, 'error')
+          }
+        }
+      }); 
+    }
+    // this.asr_controller.onAsrMessage = (msg) => {
+    //   console.log('收到解析结果', msg.result)
+    //   const resultValue = msg.result
+    //   const sentence_id = msg.index
+    //   // sentence_id相同,取最后一个值
+    //   let text = resultValue || ''
+    //   const sensitiveArr = that.props.sensitiveWords
+    //   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)){
+          
+    //         if (!that.state.sensitiveRecordMap[sentence_id]) {
+    //           that.state.sensitiveRecordMap[sentence_id] = []
+    //         } 
+    //         that.state.sensitiveRecordMap[sentence_id].push(el)
+    //       }
+    //     })
+    //   }
+    // }
+  }
   voice = () => {
     if (this.isFileSuccuse()) {
       if (!this.state.voiceStatue) {
@@ -3035,20 +4132,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({
@@ -3062,22 +4154,68 @@ 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;
+          this.state.ipadRecordId = result.businessIpadRecordId;
+          third_id_Map.set(result.businessRecordId, result.businessId);
+          third_id_Map.set(result.businessIpadRecordId, result.businessId+'_ipad');
+          console.log("third_id_map", third_id_Map)
+          if (this.props.whetherDetectFace && this.props.recordMode != 2) this.startFaceDetection();
+          if (this.props.whetherDetectLight && this.props.recordMode != 2) this.startImageDetection();
+          if (this.props.whetherNeedAsr) this.startASR();
+        }
+      } else {
+        this.state.recordId = ''
+      }
+    } catch (err) {
+      console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
+    }
+  }
+  setSharedScreenState = async (state) => {
+    const status = state? 'open' : 'close'
+    try {
+      let result = await API.editRmScreenStatus({
+        roomId: this.state.channelId + '',
+        status,
+        staffId: this.props.tellerAccount,
+      });
+    } catch (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')
@@ -3100,17 +4238,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({
@@ -3122,22 +4255,21 @@ 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
         })
       }
     }
   };
   sharedScreen = () => {
     console.log('投屏', this.state.tabTitles.find(el => el.value == 'staffScreen'))
+    if (this.state.shareLock) {
+      console.log('发布共享点击太快了')
+      return;
+    }
     if (this.isFileSuccuse()) {
       if (!this.state.tabTitles.find(el => el.value == 'staffScreen')) {
         const publish_config = {};
@@ -3146,30 +4278,76 @@ class Video extends Component {
           streamShare = ''
         }
         if (this.state.isSharedScreen) {
-          const publish_config = {}
+          this.saveLog('unPublish share, reason: change screen content')
+          console.log('unPublish share, reason: change screen content')
+          this.test_controller.UnPublish(document.getElementById('video20').name)
+          this.state.shareLock = true;
+          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)
+          setTimeout(() => { this.state.shareLock = false; }, 500);
+          }, 300);
+          this.setState({
+            screenName: '切换共享',
+            isPDF: false
+          })
+          this.tabTitlesClick(
+            {
+              value: 'RMScreen',
+              name: '共享内容'
+            }, 'add'
+          )
+          // 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.saveLog('unPublish share, reason: change screen content')
+            console.log('unPublish share, reason: change screen content')
+            this.test_controller.UnPublish(document.getElementById('video20').name)
+            this.state.shareLock = true;
+            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)
+              setTimeout(() => { this.state.shareLock = false; }, 500); // 这个延迟用于防止跳出弹窗后仍可以点击共享按钮，大于debounce300即可
+            }, 300);// 这个延迟用于跟UnPublish 产生时差，防止标签未被释放
+            // 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
@@ -3248,23 +4426,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({
@@ -3273,41 +4449,93 @@ class Video extends Component {
     }
 
   };
+  // 打开抄录/签署面板
+  showModal=(moduleName)=>{
+    if (!this.state.multiModuleShow) {
+			this.setState({
+				multiModuleShow:true,
+				multiModule: moduleName,
+			},()=>{
+      })
+      this.tabTitlesClick(
+        {
+          value: 'multiModule',
+          name: '签署抄录'
+        },'add'
+      )
+		}else{
+			this.closeModule()
+		}
+  }
+  // 关闭面板
+  closeModule=()=>{
+      setTimeout(() => {
+        this.setState({
+          multiModuleShow:false,
+				  multiModule: '',
+        })  
+        this.tabTitlesClick('multiModule','delect')
+      }, 0);
+      // const sid = document.getElementById('video20').name;
+      // sid ? this.test_controller.UnPublish(sid) : ''
+  }
+  handleOkPictureConfirm = () => {
+    this.pictureInPictureClick('add')
+    this.setState({isPictureConfirmModalVisible: false})
+  }
+  isDisconnectModalVisible = () => {
+    this.setState({isDisconnectModalVisible: false})
+  }
+  handleOkRecordConfirm = () => {
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
+    this.saveLog('Start business recording')
+    this.enableServerRecording(this.state.businessId)
+    clearTimeout(this.recordLoopPlayTimer)
+  }
+  handleOkLowPowerConfirm = () => {
+    // 通知ipad，获取是否在充电的状态
+    this.sendMessage({
+      'typeId': 1224,
+      'sessionId': this.state.sessionId,
+      'userId': this.props.tellerAccount
+    })
+  }
+  handleOkIpadLeaveConfirm = () => {
+    // 检测ipad是否入会
+    if (!this.state.ipadTag) {
+      this.messageClick('未检测到iPad，请重新加入后再试', 'error')
+    } else {
+      clearTimeout(this.ipadLeavePlayTimer)
+      this.setState({IpadLeaveErrorModalVisible: false})
+    }
+  }
   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
     })
@@ -3487,6 +4715,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')
@@ -3511,15 +4742,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) {
@@ -3679,6 +4907,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({
@@ -3777,6 +5006,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')
@@ -3787,15 +5019,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
     })
@@ -3820,15 +5049,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,
@@ -3939,15 +5165,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) {
@@ -4018,19 +5241,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) => {
@@ -4042,10 +5271,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 = ''
@@ -4074,7 +5303,7 @@ class Video extends Component {
         userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid
       }
     }
-    if (document.getElementById('publish_video1').name == sid) {
+    if (document.getElementById('publish_streamId1').name == sid) {
       userId = this.props.tellerAccount
     }
     try {
@@ -4094,9 +5323,15 @@ class Video extends Component {
       } else {
         this.messageClick('查询失败', 'error')
       }
-      if (this.props.isOpenSound && sid != document.getElementById('publish_video1').name) {
-          if (result.data.userType == 1) {
-            let src = autod
+      if (this.props.isOpenSound && sid != document.getElementById('publish_streamId1').name) {
+          if (userId.includes(IPAD_SUFFIX)) {
+            if (!this.state.businessId) {
+              let src = ipadjoinMeeting
+              let audio = new Audio(src)
+              audio.play()
+            }
+          } else if (result.data.userType == 1) {
+            let src = joinMeeting
             let audio = new Audio(src)
             audio.play()
           } else if (result.data.userType == 2) {
@@ -4105,7 +5340,7 @@ class Video extends Component {
             audio.play()
           }
       }
-      if (document.getElementById('publish_video1').name == sid) {
+      if (document.getElementById('publish_streamId1').name == sid) {
         this.setState({
           titleNameRm: data
         })
@@ -4193,6 +5428,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 = {};
@@ -4222,8 +5472,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
@@ -4234,20 +5486,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
@@ -4270,10 +5523,12 @@ 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,
+      surfaceSwitching: "exclude"
       // audio: true
       // video: {
       //   width: document.body.clientWidth,
@@ -4299,9 +5554,119 @@ class Video extends Component {
           //单击停止共享按钮后，触发这个事件
           streamShare = ''
           if (document.getElementById('video20').name && !this.state.isSharedScreen) {
+            console.log('unPublish share, reason: click stop sharing whiteboard or stream onended')
+            that.saveLog('unPublish share, reason: click stop sharing whiteboard or stream onended')
             that.test_controller.UnPublish(document.getElementById('video20').name)
           }
         }
+
+        // 关闭当前共享屏幕
+        if (document.getElementById('video20') && document.getElementById('video20').name) {
+          console.log('unPublish share, reason: going to share whiteboard, shared screen needs to be stopped')
+          that.saveLog('unPublish share, reason: going to share whiteboard, shared screen needs to be stopped')
+          that.test_controller.UnPublish(document.getElementById('video20').name)
+        }
+        that.state.isSharedScreen = false
+        that.state.isScreenSwitching = false
+        // that.setSharedScreenState(false)
+        that.setState({
+          screenName: '共享模式'
+        });
+        that.tabTitlesClick('RMScreen', 'delect')
+
+      }, error => {
+        console.log("Unable to acquire screen capture", error);
+        console.log('取消签署')
+        that.saveLog('Manual cancel share')
+      });
+  }
+  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,
+      surfaceSwitching: "exclude"
+    })
+      .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.saveLog('unPublish share, reason: click stop recording all screen or stream onended')
+            console.log('unPublish share, reason: click stop recording all screen or stream onended')
+            that.test_controller.UnPublish(document.getElementById('record_video').name)
+          }
+        }
       }, error => {
         console.log("Unable to acquire screen capture", error);
       });
@@ -4477,13 +5842,151 @@ 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 ? '合格': '不合格', // 麦克风检测
+      speakerResult: this.state.speakerList.length>0 ? '合格': '不合格',
+      lightResult: this.state.envInfo? this.state.envInfo.lightResult : '未知'
+    }
+     
+    // 扬声器检测
+    const detectSpeaker =  this.props.speakerNames instanceof Array && this.props.speakerNames.length > 0;
+    if (detectSpeaker) {
+      envInfo.speakerResult = (this.state.speakerList.length >0 &&
+        this.props.speakerNames.find(el => (this.state.speakerList[0].actionname).includes(el)))? '合格' : '不合格';
+    } 
+    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 = async () => {
+    this.setState({
+      isModalVisibleEnvironment: false,
+    })
+    if (!this.state.isPictureInPicture) {
+      this.pictureInPicture()
+    }
+    // 分行模式，需要自动开启业务录制
+    if (this.props.recordMode == 2) {
+      this.startBusinessRecord()
+    }
+  }
+
+  async startBusinessRecord() {
+    const busData = this.props.getBusinessData()
+    if (busData) {
+      try {
+        let result = await API.startBusinessRecord({
+          sessionId: this.state.sessionId,
+          roomId: this.state.channelId,
+          type: 1,
+          ...busData
+        });
+        console.log(result)
+        if (result.code == 200) {
+          console.log('成功')
+        } else if (result.code == 500) {
+          this.messageClick('服务异常，业务录制开启失败','error')
+        } else {
+          console.warn('业务录制开启失败', result.code, result.message)
+        }
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+  // handleCancelEnvDetection = () => {
+  //   this.setState({
+  //     isModalVisibleEnvironment: false
+  //   })
+  // }
   handleOkInspection = () => {
     this.setState({
       isModalVisibleInspection: false,
       loading: true
     })
     const config = {}
-    config.sid = document.getElementById('publish_video1').name
+    config.sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name
     config.videoSource = this.state.cameraValue
     config.audioSource = this.state.microphoneValue
     this.test_controller.ChangeProfile(config)
@@ -4522,16 +6025,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 || document.getElementById('publish_streamId1').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")
@@ -4549,117 +6075,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
+      })
     }
 
   }
@@ -4668,14 +6158,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)
 
   }
@@ -4683,11 +6170,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()
@@ -4714,6 +6208,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) {
@@ -4734,6 +6239,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,
@@ -4748,6 +6259,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)
@@ -4848,8 +6362,10 @@ class Video extends Component {
 
             }))
           }
-
-
+          this.setState({
+            documentError: '',
+            isModalVisibleCustomer: false,
+          })
         }
       })
       // this.customerFaceClick(this.state.customerList[this.state.customerSelect])
@@ -5062,6 +6578,15 @@ class Video extends Component {
       </div>
     )
 
+    const isEnvironmentOK = !this.state.loading && 
+                            this.state.envInfo.networkResult=='合格' &&
+                            this.state.envInfo.batteryResult=='合格' &&
+                            (this.state.envInfo.cameraResult=='合格' || this.props.recordMode == 2) &&
+                            this.state.envInfo.microResult=='合格' &&
+                            this.state.envInfo.speakerResult=='合格' &&
+                            (this.state.envInfo.lightResult=='合格' || this.props.recordMode == 2 ) &&
+                            (this.state.ipadTag || this.props.recordMode != 2)
+
     const sectionStyle = this.state.tabTitles.length > 0 ? {
       zIndex: '-1',
       width: '100%',
@@ -5087,7 +6612,7 @@ class Video extends Component {
     return (
       <div className="all" id="allHSBC">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
-          <Header></Header>
+          <Header recordMode={this.props.recordMode}></Header>
           <div className="health">
             <div className="healthVideo">
               <div className="projection" style={{ background: this.state.tabTitles.length > 0 ? '#f0f0f0' : '#ffffff' }}>
@@ -5108,6 +6633,18 @@ class Video extends Component {
                     }
                     <canvas id="canvas" className="canvas"></canvas>
                   </CanvasHome>
+                  <div className="videoDiv" style={{ display: (this.state.isSelect == 'multiModule') ? '' : 'none', }}>
+                    <div className="videoDiv">
+                    {/* <div style={{ display: (this.state.multiModuleShow) ? '' : 'none', height: '100%'}}> */}
+                    {
+                      this.state.multiModuleShow && 
+                      <div style={{ height: '100%'}}>
+                      <MultiModule  moduleName={this.state.multiModule} data={this.state.moduleData} finish={this.closeModule} handleReceiveMsg={this.handleReceiveMsg}></MultiModule>
+                      </div>
+                    }
+                    </div>
+
+                  </div>
                   <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
                     <div className="videoDiv" style={{ 'textAlign': 'center' }}>
                       <video
@@ -5166,19 +6703,28 @@ class Video extends Component {
                               {otherAttendeesList}
                             </li>
                           }
+                          {
+                            this.props.recordMode != 2 &&
                           <li>
                             请注意，若会议中需要客户出示证件，请客户使用手机的后置摄像头展示证件，由客户经理拍摄证件照片以完成客户身份核实。客户可点击会议主页面上的”切换摄像头“按钮切换手机摄像头
                           </li>
+                          }
 
                         </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' style={{marginTop: '20px'}}><span>会议号码</span><div className='num'>{this.state.sessionId}</div></div>
+                      </div> : null}
                     </div>
                   }
 
@@ -5188,6 +6734,7 @@ class Video extends Component {
               <div id="videoList" className={`wrapper ${this.state.isVideoList? 'videoListClass': ''}`} style={{ width: '20%' }}>
                 <div
                   className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
+                  style={{ display: (this.props.recordMode == 2) ? 'none' : ''}}
                 >
                   <div className="publishVideoDiv">
 
@@ -5216,7 +6763,7 @@ class Video extends Component {
                   </div>
 
                 </div>
-                {
+                {/* {
                   this.state.cameraList.map((item, index) => {
                     if (index > 0) 
                     return <div
@@ -5249,7 +6796,7 @@ class Video extends Component {
                     </div>
                   </div>
                   })
-                }
+                } */}
                 {/* <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
                   style={{ position: "relative", display: (this.state.videoList[0].videoName) ? '' : 'none' }}
                 >
@@ -5298,7 +6845,8 @@ 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.videoName.includes(IPAD_SUFFIX) ? <span style={{paddingLeft: '8px'}}> </span>:<>
                     {
                       item.mute && <img
                         alt=""
@@ -5307,7 +6855,7 @@ class Video extends Component {
                       />
                     }
                     <canvas style={{ display: (item.videoName && !item.mute) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id={"subscribe_volumeView"+(item.idIndex)} width="40" height="70"></canvas>
-
+                    </>}
                       <div className='titleName' style={{ color: this.props.titleColor,fontSize: this.props.fontSize + 'px',fontFamily : this.props.fontFamily}}>
                         {item.videoName}
                       </div>
@@ -5338,7 +6886,7 @@ class Video extends Component {
             ocrHandleVisibleChange={this.ocrHandleVisibleChange}
             voice={this.voice}
             cameraClick={this.cameraClick}
-            sharedScreen={this.sharedScreen}
+            sharedScreen={()=> {this.saveLog('Click share button');this.sharedScreen();}}
             endSession={this.endSession}
             facialRecognition={this.facialRecognition}
             pictureInPicture={this.pictureInPicture}
@@ -5346,8 +6894,10 @@ class Video extends Component {
             invitationClick={this.invitationClick}
             customerFaceClick={this.customerFaceClick}
             ocrClick={this.ocrClick}
-            switchExternal={this.switchExternal}
+            switchExternal={()=> {this.saveLog('Click sign button');this.switchExternal();}}
             inspection={this.inspection}
+            toggleAsr={this.toggleAsr}
+            envDetection={this.showEnvDetection}
             beautyClick={this.beautyClick}
             graffiti={this.graffiti}
             virtualization={this.virtualization}
@@ -5362,6 +6912,60 @@ 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.isDisconnectModalVisible} maskClosable={false} footer={[
+            <div key='end'>
+              <Button className="modelButtonOk" type="primary" danger onClick={this.isDisconnectModalVisible}>确定</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>
+          {/* ipad低电量确认 */}
+          <Modal closable={false} centered={true} visible={this.state.ipadLowPowerErrorModalVisible} maskClosable={false} footer={[
+            <div key='end'>
+              <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkLowPowerConfirm}>确定</Button>
+            </div>
+          ]}>
+            <div className='endModal'>iPad电量过低，请检查</div>
+          </Modal>
+          {/* 双录中ipad退出确认 */}
+          <Modal closable={false} centered={true} visible={this.state.IpadLeaveErrorModalVisible} maskClosable={false}  width={350} footer={[
+            <div key='end'>
+              <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkIpadLeaveConfirm}>确定</Button>
+            </div>
+          ]}>
+            <div className='ipadModal'>iPad 摄像头异常退出，请扫码或输入会议号入会</div>
+            <div className='QRCode center'>
+              <QRCode
+                value={JSON.stringify({
+                  sessionId:this.state.sessionId,
+                  staffId: this.props.tellerAccount,
+                  staffName: this.props.staffName
+                })}  //value参数为生成二维码的链接
+                className="ipadCode"
+                size={120} //二维码的宽高尺寸
+                fgColor="#000000"  //二维码的颜色
+            />
+            <div className='sessionDiv'><span>会议号码</span><div className='num'>{this.state.sessionId}</div></div>
+            </div>
+          </Modal>
           {/* 是否退出会议*/}
           <Modal closable={false} centered={true} visible={this.state.isModalVisibleEnd} maskClosable={false} footer={[
             <div key='end'>
@@ -5369,7 +6973,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={[
@@ -5709,10 +7313,99 @@ 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>
+              {
+                this.props.recordMode != 2 && 
+              <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.speakerResult} {this.state.envInfo.speakerResult=='不合格'? <img src={IconFail} />: <img src={IconSuccess} />}</span>} key="4" className={this.state.envInfo.speakerResult=='不合格'? 'panel-error':''}>
+                <div>
+                  {
+                    this.state.speakerList.map((item, index) => {
+                      return <div key={index} className="envClass">
+                          {item.actionname}{'（当前设备）'}
+                      </div>
+                    })
+                  }
+                  {this.state.speakerList.length == 0 ? <p className="envClass">获取不到设备，请检查电脑“设置”中的扬声器权限是否开启，并重启浏览器再试</p> : null}
+                  {(this.state.speakerList.length > 0 && this.state.envInfo.speakerResult=='不合格') ? <p className="envClass" style={{marginTop: '3px'}}>未使用外放扬声器，请检查电脑“设置”中的媒体设备，并刷新或重启浏览器再试</p> : null}
+                </div>
+              </Panel>
+              {
+                this.props.recordMode == 2 && 
+                <Panel header={<span>双录iPad设备 - {this.state.ipadTag? '合格':'未开启'} {this.state.ipadTag? <img src={IconSuccess} />: <img src={IconFail} />}</span>} key="6" className={this.state.ipadTag? '':'panel-error'}>
+                  <p className="envClass">{this.state.ipadTag? 'iPad设备已加入':'请使用双录iPAD扫描以下会议二维码或输入会议号，开启双录'}</p> 
+                  <div className='QRCode flex' style={{display: this.state.ipadTag? 'none':''}}>
+                  <QRCode
+                      value={JSON.stringify({
+                        sessionId: this.state.sessionId,
+                        staffId: this.props.tellerAccount,
+                        staffName: this.props.staffName
+                      })}
+                      style={{marginTop: '8px', marginLeft: '20px'}}
+                      size={100}
+                      fgColor="#000000" 
+                  />
+                  <div className='sessionDiv'><span>会议号码</span><div className='num'>{this.state.sessionId}</div></div>
+                  </div>
+                </Panel>
+              }
+              {
+                this.props.recordMode != 2 && 
+              <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>);
@@ -5728,7 +7421,10 @@ 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',
-
+  // asr公有云默认参数
+  // asrServerUrl: 'wss://nls-gateway.cn-shanghai.aliyuncs.com/ws/v1',
+  // asrAppKey: 'E6DAPlpMun5L2dJ7',
+  // asrToken: 'a07198021d434d1288cd4ab3178712cb',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   // resourcePath: 'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
   prohbiitPrompt: '当前无客户',
@@ -5738,18 +7434,36 @@ 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: ['保本保息', '无风险'],
+  // speakerNames: ['扬声器'], // null或不传，则不强制使用扬声器设备；若传入有效数组，则每项代表允许的设备名称如"xxx Speaker Device"，逻辑为包含，不需要全等。
   meetingInfo: {
     title: '--',
     host: '--',
     customers: ['--'],
     otherAttendees: undefined
   },
+  pdfRendering: false,
   isTranscribing: false,
   shareMask: false,
   isOpenSound: false, // true开启进出音效   false不开启
+  isWeakSound: false,
+  whetherDetectFace: false, // 是否在双录时开启人脸检测
+  whetherDetectLight: false, // 是否在双录时开启背光检测
+  whetherNeedAsr: false, // 是否在双录时开启违禁词检测
+  faceDetectInterval: 6, // 人脸检测间隔（秒）
+  lightDetectInterval: 6, // 背光检测间隔（秒）
+  lightSensitivity: 1, // 光线敏感度系数，默认1
   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'
 }