react_hsbc_teller 1.9.81 → 2.0.0

package/packages/pages/video/video.jsx

@@ -2,6 +2,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable eqeqeq */
 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';
@@ -14,6 +15,7 @@ import cameraImgOpen from '../../assets/img/icon_camera.png'
 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 internalJoin from '../../assets/mp3/internalJoin.mp3'
 import internalLeft from '../../assets/mp3/internalLeft.mp3'
@@ -40,8 +42,11 @@ import 'antd/lib/space/style'
 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 axios from 'axios';
 import CryptoJS from "crypto-js";
+const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
+const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
@@ -55,7 +60,7 @@ let videoName
 let muteJson = new Map()
 let dateTime = 0
 let messageValue = ''
-let beautyType = false
+// let beautyType = false
 // let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
@@ -104,6 +109,7 @@ function clearStreamRemain() {
     document.body.removeChild(beautyDiv.beauty_div);
     beautyDiv.beauty_div = null;
   }
+  console.log('clearStreamRemain!!!!!')
   beautyDiv = {};
 };
 async function startBeauty(stream) {
@@ -163,6 +169,7 @@ class Video extends Component {
   }
   cancel = axios.CancelToken.source()
   state = {
+    beautyType: false,
     beautyName: '开启美颜',
     signNoClick: false,
     listVideoPicture: [],
@@ -179,7 +186,7 @@ class Video extends Component {
     isWhiteboard: false,
     isSelect: '',
     loading: false,
-    titleModal: '人脸识别',
+    titleModal: '身份验证',
     faceCustomerType: 1, // 1无感人脸，2ocr
     faceCustomerUid: '',
     customerList: [],
@@ -188,6 +195,7 @@ class Video extends Component {
     isModalVisibleInvitation: false,
     linkData: '',
     roomCustomerList: [],
+    userIdCardResults: {},
     facialImg: '',
     isFaceImage: false,
     isModalVisibleFacial: false,
@@ -216,33 +224,18 @@ class Video extends Component {
     isPictureInPicture: false,
     clickedFacial: false,
     clickedOcr: false,
-    videoOneName: '',
-    videoTwoName: '',
-    videoThreeName: '',
-    videoFourName: '',
-    videoFiveName: '',
-    videoSixName: '',
-    videoSevenName: '',
-    videoEightName: '',
-    videoTenName: '',
-    videoNineName: '',
-    videoTwelveName: '',
-    videoElevenName: '',
     tabTitles: [
     ],
-    videoList: [],
-    voiceVideoOne: false,
-    voiceVideoTwo: false,
-    voiceVideoThree: false,
-    voiceVideoFour: false,
-    voiceVideoFive: false,
-    voiceVideoSix: false,
-    voiceVideoSeven: false,
-    voiceVideoEight: false,
-    voiceVideoNine: false,
-    voiceVideoTen: false,
-    voiceVideoEleven: false,
-    voiceVideoTwelve: false,
+    videoList: [{
+      videoName: '',
+      mute: false,
+      noVideo: false,
+      isPIBIntranet: false,
+      idIndex: 1,
+      userSide: 1,
+      userId: '',
+      hasOcr: 0, // 0: 未做ocr  1:非身份证ocr 2:身份证ocr
+    }],
     cameraList: [],
     microphoneList: [],
     speakerList: [],
@@ -254,59 +247,9 @@ class Video extends Component {
     analyserData: new Map(),
     analyserHeight: new Map(),
     OnVolumeAnalyserMap: new Map(),
-    noVideoOne: false,
-    noVideoTwo: false,
-    noVideoThree: false,
-    noVideoFour: false,
-    noVideoFive: false,
-    noVideoSix: false,
-    noVideoSeven: false,
-    noVideoEight: false,
-    noVideoNine: false,
-    noVideoTen: false,
-    noVideoEleven: false,
-    noVideoTwelve: false,
     manualClose: false,
     defaultValue: '1',
     customOcrSid: '',
-    isPIBIntranet: [
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      },
-      {
-        type: false
-      }
-    ],
     shareMaskState: false,
     idCardName: '',
     idCardNameFace: '',
@@ -325,7 +268,7 @@ class Video extends Component {
     documentType: '',
     isCustomerSelect: true,
     documentError: '',
-    customerTitleName: '客户身份识别',
+    customerTitleName: '客户身份验证',
     certificateType: 'ID_CARD',
     customerName: '',
     IDtypeFrontOrBack: '',
@@ -352,7 +295,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.81&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=2.0.0&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -527,6 +470,7 @@ class Video extends Component {
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
     this.test_controller.Connect(config_param)
+    this.saveLog('mrtc connect start')
   };
   // 初始化视频
   ConnectMRTC = () => {
@@ -583,6 +527,7 @@ class Video extends Component {
       }
     ];
     this.test_controller.InitRoomConfig(config_param)
+    this.saveLog('mrtc InitRoomConfig start')
   };
   rateAll = async () => {
     let data = ''
@@ -780,7 +725,7 @@ class Video extends Component {
         this.setState({
           cardFailReason: '证件图片不清晰，请重试。返回重拍时，请检查并确保身份证件图片信息完整清晰后再提交核查。[#'+value+'#]'
         })
-      } else if(value == -1001 || value == -1002|| value == -1003||value == -1004||value == -1005||value==-1006) {
+      } else if(value == -1001 || value == -1002|| value == -1003||value == -1004||value == -1005||value==-100801||value==-100802) {
         this.setState({
           cardFailReason: '系统或网络连接异常，请重试。若仍有问题，请联系Support同事。[#'+value+'#]'
         })
@@ -799,7 +744,11 @@ class Video extends Component {
         this.setState({
           faceFailReason: '用户信息核查未通过。请返回重试。返回重拍时，请检查并确保客户照片完整清晰后再提交核查。[#'+ value + '#]'
         })
-      }else if(value == 209) {
+      }else if(value == 206) {
+        this.setState({
+          faceFailReason: '用户信息核查无法处理，请重试。若仍有问题，请联系Support同事。[#'+ value + '#]'
+        })
+      } else if(value == 209) {
         this.setState({
           faceFailReason: '用户信息核查未通过。请确认客户与其提供的证件信息一致后，再提交核查。[#'+ value + '#]'
         })
@@ -816,9 +765,22 @@ class Video extends Component {
   }
   contrastFaceVerify = async () => {
     try {
+      let userInfo = this.state.userIdCardResults[this.state.faceCustomerUid]
+      console.log(this.state.faceCustomerUid, userInfo)
+      if (!userInfo || !userInfo.idCardNumber) {
+        console.log('没有身份证ocr信息')
+        this.setState({
+          loadingFace: false,
+          faceResuly: 'fail',
+          isFaceImage: '',
+          // faceFailReason: result.message
+        })
+        this.errorCodeClick('face', 201)
+        return
+      }
       let result = await API.contrastFaceVerify({
-        idCardNumber: this.state.idCardNumberFace,
-        idCardName: this.state.idCardNameFace,
+        idCardName: userInfo.idCardName, // idCardName: this.state.idCardNameFace,
+        idCardNumber: userInfo.idCardNumber, // idCardNumber: this.state.idCardNumberFace,
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         appAccount: this.state.faceCustomerUid,
@@ -832,7 +794,10 @@ class Video extends Component {
           loadingFace: false,
           faceResuly: 'success',
           isFaceImage: '',
-          faceFailReason: ''
+          faceFailReason: '',
+          idCardNameFace: userInfo.idCardName,
+          idCardNumberFace: userInfo.idCardNumber,
+          certificateValidityFace: userInfo.certificateValidity
         })
         // this.setState({
         //   isModalVisibleFacial: false
@@ -846,6 +811,8 @@ class Video extends Component {
           // faceFailReason: result.message
         })
         this.errorCodeClick('face',result.code)
+        // this.saveLog('meeting ID&V error, code=' + result.code )
+        this.saveLog('face recognition api error code ' + result.code + '. [ LIVE_SIGN_ALI_FACE_RECOGNITION_ERROR ]')
       }
 
 
@@ -899,112 +866,17 @@ class Video extends Component {
   // 获取人员客户列表
   selectCustomer = (val) => {
     const list = []
-    if (document.getElementById('video1').name && !this.state.isPIBIntranet[0].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid,
-        name: this.state.videoOneName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video2').name && !this.state.isPIBIntranet[1].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid,
-        name: this.state.videoTwoName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video3').name && !this.state.isPIBIntranet[2].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid,
-        name: this.state.videoThreeName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video4').name && !this.state.isPIBIntranet[3].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid,
-        name: this.state.videoFourName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video5').name && !this.state.isPIBIntranet[4].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText))
-      // document.getElementById("feedId1").innerText
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid,
-        name: this.state.videoFiveName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video6').name && !this.state.isPIBIntranet[5].type) {
-      console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText))
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid,
-        name: this.state.videoSixName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video7').name && !this.state.isPIBIntranet[6].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid,
-        name: this.state.videoSevenName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video8').name && !this.state.isPIBIntranet[7].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid,
-        name: this.state.videoEightName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video9').name && !this.state.isPIBIntranet[8].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid,
-        name: this.state.videoNineName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video10').name && !this.state.isPIBIntranet[9].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid,
-        name: this.state.videoTenName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video11').name  && !this.state.isPIBIntranet[10].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid,
-        name: this.state.videoElevenName,
-        tourist: false
-      })
-    }
-    if (document.getElementById('video12').name && !this.state.isPIBIntranet[11].type) {
-      list.push({
-        feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).feedId,
-        customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid,
-        name: this.state.videoTwelveName,
-        tourist: false
-      })
+    for (let i =1;i<=12;i++){
+      let item = this.state.videoList[i-1];
+      if (document.getElementById('video'+ i).name && !item.isPIBIntranet && item.userSide===1) {
+        // console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText))
+        list.push({
+          feedId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).feedId,
+          customId: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid,
+          name: item.videoName,
+          tourist: false
+        })
+      }
     }
     console.log(list)
     this.setState({
@@ -1018,7 +890,7 @@ class Video extends Component {
           isCustomerSelect: true,
           customerSelect: list.length == 1 ? 1 : '',
 
-          customerTitleName: '客户身份识别'
+          customerTitleName: '客户身份验证'
         },()=>{
           console.log(this.state.customerSelect)
           this.setState({
@@ -1083,7 +955,7 @@ class Video extends Component {
     if (this.isFileSuccuse()) {
       this.state.faceCustomerType = 1
       this.setState({
-        titleModal: '人脸识别'
+        titleModal: '身份验证'
       })
       this.selectCustomer('facial')
     }
@@ -1092,7 +964,7 @@ class Video extends Component {
     if (this.isFileSuccuse()) {
       this.state.faceCustomerType = 2
       this.setState({
-        titleModal: 'OCR识别'
+        titleModal: '拍摄证件照片'
       })
       this.selectCustomer('ocr')
     }
@@ -1125,110 +997,28 @@ class Video extends Component {
   pictureInPictureClick = (val) => {
     let interval
     const list = []
-    if (document.getElementById('video1').name) {
-      list.push({
-        name: 'video1',
-        title: this.state.videoOneName,
-        voice: 'voiceVideoOne',
-        noVideo: this.state.noVideoOne
-      })
-    }
     if (document.getElementById('publish_video1').name) {
       list.push({
         name: 'publish_video1',
         title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '客户经理1',
-        voice: 'voiceStatue',
+        mute: this.state.voiceStatue,
         noVideo: false
       })
     }
-    if (document.getElementById('video2').name) {
-      list.push({
-        name: 'video2',
-        title: this.state.videoTwoName,
-        voice: 'voiceVideoTwo',
-        noVideo: this.state.noVideoTwo
-      })
-    }
-    if (document.getElementById('video3').name) {
-      list.push({
-        name: 'video3',
-        title: this.state.videoThreeName,
-        voice: 'voiceVideoThree',
-        noVideo: this.state.noVideoThree
-      })
-    }
-    if (document.getElementById('video4').name) {
-      list.push({
-        name: 'video4',
-        title: this.state.videoFourName,
-        voice: 'voiceVideoFour',
-        noVideo: this.state.noVideoFour
-      })
-    }
-    if (document.getElementById('video5').name) {
-      list.push({
-        name: 'video5',
-        title: this.state.videoFiveName,
-        voice: 'voiceVideoFive',
-        noVideo: this.state.noVideoFive
-      })
-    }
-    if (document.getElementById('video6').name) {
-      list.push({
-        name: 'video6',
-        title: this.state.videoSixName,
-        voice: 'voiceVideoSix',
-        noVideo: this.state.noVideoSix
-      })
-    }
-
-    if (document.getElementById('video7').name) {
-      list.push({
-        name: 'video7',
-        title: this.state.videoSevenName,
-        voice: 'voiceVideoSeven',
-        noVideo: this.state.noVideoSeven
-      })
-    }
-    if (document.getElementById('video8').name) {
-      list.push({
-        name: 'video8',
-        title: this.state.videoEightName,
-        voice: 'voiceVideoEight',
-        noVideo: this.state.noVideoEight
-      })
-    }
-    if (document.getElementById('video9').name) {
-      list.push({
-        name: 'video9',
-        title: this.state.videoNineName,
-        voice: 'voiceVideoNine',
-        noVideo: this.state.noVideoNine
-      })
-    }
-    if (document.getElementById('video10').name) {
-      list.push({
-        name: 'video10',
-        title: this.state.videoTenName,
-        voice: 'voiceVideoTen',
-        noVideo: this.state.noVideoTen
-      })
-    }
-    if (document.getElementById('video11').name) {
-      list.push({
-        name: 'video11',
-        title: this.state.videoElevenName,
-        voice: 'voiceVideoEleven',
-        noVideo: this.state.noVideoEleven
-      })
-    }
-    if (document.getElementById('video12').name) {
-      list.push({
-        name: 'video12',
-        title: this.state.videoTwelveName,
-        voice: 'voiceVideoTwelve',
-        noVideo: this.state.noVideoTwelve
-      })
+    console.log(this.state.videoList)
+    var sortedlist = [...this.state.videoList]
+    sortedlist.sort((a, b)=>{
+      return a.order - b.order;
+    })
+    for (let i =1;i<=12;i++){
+      if(document.getElementById('video'+i).name){
+        list.push({
+          name: 'video' + i,
+          title: sortedlist[i-1].videoName,
+          mute: sortedlist[i-1].mute,
+          noVideo: sortedlist[i-1].noVideo
+        })
+      }
     }
     console.log(list)
     this.state.listVideoPicture = list
@@ -1349,7 +1139,7 @@ class Video extends Component {
         let microphoneSize = 50
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
-        if (this.state[this.state.listVideoPicture[i].voice]) {
+        if (this.state.listVideoPicture[i].mute) {
           cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
         } else {
           cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
@@ -1514,167 +1304,38 @@ class Video extends Component {
       //     this.endSession('customerHangUp')
       //   }
       // } 
-      else if (Mival.typeId == 3002) {
+      else if (Mival.typeId == 3002) { // app进入后台
         if (Mival.data.sessionId == this.state.sessionId) {
-          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            this.setState({
-              noVideoOne: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwo: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            this.setState({
-              noVideoThree: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-
-            this.setState({
-              noVideoFour: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            this.setState({
-              noVideoFive: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSix: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSeven: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            this.setState({
-              noVideoEight: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-
-            this.setState({
-              noVideoNine: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            this.setState({
-              noVideoTen: true
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-
-            this.setState({
-              noVideoEleven: true
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwelve: true
-            })
+          for(let i=1;i<=12;i++){
+            if(Mival.data.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+                  this.state.videoList[i-1].noVideo = true
+              }
           }
-          if (this.state.isPictureInPicture) {
+          this.setState({
+            videoList: this.state.videoList
+          }, ()=>{
             this.pictureInPicture('Refresh')
-          }
-
+          })
         }
       }
-      else if (Mival.typeId == 3003) {
+      else if (Mival.typeId == 3003) { // app进入前台
         if (Mival.data.sessionId == this.state.sessionId) {
-          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            this.setState({
-              noVideoOne: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwo: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            this.setState({
-              noVideoThree: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-
-            this.setState({
-              noVideoFour: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            this.setState({
-              noVideoFive: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSix: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-
-            this.setState({
-              noVideoSeven: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            this.setState({
-              noVideoEight: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-
-            this.setState({
-              noVideoNine: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            this.setState({
-              noVideoTen: false
-            })
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-
-            this.setState({
-              noVideoEleven: false
-            })
-          }
-          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-
-            this.setState({
-              noVideoTwelve: false
-            })
+          for(let i=1;i<=12;i++){
+            if(Mival.data.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+                  this.state.videoList[i-1].noVideo = false
+              }
           }
-          if (this.state.isPictureInPicture) {
+          this.setState({
+            videoList: this.state.videoList
+          }, ()=>{
             this.pictureInPicture('Refresh')
-          }
+          })
         }
       }
       else if (Mival.typeId == 1220) {
         // 一炒多的图片  1214
         if (Mival.sessionId == this.state.sessionId) {
-          this.saveLog('imgCallback success' + Mival.data.type)
+          this.saveLog('imgCallback success,  typeId=1220, type=' + Mival.data.type)
           this.tabTitlesClick('customerScreen', 'delect')
           this.props.imgCallback({
             type: Mival.data.type + '',
@@ -1685,11 +1346,12 @@ class Video extends Component {
         }
       } else if (Mival.typeId == 1321) {
         this.getBase64Image(Mival.fileName)
+        this.saveLog('signCallback success, typeId=1321, fileName=' + Mival.fileName)
       } else if (Mival.typeId == 1216) {
         // 签字回调  1213
         if (Mival.sessionId == this.state.sessionId) {
           this.tabTitlesClick('customerScreen', 'delect')
-          this.saveLog('signatureCallback success')
+          this.saveLog('signatureCallback success, typeId=1216,')
           this.props.signatureCallback({
             errorType: 0
           })
@@ -1699,6 +1361,7 @@ class Video extends Component {
           // 1-开启，2-关闭
           if (Mival.type == 1) {
             this.switchExternal()
+            this.saveLog('whiteboard start, typeId=1218,')
           } else if (Mival.type == 2) {
             if (streamShare) {
               streamShare.getTracks().forEach(track => track.stop());
@@ -1717,174 +1380,35 @@ class Video extends Component {
                 isWhiteboard: false
               })
             }
+            this.saveLog('whiteboard close, typeId=1218,')
           }
 
         }
 
       } else if (Mival.typeId == 3100) {
-        if (Mival.data.sessionId == this.state.sessionId) {
-          muteJson.set(Mival.data.userId, JSON.stringify(Mival))
-          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoOne: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoOne: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoTwo: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoTwo: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoThree: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoThree: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoFour: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoFour: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoFive: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoFive: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoSix: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoSix: true
-              })
-            }
-
-          }
-
-          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoSeven: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoSeven: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoEight: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoEight: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoNine: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoNine: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoTen: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoTen: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoEleven: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoEleven: true
-              })
-            }
-
-          }
-          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-            muteJson.delete(Mival.data.userId)
-            if (Mival.muteStatus == 0) {
-              this.setState({
-                voiceVideoTwelve: false
-              })
-            } else if (Mival.muteStatus == 1) {
-              this.setState({
-                voiceVideoTwelve: true
-              })
-            }
-
+        if(Mival.data.sessionId == this.state.sessionId) {
+          muteJson.set(Mival.data.userId, JSON.stringify(Mival)) 
+          for(let i=1;i<=12;i++){
+            if(Mival.data.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+              muteJson.delete(Mival.data.userId) 
+              if(Mival.muteStatus == 0) {
+                  this.state.videoList[i-1].mute = false
+                  this.setState({
+                    videoList: this.state.videoList
+                  })
+                } else if(Mival.muteStatus == 1) {
+                  this.state.videoList[i-1].mute = true
+                  this.setState({
+                    videoList: this.state.videoList
+                  })
+                }
+                
+              }
           }
         }
       } else if (Mival.typeId == 121305) {
         if (Mival.sessionId == this.state.sessionId) {
-          this.saveLog('signatureCallback fail')
+          this.saveLog('signatureCallback fail, typeId=121305, ')
           this.props.signatureCallback({
             errorType: -1
           })
@@ -1892,7 +1416,7 @@ class Video extends Component {
       } else if (Mival.typeId == 121405) {
         if (Mival.sessionId == this.state.sessionId) {
           console.log('imgCallback')
-          this.saveLog('imgCallback fail')
+          this.saveLog('imgCallback fail, typeId=121405, ')
           this.props.imgCallback({
             type: '',
             file: '',
@@ -1902,72 +1426,60 @@ class Video extends Component {
       } else if (Mival.typeId == 4001) {
         // 手机端停止投屏
         this.tabTitlesClick('customerScreen', 'delect')
+        this.saveLog('app stop sharing screen, typeId=4001, ')
 
-      } else if (Mival.typeId == 1401) {
-        if (Mival.sessionId == this.state.sessionId) {
-          if (Mival.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            this.setState({
-              videoOneName: Mival.name
-            })
-
-          }
-          if (Mival.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-            this.setState({
-              videoTwoName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            this.setState({
-              videoThreeName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-            this.setState({
-              videoFourName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            this.setState({
-              videoFiveName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            this.setState({
-              videoSixName: Mival.name
-            })
-          }
-
-          if (Mival.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-            this.setState({
-              videoSevenName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-            this.setState({
-              videoEightName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-            this.setState({
-              videoNineName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-            this.setState({
-              videoTenName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
+      } else if (Mival.typeId == 4004) {
+        // 线下demo静音处理
+        if (Mival.data.sessionId == this.state.sessionId && this.isFileSuccuse()) {
+          if (!this.state.voiceStatue) {
+            // 静音本地
             this.setState({
-              videoElevenName: Mival.name
+              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)
             })
           }
-          if (Mival.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-            this.setState({
-              videoTwelveName: Mival.name
-            })
+          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
+              })
+            });
+          }, 1000);
+        }
+      } else if (Mival.typeId == 1401) {
+        // 用户修改名字
+        if (Mival.sessionId == this.state.sessionId) {
+          for(let i=1;i<=12;i++){
+            if(Mival.userId == (document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : '')) {
+              this.state.videoList[i-1].videoName = Mival.name
+              }
           }
-
+          this.setState({
+            videoList: this.state.videoList
+          })
         }
       }
     };
@@ -2124,7 +1636,7 @@ class Video extends Component {
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
-      this.saveLog('Failed to get device')
+      this.saveLog('Failed to get device, code='+code)
       this.state.sessionType = false
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头', 'error')
       this.roomCallBack(2, '获取设备失败', 1)
@@ -2165,6 +1677,7 @@ class Video extends Component {
       } else {
         this.test_controller.CreateRoom()
       }
+      this.saveLog('InitRoomConfig successfully')
 
     };
     // 创建房间成功
@@ -2174,6 +1687,7 @@ class Video extends Component {
       this.state.channelId = room_id,
         this.state.rtoken = rtoken
       this.createRoom()
+      this.saveLog('RM mrtc create room successfully, room_id=' + room_id)
     };
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
@@ -2185,10 +1699,12 @@ class Video extends Component {
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
       console.log('初始化⾳视频成功', sid)
+      this.saveLog('OnMediaCallSucc:' + sid)
     };
     // 初始化音视频失败
     this.test_controller.OnMediaCallFail = (err_code, err_msg) => {
       console.log('初始化音视频失败', err_code, err_msg)
+      this.saveLog('OnMediaCallFail, code=' + err_code)
     };
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
@@ -2219,10 +1735,11 @@ class Video extends Component {
       publish_config.publish_tag = 'tag1'
       this.test_controller.Publish(publish_config)
       this.roomCallBack(1, '', 0)
+      this.saveLog('mrtc join room success')
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
-      this.saveLog('Join room failed，' + err_code)
+      this.saveLog('mrtc join room failed，' + err_code)
       console.log('加入房间失败', err_code, err_msg)
       // this.setState({
       //   sessionType: false,
@@ -2254,12 +1771,14 @@ class Video extends Component {
         documentError: '',
         isModalVisibleCustomer: false,
       })
+      this.saveLog('mrtc OnSendTextMsgSucc:' + msgId)
     }
     this.test_controller.OnSendTextMsgFailed = (msgId, code, msg) => {
       console.log('发送失败', msgId, code, msg)
       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)
@@ -2269,6 +1788,49 @@ class Video extends Component {
           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)
     }
     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}`);
@@ -2414,204 +1976,62 @@ class Video extends Component {
           },
           1000
         );
-      } else {
-        var box = document.getElementById("whiteboardDIV");
-        var box1 = document.getElementById("operate")
-        var height = box1 ? box1.offsetHeight : 40
-        var width = this.state.whiteboardHeight * document.getElementById("video20").videoWidth / document.getElementById("video20").videoHeight
-        if (box) { //此处在加一层判断，更加严密，如果box存在的情况下获取
-          this.setState({
-            widthVideo: width,
-            whiteboardTop: box.getBoundingClientRect().top - height,
-            whiteboardLeft: box.getBoundingClientRect().left,
-            leftVideo: (box.offsetWidth - width) / 2 + box.getBoundingClientRect().left
-          })
-          console.log('whiteboardVideo20', this.state.whiteboardTop, this.state.whiteboardLeft, this.state.widthVideo, this.state.leftVideo)
-
-        }
-      }
-    };
-    // 发布媒体流失败
-    this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
-      this.saveLog('发布失败' + err_code)
-      console.log('Publishing media stream failed，', sid, err_code, err_msg)
-      if (sid == document.getElementById('publish_video1').name) {
-        this.state.sessionType = false
-        this.roomCallBack(2, '发布失败', 4)
-      } else {
-        this.messageClick('投屏失败请重新投屏', 'error')
-      }
-
-    };
-    // 订阅媒体流成功
-    this.test_controller.OnSubscribeSucc = (feed, sid) => {
-      console.log('订阅媒体流成功', feed, sid);
-      
-      this.appGetUsername(sid)
-      console.log(muteJson, muteJson.size)
-      if (muteJson.size > 0) {
-        let userId = ''
-        if (muteJson.get(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid)) {
-          userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoOne: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoOne: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-          userId = document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoTwo: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoTwo: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-          userId = document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoThree: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoThree: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-          userId = document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoFour: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoFour: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-          userId = document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoFive: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoFive: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-          userId = document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoSix: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoSix: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
-          userId = document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoSeven: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoSeven: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
-          userId = document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : ''
-
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoEight: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoEight: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
-          userId = document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : ''
-
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoNine: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoNine: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
-          userId = document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : ''
+      } else {
+        var box = document.getElementById("whiteboardDIV");
+        var box1 = document.getElementById("operate")
+        var height = box1 ? box1.offsetHeight : 40
+        var width = this.state.whiteboardHeight * document.getElementById("video20").videoWidth / document.getElementById("video20").videoHeight
+        if (box) { //此处在加一层判断，更加严密，如果box存在的情况下获取
+          this.setState({
+            widthVideo: width,
+            whiteboardTop: box.getBoundingClientRect().top - height,
+            whiteboardLeft: box.getBoundingClientRect().left,
+            leftVideo: (box.offsetWidth - width) / 2 + box.getBoundingClientRect().left
+          })
+          console.log('whiteboardVideo20', this.state.whiteboardTop, this.state.whiteboardLeft, this.state.widthVideo, this.state.leftVideo)
 
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoTen: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoTen: true
-            })
-          }
-          muteJson.delete(userId)
         }
-        if (muteJson.get(document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
-          userId = document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : ''
+      }
+    };
+    // 发布媒体流失败
+    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) {
+        this.state.sessionType = false
+        this.roomCallBack(2, '发布失败', 4)
+      } else {
+        this.messageClick('投屏失败请重新投屏', 'error')
+      }
 
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoEleven: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoEleven: true
-            })
-          }
-          muteJson.delete(userId)
-        }
-        if (muteJson.get(document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-          userId = document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : ''
-          if (JSON.parse(muteJson.get(userId)).muteStatus == 0) {
-            this.setState({
-              voiceVideoTwelve: false
-            })
-          } else if (JSON.parse(muteJson.get(userId)).muteStatus == 1) {
-            this.setState({
-              voiceVideoTwelve: true
-            })
-          }
-          muteJson.delete(userId)
+    };
+    // 订阅媒体流成功
+    this.test_controller.OnSubscribeSucc = (feed, sid) => {
+      console.log('订阅媒体流成功', feed, sid);
+      
+      this.appGetUsername(sid)
+      console.log(muteJson, muteJson.size)
+      if(muteJson.size > 0) {
+        for(let i=1;i<=12;i++){
+          const userId = document.getElementById("feedId"+i).innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid : ''
+          console.log(muteJson.get(userId))
+          if(muteJson.get(userId)) {
+             
+            if(JSON.parse(muteJson.get(userId)).muteStatus == 0) {
+                this.state.videoList[i-1].mute = false
+                this.setState({
+                  videoList: this.state.videoList
+                })
+              } else if(JSON.parse(muteJson.get(userId)).muteStatus == 1) {
+                this.state.videoList[i-1].mute = true
+                this.setState({
+                  videoList: this.state.videoList
+                })
+              }
+              muteJson.delete(userId)
+            }
         }
-        console.log(muteJson, muteJson.length)
+        console.log(muteJson,muteJson.length)
       }
     };
     // 订阅媒体流失败
@@ -2672,120 +2092,23 @@ class Video extends Component {
                   }, 'add'
                 )
               } else {
-                if (!document.getElementById('video1').name) {
-                  config_param = {
-                    subscribe_video_id: 'video1',
-                    subscribe_audio_id: 'audio1',
-                    subscribe_streamId_id: 'subscribe_streamId1',
-                    feedId_id: 'feedId1',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video2').name) {
-                  config_param = {
-                    subscribe_video_id: 'video2',
-                    subscribe_audio_id: 'audio2',
-                    subscribe_streamId_id: 'subscribe_streamId2',
-                    feedId_id: 'feedId2',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video3').name) {
-                  config_param = {
-                    subscribe_video_id: 'video3',
-                    subscribe_audio_id: 'audio3',
-                    subscribe_streamId_id: 'subscribe_streamId3',
-                    feedId_id: 'feedId3',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video4').name) {
-                  config_param = {
-                    subscribe_video_id: 'video4',
-                    subscribe_audio_id: 'audio4',
-                    subscribe_streamId_id: 'subscribe_streamId4',
-                    feedId_id: 'feedId4',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video5').name) {
-                  config_param = {
-                    subscribe_video_id: 'video5',
-                    subscribe_audio_id: 'audio5',
-                    subscribe_streamId_id: 'subscribe_streamId5',
-                    feedId_id: 'feedId5',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video6').name) {
-                  config_param = {
-                    subscribe_video_id: 'video6',
-                    subscribe_audio_id: 'audio6',
-                    subscribe_streamId_id: 'subscribe_streamId6',
-                    feedId_id: 'feedId6',
-                    feedId: itemOne.feedId
-                  }
-                }
-
-                else if (!document.getElementById('video7').name) {
-                  config_param = {
-                    subscribe_video_id: 'video7',
-                    subscribe_audio_id: 'audio7',
-                    subscribe_streamId_id: 'subscribe_streamId7',
-                    feedId_id: 'feedId7',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video8').name) {
-                  config_param = {
-                    subscribe_video_id: 'video8',
-                    subscribe_audio_id: 'audio8',
-                    subscribe_streamId_id: 'subscribe_streamId8',
-                    feedId_id: 'feedId8',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video9').name) {
-                  config_param = {
-                    subscribe_video_id: 'video9',
-                    subscribe_audio_id: 'audio9',
-                    subscribe_streamId_id: 'subscribe_streamId9',
-                    feedId_id: 'feedId9',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video10').name) {
-                  config_param = {
-                    subscribe_video_id: 'video10',
-                    subscribe_audio_id: 'audio10',
-                    subscribe_streamId_id: 'subscribe_streamId10',
-                    feedId_id: 'feedId10',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video11').name) {
-                  config_param = {
-                    subscribe_video_id: 'video11',
-                    subscribe_audio_id: 'audio11',
-                    subscribe_streamId_id: 'subscribe_streamId11',
-                    feedId_id: 'feedId11',
-                    feedId: itemOne.feedId
-                  }
-                }
-                else if (!document.getElementById('video12').name) {
-                  config_param = {
-                    subscribe_video_id: 'video12',
-                    subscribe_audio_id: 'audio12',
-                    subscribe_streamId_id: 'subscribe_streamId12',
-                    feedId_id: 'feedId12',
-                    feedId: itemOne.feedId
-                  }
+                for (let i=1;i<=12;i++){
+                  if(!document.getElementById('video'+i).name) {
+                      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
+                      }
+                      break;
+                    }
                 }
               }
               if (config_param !== undefined) {
                 config_param.need_volume_analyser = true
                 console.log(config_param)
-
+                console.log('发起订阅')
                 this.test_controller.Subscribe(config_param)
 
               }
@@ -2797,6 +2120,7 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
+      this.saveLog('mrtc someone joined room, userId=' + participant)
       this.state.isCustomer = true
     };
     // 推送“有新发布”给与会者
@@ -2887,113 +2211,17 @@ class Video extends Component {
 
           }
         } else {
-          if (!document.getElementById('video1').name) {
-            config_param = {
-              subscribe_video_id: 'video1',
-              subscribe_audio_id: 'audio1',
-              subscribe_streamId_id: 'subscribe_streamId1',
-              feedId_id: 'feedId1',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video2').name) {
-            config_param = {
-              subscribe_video_id: 'video2',
-              subscribe_audio_id: 'audio2',
-              subscribe_streamId_id: 'subscribe_streamId2',
-              feedId_id: 'feedId2',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video3').name) {
-            config_param = {
-              subscribe_video_id: 'video3',
-              subscribe_audio_id: 'audio3',
-              subscribe_streamId_id: 'subscribe_streamId3',
-              feedId_id: 'feedId3',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video4').name) {
-            config_param = {
-              subscribe_video_id: 'video4',
-              subscribe_audio_id: 'audio4',
-              subscribe_streamId_id: 'subscribe_streamId4',
-              feedId_id: 'feedId4',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video5').name) {
-            config_param = {
-              subscribe_video_id: 'video5',
-              subscribe_audio_id: 'audio5',
-              subscribe_streamId_id: 'subscribe_streamId5',
-              feedId_id: 'feedId5',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video6').name) {
-            config_param = {
-              subscribe_video_id: 'video6',
-              subscribe_audio_id: 'audio6',
-              subscribe_streamId_id: 'subscribe_streamId6',
-              feedId_id: 'feedId6',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video7').name) {
-            config_param = {
-              subscribe_video_id: 'video7',
-              subscribe_audio_id: 'audio7',
-              subscribe_streamId_id: 'subscribe_streamId7',
-              feedId_id: 'feedId7',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video8').name) {
-            config_param = {
-              subscribe_video_id: 'video8',
-              subscribe_audio_id: 'audio8',
-              subscribe_streamId_id: 'subscribe_streamId8',
-              feedId_id: 'feedId8',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video9').name) {
-            config_param = {
-              subscribe_video_id: 'video9',
-              subscribe_audio_id: 'audio9',
-              subscribe_streamId_id: 'subscribe_streamId9',
-              feedId_id: 'feedId9',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video10').name) {
-            config_param = {
-              subscribe_video_id: 'video10',
-              subscribe_audio_id: 'audio10',
-              subscribe_streamId_id: 'subscribe_streamId10',
-              feedId_id: 'feedId10',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video11').name) {
-            config_param = {
-              subscribe_video_id: 'video11',
-              subscribe_audio_id: 'audio11',
-              subscribe_streamId_id: 'subscribe_streamId11',
-              feedId_id: 'feedId11',
-              feedId: feed.feedId
-            }
-          }
-          else if (!document.getElementById('video12').name) {
-            config_param = {
-              subscribe_video_id: 'video12',
-              subscribe_audio_id: 'audio12',
-              subscribe_streamId_id: 'subscribe_streamId12',
-              feedId_id: 'feedId12',
-              feedId: feed.feedId
-            }
+          for (let i=1;i<=12;i++){
+            if(!document.getElementById('video'+i).name) {
+                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
+                }
+                break;
+              }
           }
           if (config_param !== undefined) {
             config_param.need_volume_analyser = true
@@ -3051,126 +2279,26 @@ class Video extends Component {
           }
         }
       })
-      if (!document.getElementById("video1").name) {
-        this.state.isPIBIntranet[0].type = false
-        this.setState({
-          videoOneName: '',
-          voiceVideoOne: false,
-          noVideoOne: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video2").name) {
-        this.state.isPIBIntranet[1].type = false
-        this.setState({
-          videoTwoName: '',
-          voiceVideoTwo: false,
-          noVideoTwo: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video3").name) {
-        this.state.isPIBIntranet[2].type = false
-        this.setState({
-          videoThreeName: '',
-          voiceVideoThree: false,
-          noVideoThree: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video4").name) {
-        this.state.isPIBIntranet[3].type = false
-        this.setState({
-          videoFourName: '',
-          voiceVideoFour: false,
-          noVideoFour: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video5").name) {
-        this.state.isPIBIntranet[4].type = false
-        this.setState({
-          videoFiveName: '',
-          voiceVideoFive: false,
-          noVideoFive: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video6").name) {
-        this.state.isPIBIntranet[5].type = false
-        this.setState({
-          videoSixName: '',
-          voiceVideoSix: false,
-          noVideoSix: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-
-      if (!document.getElementById("video7").name) {
-        this.state.isPIBIntranet[6].type = false
-        this.setState({
-          videoSevenName: '',
-          voiceVideoSeven: false,
-          noVideoSeven: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video8").name) {
-        this.state.isPIBIntranet[7].type = false
-        this.setState({
-          videoEightName: '',
-          voiceVideoEight: false,
-          noVideoEight: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video9").name) {
-        this.state.isPIBIntranet[8].type = false
-        this.setState({
-          videoNineName: '',
-          voiceVideoNine: false,
-          noVideoNine: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video10").name) {
-        this.state.isPIBIntranet[9].type = false
-        this.setState({
-          videoTenName: '',
-          voiceVideoTen: false,
-          noVideoTen: false
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (!document.getElementById("video11").name) {
-        this.state.isPIBIntranet[10].type = false
-        this.setState({
-          videoElevenName: '',
-          voiceVideoEleven: false,
-          noVideoEleven: false
-        },()=>{
-          this.videoListClick()
-        })
+      for(let i=1;i<=12;i++){
+        if(!document.getElementById("video"+i).name) {
+          this.state.videoList[i-1]= {
+            ...this.state.videoList[i-1],
+            videoName: '',
+            mute: false,
+            noVideo: false,
+            isPIBIntranet: false,
+            userSide: '',
+            userType: '',
+            userId: '',
+            hasOcr: 0,
+          }
+          this.setState({
+            videoList: this.state.videoList
+          })
+        }
       }
-      if (!document.getElementById("video12").name) {
-        this.state.isPIBIntranet[11].type = false
-        this.setState({
-          videoTwelveName: '',
-          voiceVideoTwelve: false,
-          noVideoTwelve: false
-        },()=>{
-          this.videoListClick()
-        })
+      if (!document.getElementById("video1").name) {
+        document.getElementById('audio1').muted = false
       }
       this.state.analyserData.delete(sid)
       if (this.state.isPictureInPicture) {
@@ -3225,6 +2353,7 @@ class Video extends Component {
         let data = res ? res.username ? res.username : '客户' : '客户'
         console.log(data)
         this.messageClick((data + '已退出会议'), 'error')
+        this.saveLog(data + ' leave room')
         if (res.userType == 1) {
           // 2--坐席  1--客户
           this.props.userExit({
@@ -3255,6 +2384,7 @@ class Video extends Component {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
       if (sid == document.getElementById('publish_video1').name) {
         this.messageClick('当前网络环境较差', 'error')
+        this.saveLog('mrtc OnNetworkWeak')
       }
     };
     // 开始服务端录制成功
@@ -3262,6 +2392,7 @@ class Video extends Component {
       console.log('开始服务端录制成功', record_id);
       this.state.recordId = record_id
       this.videoRecordCallback('1', true)
+      this.saveLog('mrtc OnStartRemoteRecordSucc')
     };
     // 开始服务端录制失败
     this.test_controller.OnStartRemoteRecordFailed = (
@@ -3271,11 +2402,13 @@ class Video extends Component {
     ) => {
       this.videoRecordCallback('1', false)
       console.log('开始服务端录制失败', record_id, err_code, err_msg)
+      this.saveLog('mrtc OnStartRemoteRecordFailed, code='+err_code)
     };
     // 结束服务端录制成功
     this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
       console.log('结束服务端录制成功', recordId);
       this.videoRecordCallback('2', true)
+      this.saveLog('mrtc OnStopRemoteRecordSucc, recordId='+recordId)
       // this.endSessionValue()
       // 获取服务端录制结果
     };
@@ -3287,6 +2420,7 @@ class Video extends Component {
     ) => {
       this.videoRecordCallback('2', false)
       console.log('结束服务端录制失败', recordId, err_code, err_msg)
+      this.saveLog('mrtc OnStopRemoteRecordFailed, err_code='+err_code)
     };
     // 开启浏览器录制成功
     this.test_controller.OnClientStartRecordSuccess = (
@@ -3432,6 +2566,7 @@ class Video extends Component {
       msg
     ) => {
       console.log('切流失败通知', sid, code, msg)
+      this.saveLog('mrtc OnChangeMediaStreamFailed, code=' + code)
       if (this.state.loading) {
         this.setState({
           loading: false
@@ -3674,6 +2809,13 @@ class Video extends Component {
       clearStreamRemain()
       this.test_controller.LeaveRoom()
       this.test_controller.Disconnect()
+      try {
+        beautySetMode('none');
+        beautyStop();
+        console.log('beautyStop!!')
+      } catch (err){
+        console.error(err)
+      }
     }
     if (this.state.imStatus) {
       console.log('disconnect断开连接')
@@ -3871,7 +3013,21 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.81')
+    console.log('hsbc_teller_sdk', '2.0.0')
+    let arr = []
+    for(let i=1;i<=12;i++){
+      arr.push({
+        videoName: '',
+        mute: false,
+        noVideo: false,
+        isPIBIntranet: false,
+        idIndex: i,
+        hasOcr: 0,
+      })
+    }
+    this.setState({
+      videoList: arr
+    })
     if (this.props.sessionId) {
       this.getRoomStatus({
         sessionId: this.props.sessionId
@@ -4218,7 +3374,8 @@ class Video extends Component {
         isModalVisibleSFP: false,
         disabledIdCard: false,
         isStaffState: 'success',
-        loadingStaff: false
+        loadingStaff: false,
+        authorizeStaffId:  this.state.StaffidSFP,
       })
     }).catch((err) => {
       console.log(err)
@@ -4241,60 +3398,112 @@ class Video extends Component {
       PasswordSFP: event.target.value
     })
   }
+  handleFinishOcr = async (type) => {
+    // 非身份证直接入库
+    if (type == 'noFace') {
+      await this.confirmCallback()
+      // this.setState({
+      //   idCardNameFace: this.state.idCardName,
+      //   idCardNumberFace: this.state.idCardNumber,
+      //   certificateValidityFace: this.state.certificateValidity
+      // },()=>{
+      this.setState({
+        isModalVisibleFacial: false,
+        cardResuly: '',
+        idCardNumber: '',
+        idCardName: '',
+        certificateValidity: '',
+        resultIdCardName: '',
+        resultIdCardNumber: '',
+        resultCertificateDate: '',
+        authorizeStaffId: ''
+      })
+    // })
+    } else {
+      console.log('身份证ocr')
+      // 身份证，进行人脸识别后再入库
+      this.state.userIdCardResults[this.state.faceCustomerUid] = {
+        idCardName: this.state.idCardName,
+        idCardNumber: this.state.idCardNumber,
+        customerName: this.state.customerName,
+        certificateValidity: this.state.certificateValidity,
+        resultIdCardName: this.state.resultIdCardName,
+        resultIdCardNumber: this.state.resultIdCardNumber,
+        resultCertificateDate: this.state.resultCertificateDate,
+        authorizeStaffId: this.state.authorizeStaffId,
+      }
+      console.log(this.state.userIdCardResults)
+      this.setState({
+        idCardNameFace: this.state.idCardName,
+        idCardNumberFace: this.state.idCardNumber,
+        certificateValidityFace: this.state.certificateValidity,
+        userIdCardResults: this.state.userIdCardResults
+      },()=>{
+      this.state.faceCustomerType = 1
+        this.setState({
+        cardResuly: '',
+        certificateValidity: '',
+        idCardNumber: '',
+        idCardName: '',
+        resultIdCardName: '',
+        resultIdCardNumber: '',
+        resultCertificateDate: '',
+        authorizeStaffId: '',
+        titleModal: '身份验证',
+        // clickedFacial: true,
+        facialImg: faceImage,
+        isFaceImage: false
+        })
+      })
+      setTimeout(() => {
+        this.publishVideoTwo()
+      }, 0);
+    }
+  }
+  // ocr结果入库
   confirmCallback = async (data) => {
     try {
-      let result = await API.confirmCallback({
-        idCardName: this.state.idCardName,
+      // 原始证件参数
+      let data = {
+        idCardName: this.state.resultIdCardName,
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         appAccount: this.state.faceCustomerUid,
-        idCardNumber: this.state.idCardNumber,
+        idCardNumber: this.state.resultIdCardNumber,
         sessionId: this.state.sessionId,
         certificateType: this.state.certificateType,
         customerName: this.state.customerName,
-        startDate: this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '',
-        endDate: this.state.documentType == 'PASSPORT_CARD' ? this.state.certificateValidity ? this.state.certificateValidity.split('-')[0]: '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '',
-      });
+        startDate: this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.resultCertificateDate ? this.state.resultCertificateDate.split('-')[0] : '',
+        endDate: this.state.documentType == 'PASSPORT_CARD' ? this.state.resultCertificateDate ? this.state.resultCertificateDate.split('-')[0]: '' : this.state.resultCertificateDate ? this.state.resultCertificateDate.split('-')[1] : '',
+      }
+      // 添加修改后的证件参数
+      if (this.state.authorizeStaffId) {
+        data.authorizeStaffId = this.state.authorizeStaffId
+      }
+      if (this.state.idCardName != this.state.resultIdCardName) {
+        data.reviseIdCardName = this.state.idCardName
+      }
+      if (this.state.idCardNumber != this.state.resultIdCardNumber) {
+        data.reviseIdCardNumber = this.state.idCardNumber
+      }
+      let reviseCertificateStartDate = this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '';
+      let reviseCertificateEndDate = this.state.documentType == 'PASSPORT_CARD' ? this.state.certificateValidity ? this.state.certificateValidity.split('-')[0]: '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '';
+      if (reviseCertificateStartDate != data.startDate) {
+        data.reviseCertificateStartDate = reviseCertificateStartDate
+      }
+      if (reviseCertificateEndDate != data.endDate) {
+        data.reviseCertificateEndDate = reviseCertificateEndDate
+      }
+      let result = await API.confirmCallback(data);
       console.log('confirmCallback', result)
       if (result.code == 200) {
-        console.log(data)
-        
-        if (data == 'noFace') {
-          this.setState({
-            idCardNameFace: this.state.idCardName,
-            idCardNumberFace: this.state.idCardNumber,
-            certificateValidityFace: this.state.certificateValidity
-          },()=>{
-          this.setState({
-            isModalVisibleFacial: false,
-            cardResuly: '',
-            idCardNumber: '',
-            idCardName: '',
-            certificateValidity: '',
-          })
-        })
-        } else {
-          console.log('data')
-          this.setState({
-            idCardNameFace: this.state.idCardName,
-            idCardNumberFace: this.state.idCardNumber,
-            certificateValidityFace: this.state.certificateValidity
-          },()=>{
-          this.state.faceCustomerType = 1
-            this.setState({
-            cardResuly: '',
-            certificateValidity: '',
-            idCardNumber: '',
-            idCardName: '',
-            titleModal: '人脸识别',
-            // clickedFacial: true,
-            facialImg: ocrImage,
-            isFaceImage: false
-            })
-          })
-          this.publishVideoTwo()
-        }
-      
+        // console.log(data)
+        let item = this.state.videoList.find(el => el.userId == this.state.faceCustomerUid )
+        item.hasOcr = 1; // 非身份证ocr
+        // this.setState({
+        //   videoList: this.state.videoList
+        // })
+        this.videoListSort();
       } else {
         console.log('1')
         this.messageClick('保持信息失败', 'error')
@@ -4335,6 +3544,8 @@ class Video extends Component {
                 this.setState({
                   idCardNumber: result.data.idCardNumber,
                   idCardName: result.data.idCardName,
+                  resultIdCardName:  result.data.idCardName,
+                  resultIdCardNumber: result.data.idCardNumber,
                   loadingFace: false,
                   cardFailReason: '',
                   cardResuly: 'success',
@@ -4343,6 +3554,8 @@ class Video extends Component {
                 this.setState({
                   idCardNumber: result.data.idCardNumber,
                   idCardName: result.data.idCardName,
+                  resultIdCardName:  result.data.idCardName,
+                  resultIdCardNumber: result.data.idCardNumber,
                   certificateValidityType: false,
                   cardFailReason: '证件已过期[#'+result.code+'#]',
                   loadingFace: false,
@@ -4354,7 +3567,9 @@ class Video extends Component {
               this.setState({
                 // isModalVisibleFacial: false
                 idCardNumber: result.data.idCardNumber,
-                idCardName: result.data.idCardName
+                idCardName: result.data.idCardName,
+                resultIdCardName:  result.data.idCardName,
+                resultIdCardNumber: result.data.idCardNumber,
               })
               this.ocrCallback(2)
             }
@@ -4372,6 +3587,7 @@ class Video extends Component {
             if(this.state.idCardName && this.dateNewTime(endDate)) {
               this.setState({
                 certificateValidity: startDate + '-' + endDate,
+                resultCertificateDate: startDate + '-' + endDate,
                 loadingFace: false,
                 cardFailReason: '',
                 cardResuly: 'success',
@@ -4380,6 +3596,7 @@ class Video extends Component {
             } else if(this.state.idCardName && !this.dateNewTime(endDate)) {
               this.setState({
                 certificateValidity: startDate + '-' + endDate,
+                resultCertificateDate: startDate + '-' + endDate,
                 loadingFace: false,
                 certificateValidityType: false,
                 cardFailReason: '证件已过期[#'+result.code+'#]',
@@ -4408,36 +3625,50 @@ class Video extends Component {
           } else {
             this.setState({
               loadingFace: false,
-              cardFailReason: '证件截取顺序有误，请返回重拍[41000]',
+              cardFailReason: '证件截取顺序有误，请返回重拍[#-41000#]',
               cardResuly: 'fail',
             })
           }
         }
         if(this.state.documentType == 'HK_MO_RESIDENCE_CARD' || this.state.documentType == 'TW_RESIDENCE_CARD') {
-          if (result.data.side == 'front') {
+          if (result.data.side == 'front' && val == 1) {
             this.setState({
               // isModalVisibleFacial: false
               idCardNumber: result.data.resident.idNum,
-              idCardName: result.data.resident.name
+              idCardName: result.data.resident.name,
+              resultIdCardName:  result.data.resident.name,
+              resultIdCardNumber: result.data.resident.idNum,
             })
             this.ocrCallback(2)
-          } else if (result.data.side == 'back') {
+          } else if (result.data.side == 'back' && val != 1) {
             console.log(result.data.resident.startDate, result.data.resident.endDate)
             this.setState({
               certificateValidity: result.data.resident.startDate + '-' + result.data.resident.endDate,
+              resultCertificateDate: result.data.resident.startDate + '-' + result.data.resident.endDate,
               loadingFace: false,
               cardFailReason: result.code == 40002 ? '证件已过期[#'+result.code+'#]' : '',
+              certificateValidityType: result.code == 40002 ? false : true,
               cardResuly: 'success',
             })
+          } else {
+            this.setState({
+              loadingFace: false,
+              cardFailReason: '证件截取顺序有误，请返回重拍[#-41000#]',
+              cardResuly: 'fail',
+            })
           }
         }
         if(this.state.documentType == 'PASSPORT_CARD') {
           this.setState({
             idCardNumber: result.data.passport.passportCode,
             idCardName: result.data.passport.nameEN,
+            resultIdCardName: result.data.passport.nameEN,
+            resultIdCardNumber: result.data.passport.passportCode,
             certificateValidity: result.data.passport.expiryDate,
+            resultCertificateDate: result.data.passport.expiryDate,
             loadingFace: false,
             cardFailReason: result.code == 30002 ? '证件已过期[#'+result.code+'#]' : '',
+            certificateValidityType: result.code == 30002 ? false : true,
             cardResuly: 'success',
           })
         }
@@ -4446,9 +3677,13 @@ class Video extends Component {
           this.setState({
             idCardNumber: result.data.permission.cardNum,
             idCardName: result.data.permission.nameEN,
+            resultIdCardName: result.data.permission.nameEN,
+            resultIdCardNumber: result.data.permission.cardNum,
             certificateValidity: result.data.permission.validDate,
+            resultCertificateDate: result.data.permission.validDate,
             loadingFace: false,
             cardFailReason: result.code == 50002 ? '证件已过期[#'+result.code+'#]' : '',
+            certificateValidityType: result.code == 50002 ? false : true,
             cardResuly: 'success',
           })
         }
@@ -4475,7 +3710,7 @@ class Video extends Component {
   }
   handleOkFacial = () => {
     if (this.state.faceCustomerType == 2) {
-      if (this.state.IDtypeFrontOrBack == '请截取证件头像面') {
+      if (this.state.IDtypeFrontOrBack == IDtypeFront) {
         if(this.state.documentType == 'PASSPORT_CARD' || this.state.documentType == 'TW_PASS_CARD' || this.state.documentType == 'HK_MO_PASS_CARD') {
           this.setState({
             loadingFace: true
@@ -4484,30 +3719,89 @@ class Video extends Component {
         } else {
           this.setState({
             facialImg: ocrImage,
-            IDtypeFrontOrBack: '请截取证件国徽面',
+            IDtypeFrontOrBack: IDtypeBack,
             isFaceImage: false,
           })
         }
         
-      } else if (this.state.IDtypeFrontOrBack == '请截取证件国徽面') {
+      } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
         this.setState({
           loadingFace: true
         })
         this.ocrCallback(1)
       }
-      // ocr
-    } else {
-      this.setState({
-        loadingFace: true
-      })
-      this.contrastFaceVerify()
-      //   const frontIdcard = new File([this.dataURLtoFile(this.state.facialImg, 'image/jpeg')], new Date() + '.png'); // 重命名了
-      // const formData = new FormData();
-      // formData.append('file', frontIdcard);
-      // formData.append('sessionId', this.state.sessionId);
-      // this.uploadImg(formData)
+      // ocr
+    } else {
+      this.setState({
+        loadingFace: true
+      })
+      this.contrastFaceVerify()
+      //   const frontIdcard = new File([this.dataURLtoFile(this.state.facialImg, 'image/jpeg')], new Date() + '.png'); // 重命名了
+      // const formData = new FormData();
+      // formData.append('file', frontIdcard);
+      // formData.append('sessionId', this.state.sessionId);
+      // this.uploadImg(formData)
+    }
+
+  };
+  handleFinishFacial = async () => {
+    let userInfo = this.state.userIdCardResults[this.state.faceCustomerUid]
+    console.log(this.state.faceCustomerUid, userInfo)
+    if (!userInfo || !userInfo.idCardNumber) {
+      console.log('没有身份证ocr信息')
+      return
+    }
+    this.handleCancelFacial();
+    try {
+      // 原始证件参数
+      let data = {
+        idCardName: userInfo.resultIdCardName,
+        staffId: this.props.tellerAccount,
+        activityId: this.props.businessNumber,
+        appAccount: this.state.faceCustomerUid,
+        idCardNumber: userInfo.resultIdCardNumber,
+        sessionId: this.state.sessionId,
+        certificateType: 'ID_CARD',
+        customerName: userInfo.customerName,
+        startDate: userInfo.resultCertificateDate ? userInfo.resultCertificateDate.split('-')[0] : '',
+        endDate: userInfo.resultCertificateDate ? userInfo.resultCertificateDate.split('-')[1] : '',
+      }
+      // 添加修改后的证件参数
+      if (userInfo.authorizeStaffId) {
+        data.authorizeStaffId = userInfo.authorizeStaffId
+      }
+      if (userInfo.idCardName != userInfo.resultIdCardName) {
+        data.reviseIdCardName = userInfo.idCardName
+      }
+      if (userInfo.idCardNumber != userInfo.resultIdCardNumber) {
+        data.reviseIdCardNumber = userInfo.idCardNumber
+      }
+      let reviseCertificateStartDate = userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[0] : '';
+      let reviseCertificateEndDate = userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[1] : '';
+      if (reviseCertificateStartDate != data.startDate) {
+        data.reviseCertificateStartDate = reviseCertificateStartDate
+      }
+      if (reviseCertificateEndDate != data.endDate) {
+        data.reviseCertificateEndDate = reviseCertificateEndDate
+      }
+      let result = await API.confirmCallback(data);
+      console.log('confirmCallback', result)
+      if (result.code == 200) {
+        // console.log(data)
+        let item = this.state.videoList.find(el => el.userId == this.state.faceCustomerUid )
+        item.hasOcr = 2; // 身份证ocr
+        // this.setState({
+        //   videoList: this.state.videoList
+        // })
+        this.videoListSort();
+      } else {
+        console.log('1')
+        this.messageClick('保持信息失败', 'error')
+      }
+    } catch (err) {
+      console.log('2',err)
+      this.messageClick('保持信息失败', 'error')
     }
-
   };
   handleCancelFacial = () => {
     callNimIM('sendCustomCmdMsg', {
@@ -4558,7 +3852,7 @@ class Video extends Component {
       isFaceImage: false,
       facialImg: ocrImage,
       disabledIdCard: true,
-      IDtypeFrontOrBack: '请截取证件头像面',
+      IDtypeFrontOrBack: IDtypeFront,
       facialImgFront: '',
       facialImgBack: '',
       faceResuly: '',
@@ -4718,9 +4012,9 @@ class Video extends Component {
         clickedFacial: false,
         clickedOcr: false,
         isFaceImage: false,
-        facialImg: ocrImage,
+        facialImg: this.state.titleModal=='身份验证'? faceImage : ocrImage,
         disabledIdCard: true,
-        IDtypeFrontOrBack: '请截取证件头像面',
+        IDtypeFrontOrBack: IDtypeFront,
         facialImgFront: '',
         facialImgBack: '',
         faceResuly: '',
@@ -4741,13 +4035,13 @@ class Video extends Component {
     }
   }
   sgsinImage = () => {
-    if (this.state.IDtypeFrontOrBack == '请截取证件头像面') {
+    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 == '请截取证件国徽面') {
+    } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
       this.setState({
         facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
         isFaceImage: true,
@@ -4792,38 +4086,10 @@ class Video extends Component {
     console.log(sid)
     let userId = ''
     let index
-    if (document.getElementById('video1').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
-    }
-    if (document.getElementById('video2').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid
-    } if (document.getElementById('video3').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid
-    } if (document.getElementById('video4').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid
-    } if (document.getElementById('video5').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid
-    } if (document.getElementById('video6').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid
-    }
-
-    if (document.getElementById('video7').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid
-    }
-    if (document.getElementById('video8').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid
-    }
-    if (document.getElementById('video9').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid
-    }
-    if (document.getElementById('video10').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid
-    }
-    if (document.getElementById('video11').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid
-    }
-    if (document.getElementById('video12').name == sid) {
-      userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid
+    for (let i =1;i<=12;i++){
+      if(document.getElementById('video'+ i) && document.getElementById('video'+ i).name == sid && document.getElementById("feedId"+i).innerText){
+        userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).uid
+      }
     }
     if (document.getElementById('publish_video1').name == sid) {
       userId = this.props.tellerAccount
@@ -4831,7 +4097,8 @@ class Video extends Component {
     try {
       let result = await API.appGetUsername({
         userId: userId,
-        sessionId: this.state.sessionId
+        sessionId: this.state.sessionId,
+        activityId: this.props.businessNumber
       });
       console.log(result)
       let data
@@ -4859,117 +4126,28 @@ class Video extends Component {
         this.setState({
           titleNameRm: data
         })
-      }
-      if (document.getElementById('video1').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[0].type = true
-        }
-        this.setState({
-          videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (document.getElementById('video2').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[1].type = true
-        }
-        this.setState({
-          videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户2'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video3').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[2].type = true
-        }
-        this.setState({
-          videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户3'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video4').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[3].type = true
-        }
-        this.setState({
-          videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户4'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video5').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[4].type = true
-        }
-        this.setState({
-          videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户5'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video6').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[5].type = true
-        }
-        this.setState({
-          videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户6'
-        },()=>{
-          this.videoListClick()
-        })
-      }
-      if (document.getElementById('video7').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[6].type = true
-        }
-        this.setState({
-          videoSevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户7'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video8').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[7].type = true
-        }
-        this.setState({
-          videoEightName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户8'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video9').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[8].type = true
-        }
-        this.setState({
-          videoNineName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户9'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video10').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[9].type = true
-        }
-        this.setState({
-          videoTenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户10'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video11').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[10].type = true
-        }
-        this.setState({
-          videoElevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户11'
-        },()=>{
-          this.videoListClick()
-        })
-      } if (document.getElementById('video12').name == sid) {
-        if ((typeIntranet && typeIntranet == 2) || (userSide && userSide == 2)) {
-          this.state.isPIBIntranet[11].type = true
+      } else {
+        for (let i =1;i<=12;i++){
+          if(document.getElementById('video'+i).name == sid){
+
+            if ((typeIntranet && typeIntranet == 2) && (userSide && userSide == 2)) {
+              // this.state.isPIBIntranet[0].type = true
+              this.state.videoList[i-1].isPIBIntranet = true
+            }
+            if (result.data.idCardNumber && result.data.certificateType) {
+              this.state.videoList[i-1].hasOcr = result.data.certificateType.includes('ID_CARD') ? 2 : 1
+            }
+            this.state.videoList[i-1].userId = userId
+            this.state.videoList[i-1].videoName = data
+            this.state.videoList[i-1].userSide = userSide 
+            this.state.videoList[i-1].userType = typeIntranet
+          }
         }
         this.setState({
-          videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
-        },()=>{
-          this.videoListClick()
+          videoList: this.state.videoList
+          // videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId"+i).innerText).tag == 'tag1' ? '坐席' : data ? data : ('客户'+i)
         })
+        this.videoListSort();
       }
       if (this.state.isPictureInPicture) {
         this.pictureInPicture('Refresh')
@@ -5062,55 +4240,54 @@ class Video extends Component {
     canvas.height = 540;
 
 
-    // videoMedia.addEventListener('play', (event) => {
-    //   var $this = this; //cache
-    //   if ($this.state.operateShow) {
-    //     isGraffiti = false
-    //     this.setState({
-    //       zIndexNum: 999
-    //     })
-    //     const canvas = document.getElementById('canvas');
-    //     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 (document.getElementById('video20').name) {
-    //     // 代表已经有了进行切流
-    //     publish_config.publish_device = 5
-    //     publish_config.media_type = 1
-    //     publish_config.degradationType = 2
-    //     publish_config.sid = document.getElementById('video20').name
-    //     publish_config.stream = canvas.captureStream(10)
-    //     publish_config.video_profile_type = 1
-    //     this.test_controller.ChangeMediaStream(publish_config);
-    //   } else {
-
-    //     publish_config.media_type = 1
-    //     publish_config.publish_device = 5
-    //     publish_config.need_volume_analyser = true
-    //     publish_config.video_profile_type = 1
-    //     publish_config.degradationType = 2
-    //     publish_config.stream = canvas.captureStream(10)
-    //     publish_config.publish_video_id = 'video20'
-    //     publish_config.publish_streamId_id = 'subscribe_streamId10'
-    //     publish_config.publish_tag = 'projectionWhiteboard'
-    //     this.test_controller.Publish(publish_config)
-    //   }
-    // }, 0);
-    // 获取屏幕流
+    videoMedia.addEventListener('play', (event) => {
+      var $this = this; //cache
+      if ($this.state.operateShow) {
+        isGraffiti = false
+        this.setState({
+          zIndexNum: 999
+        })
+        const canvas = document.getElementById('canvas');
+        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 (document.getElementById('video20').name) {
+        // 代表已经有了进行切流
+        publish_config.publish_device = 5
+        publish_config.media_type = 1
+        publish_config.degradationType = 2
+        publish_config.sid = document.getElementById('video20').name
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.video_profile_type = 1
+        this.test_controller.ChangeMediaStream(publish_config);
+      } else {
+
+        publish_config.media_type = 1
+        publish_config.publish_device = 5
+        publish_config.need_volume_analyser = true
+        publish_config.video_profile_type = 1
+        publish_config.degradationType = 2
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.publish_video_id = 'video20'
+        publish_config.publish_streamId_id = 'subscribe_streamId10'
+        publish_config.publish_tag = 'projectionWhiteboard'
+        this.test_controller.Publish(publish_config)
+      }
+    }, 0);
     navigator.mediaDevices.getDisplayMedia({
       video: true,
       preferCurrentTab: true,
@@ -5135,17 +4312,6 @@ class Video extends Component {
 
         streamShare = stream
 
-        publish_config.media_type = 1
-        publish_config.publish_device = 5
-        publish_config.need_volume_analyser = true
-        publish_config.video_profile_type = 1
-        publish_config.degradationType = 2
-        publish_config.stream = stream
-        publish_config.publish_video_id = 'video20'
-        publish_config.publish_streamId_id = 'subscribe_streamId10'
-        publish_config.publish_tag = 'projectionWhiteboard'
-        this.test_controller.Publish(publish_config)
-
         stream.getVideoTracks()[0].onended = async () => {
           //单击停止共享按钮后，触发这个事件
           streamShare = ''
@@ -5368,14 +4534,14 @@ class Video extends Component {
     // publish_config.video_profile_diy={width:640, height:360, frameRate:15, bitrate:400}
     // this.test_controller.ChangeMediaStream(publish_config)
     // beautyNum =  beautyNum == 0 ? 1 : 0
-    if (beautyType) {
-      beautyType = false
+    if (this.state.beautyType) {
+      this.state.beautyType = false
       this.setState({
         beautyName: '开启美颜'
       })
       beautySetMode('none')
     } else {
-      beautyType = true
+      this.state.beautyType = true
       beautySetMode('beauty')
       this.setState({
         beautyName: '关闭美颜'
@@ -5566,27 +4732,33 @@ class Video extends Component {
     }
   }
   handleChangeCertificateValidity = (event) => {
-    if(this.state.documentType == 'ID_CARD' && event.target.value.split('-').length >1 && event.target.value.split('-')[1].split('.').length >2) {
+    // 护照只有起始日期，单独处理
+    if (this.state.documentType == 'PASSPORT_CARD' && event.target.value.split('.').length >2) {
+      if(this.dateNewTime(event.target.value)) {
+        this.setState({ 
+          certificateValidity: event.target.value,
+          certificateValidityType: true
+        });
+      } else {
+        this.setState({ 
+          certificateValidity: event.target.value,
+          certificateValidityType: false
+        });
+      }
+    } else if (event.target.value.split('-').length >1 && event.target.value.split('-')[1].split('.').length >2) {
       if(this.dateNewTime(event.target.value.split('-')[1])) {
         this.setState({ 
           certificateValidity: event.target.value,
           certificateValidityType: true
         });
-        
       } else {
         this.setState({ 
           certificateValidity: event.target.value,
           certificateValidityType: false
         });
       }
-    } else{
-      this.setState({ 
-        certificateValidity: event.target.value,
-      });
     }
     
-    
-
   }
   componentDidUpdate(prevProps) {
     console.log('componentDidUpdate', prevProps, prevProps.shareMask, this.props.shareMask)
@@ -5610,7 +4782,7 @@ class Video extends Component {
       documentType: '',
       isCustomerSelect: true,
       customerSelect: this.state.customerList.length == 1 ? 1 : '',
-      customerTitleName: '客户身份识别'
+      customerTitleName: '客户身份验证'
     })
   }
   handleOkCustomer = () => {
@@ -5639,15 +4811,27 @@ class Video extends Component {
               "data": {
                 'sessionId': this.state.sessionId,
                 'userId': this.state.customerList[this.state.customerSelect - 1].customId,
-                'title': '为了有效确认客户身份，请您配合进行我行的身份识别和核验。请您阅读以下内容，若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；同时，我行会对您进行脸部拍照，采集您的脸部图像。',
+                'title': '为了有效确认客户身份，请您配合汇丰银行（中国）有限公司（”我行”）进行身份识别和核验。请您阅读以下内容。若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；同时，我行会对您进行脸部拍照，采集您的脸部图像。',
+                'title_en': 'In order to confirm client’s identify, please cooperate with HSBC (China) Co., Ltd. (“the bank”) for identity verification. Please read the following and provide your authorization to the bank to capture your ID image and information, take picture of your face and retain them for identification and verification purpose.',
+                'navBarTitle': '客户授权',
+                'navBarTitle_en': 'Customer Authorization',
                 'list': [
                   {
                     'id': 1,
-                    'content': '您是否授权汇丰中国对您的证件以及脸部进行拍照，采集并留存您的证件信息以及脸部图像以便我行进行身份识别？'
+                    'content': '您是否授权我行对您的证件以及脸部进行拍照，采集并留存您的证件信息以及脸部图像以便我行进行身份识别？',
+                    'content_en': 'Do you agree the bank to photograph your ID and face image, collect and retain ID information and face image for identification?'
                   },
                   {
                     'id': 2,
-                    'content': '为了通过人脸对比进行身份识别和核验，我行需要将您的姓名、身份证件号码和脸部图像发送给中国人民银行或全国公民身份证号码查询服务中心授权的第三方，并由第三方进一步发送至中国人民银行或全国公民身份证号码查询服务中心进行人脸对比或信息核对。'
+                    'content': '为了通过人脸对比进行身份识别和核验，我行需要将您的姓名、身份证件号码和脸部图像发送给中国公安系统（包括其所属机构及代理机构）进行人脸对比及信息核对。',
+                    'content_en': 'For further identification and verification purpose, do you agree the bank to send your name, ID number and face image to the public security authority (including its affiliates or agencies) to perform the identification and information verification process？'
+                  },
+                  {
+                    'id': 3,
+                    'content': '本人同意使用电子签名方式签署作为陪同者所需签署的文件，并授权汇丰银行（中国）有限公司（“汇丰中国”）通过电子签名服务供应商向第三方认证机构提供本人的姓名和身份证件号码，用以申请本人专属的数字证书，本人在电子设备上签署文件即表明本人指示汇丰中国使用本人专属电子证书对该等文件进行电子签名。本人知悉并同意，电子签名和手写签名具有同等法律效力。 \n说明：电子签名服务供应商和第三方认证机构的名称和联系方式如下:' + 
+                                '\n电子签名服务供应商：杭州尚尚签网络科技有限公司（联系电话：4009936665）\n第三方认证机构： \n北京天威诚信电子商务服务有限公司（联系电话：010-50947500）\n中金金融认证中心有限公司（联系电话：010-83526655）',
+                    'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it? And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
+                                  '\nPlease be noted the names and contact information of the electronic signature service provider and the certificate authority are as follows:\nElectronic signature service provider: Hangzhou BestSign Network Technology Co. Ltd. (Contact: 4009936665) \nCertificate Authority: \nChina Financial Certification Authority (Contact: 010-83526655)\niTrusChina Co., Ltd (Contact: 010-50947500)'
                   }
                 ]
               }
@@ -5659,11 +4843,22 @@ class Video extends Component {
               "data": {
                 'sessionId': this.state.sessionId,
                 'userId': this.state.customerList[this.state.customerSelect - 1].customId,
-                'title': '为了有效确认客户身份，请您配合进行我行的身份识别。请您阅读以下内容，若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；',
+                'title': '为了有效确认客户身份，请您配合汇丰银行（中国）有限公司（“我行”）进行身份识别。请您阅读以下内容，若您同意，请您之后在摄像头前出示您的身份证件，我行将对您的身份证件拍照并采集证件信息；',
+                'title_en': 'In order to confirm client’s identify, please cooperate with HSBC (China) Co., Ltd. (“the bank”) for identity verification. Please read the following and provide your authorization to the bank to capture your ID image and information and retain them for identification and verification purpose. ',
+                'navBarTitle': '客户授权',
+                'navBarTitle_en': 'Customer Authorization',
                 'list': [
                   {
                     'id': 1,
-                    'content': '您是否授权汇丰中国对您的证件进行拍照，采集并留存您的证件信息以便我行进行身份确认？'
+                    'content': '您是否授权我行对您的证件进行拍照，采集并留存您的证件信息以便我行进行身份确认？',
+                    'content_en': 'Do you agree the bank to photograph your ID ,collect and retain ID information and for identification?'
+                  },
+                  {
+                    'id': 2,
+                    'content': '对于陪同者所需签署的文件，您是否同意使用电子签名方式签署，并授权汇丰银行（中国）有限公司（“汇丰中国”）通过电子签名服务供应商向第三方认证机构提供您本人的姓名和身份证件号码，用以申请您本人专属的数字证书？您本人在电子设备上签署文件即表明您本人指示汇丰中国使用您本人专属电子证书对该等文件进行电子签名。您本人知悉并同意，电子签名和手写签名具有同等法律效力。 \n说明：电子签名服务供应商和第三方认证机构的名称和联系方式如下:' +
+                                '\n电子签名服务供应商：杭州尚尚签网络科技有限公司（联系电话：4009936665）\n第三方认证机构： \n北京天威诚信电子商务服务有限公司（联系电话：010-50947500）\n中金金融认证中心有限公司（联系电话：010-83526655）',
+                    'content_en': 'To sign in the relevant document required as companion, do you agree to adopt electronic signature in it? And you shall authorize HSBC (China) Co., Ltd to provide your name and identity document number to the certificate authority through the electronic signature service provider to apply for your own digital certificate. By signing the document on the electronic device, you authorize HSBC (China) Co., Ltd to use your digital certificate and apply your electronic signature to the documents. You understand and agree that electronic signature has the same legal effect as handwritten signature.' +
+                                '\nPlease be noted the names and contact information of the electronic signature service provider and the certificate authority are as follows:\nElectronic signature service provider: Hangzhou BestSign Network Technology Co. Ltd. (Contact: 4009936665) \nCertificate Authority: \nChina Financial Certification Authority (Contact: 010-83526655)\niTrusChina Co., Ltd (Contact: 010-50947500)'
                   }
                 ]
               }
@@ -5689,6 +4884,7 @@ class Video extends Component {
       let result = await API.getAuthorizeResult({
         activityId: this.props.businessNumber,
         appAccount: appAccount,
+        certificateType: this.state.documentType == 'ID_CARD'? 'ID': 'NID'
       });
       console.log(result)
       if (result.code == 200 && result.data.ifAuthorize) {
@@ -5734,6 +4930,52 @@ class Video extends Component {
       console.log(err)
     }
   }
+  // 视频窗口排序
+  videoListSort = () => {
+    console.log(this.state.videoList)
+    let list = [...this.state.videoList]
+    list.sort((a, b)=>{
+        // 判断是否有客户
+        if (!b.videoName && a.videoName){
+            return -1
+        }
+        if (!a.videoName && b.videoName){
+            return 1
+        }
+        // 判断是否是坐席
+        // if (a.isTeller != b.isTeller) {
+        //     return a.isTeller ? -1 : 1
+        // }
+        // 判断是否是内网pib
+        if (a.isPIBIntranet != b.isPIBIntranet){
+            return !a.isPIBIntranet ? -1 : 1
+        }
+        
+        // 判断行内或行外客户
+        if (a.userSide != b.userSide){
+            return a.userSide == 2 ? -1 : 1
+        }
+        
+        // 判断行外客户是否做过ocr
+        if (a.hasOcr != b.hasOcr) {
+            return (b.hasOcr || 0) - (a.hasOcr || 0)
+        }
+        
+        return a.idIndex - b.idIndex;
+    })
+    console.log('排序后list', list);
+    for(let i=0;i<12;i++){
+      for(let j=0;j<12;j++){
+        if (list[j].videoName == this.state.videoList[i].videoName) {
+          this.state.videoList[i].order = j
+        }
+      }
+    }
+    // console.log(this.state.videoList)
+    this.setState({
+      videoList: this.state.videoList
+    })
+  }
   videoListClick=()=>{
     // console.log(Math.trunc(document.getElementById("videoList").getBoundingClientRect().height),document.getElementById("videoList").scrollHeight)
     // if(Math.trunc(document.getElementById("videoList").getBoundingClientRect().height) >= document.getElementById("videoList").scrollHeight && this.state.isVideoList) {
@@ -5872,7 +5114,7 @@ class Video extends Component {
                   <CanvasHome zIndexNum={this.state.zIndexNum} style={{ width: isGraffiti ? this.state.widthVideo + 'px' : this.state.whiteboardWidth + 'Px', height: this.state.whiteboardHeight + 'Px', top: this.state.whiteboardTop + 'Px', left: isGraffiti ? this.state.leftVideo + 'px' : this.state.whiteboardLeft + 'Px' }}>
                     {this.state.operateShow &&
                       <OpreateDiv id="operate">
-                        <span style={{ color: this.state.selectSpan == 'pen' ? '#1890ff' : '#333' }} onClick={() => this.setTool('pen')}>铅笔</span>
+                        <span style={{ color: this.state.selectSpan == 'pen' ? '#1890ff' : '#333' }} onClick={() => this.setTool('pen')}>黑笔</span>
                         <span style={{ color: this.state.selectSpan == 'redPen' ? '#1890ff' : '#333' }} onClick={() => this.setStrokeColor()}>红笔</span>
                         <span style={{ color: this.state.selectSpan == 'eraser' ? '#1890ff' : '#333' }} onClick={() => this.setTool('eraser')}>橡皮</span>
                         <span onClick={() => this.setOpreate('undo')}>撤销</span>
@@ -5947,6 +5189,13 @@ class Video extends Component {
 
                         </ul>
                       </div>
+                      {!this.state.loading && this.state.sessionId?
+                      <QRCode
+                            style={{'position': 'absolute', 'right': '10px', 'top': '-110px'}}
+                            value={this.state.sessionId}  //value参数为生成二维码的链接
+                            size={100} //二维码的宽高尺寸
+                            fgColor="#000000"  //二维码的颜色
+                      /> : null}
                     </div>
                   }
 
@@ -5984,365 +5233,71 @@ class Video extends Component {
                   </div>
 
                 </div>
-                <div
-                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ position: "relative", display: (this.state.videoOneName) ? '' : 'none' }}
+                {/* <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
+                  style={{ position: "relative", display: (this.state.videoList[0].videoName) ? '' : 'none' }}
                 >
-                  {
-                    this.state.customAudioed && <img
-                      alt=""
-                      src={require("../../assets/img/yingpin.png").default}
-                      style={{ width: "100%", height: "100%", }}
-                    ></img>
-                  }
                   <div className="video1Div">
                     <video
                       id="video1"
                       autoPlay
                       muted={true}
                       disablePictureInPicture
-                      className={`video1 ${this.state.noVideoOne ? 'isNoVideo' : ''}`}
+                      className={`video1 ${this.state.videoList[0].noVideo ? 'isNoVideo' : ''}`}
                     />
                     <audio id="audio1" autoPlay />
                     <label style={{ display: 'none' }} id="feedId1" type="text" />
 
-                    <div style={{ display: (this.state.videoOneName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                    <div style={{ display: (this.state.videoList[0].videoName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
                       <div onClick={this.muteOpposite.bind(this, 'video1')}>
                         {
-                          this.state.voiceVideoOne && <img
+                          this.state.videoList[0].mute && <img
                             alt=""
                             src={require("../../assets/img/jingyin.png").default}
                             className="imgClassVoice voiceVideoClass"
                           />
                         }
-                        <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                        <canvas style={{ display: (this.state.videoList[0].videoName && !this.state.videoList[0].mute) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                       </div>
                       <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                        {this.state.videoOneName}
+                          {this.state.videoList[0].videoName}
                       </div>
 
 
                     </div>
                   </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoTwoName) ? '' : 'none', }}>
-                  <video
-                    id="video2"
-                    autoPlay
-                    disablePictureInPicture
-                    muted={true}
-                    className={`video ${this.state.noVideoTwo ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio2" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId2" type="text" />
-
-                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video2')}>
-                      {
-                        this.state.voiceVideoTwo && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoTwoName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoThreeName) ? '' : 'none' }}>
-                  <video
-                    id="video3"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoThree ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio3" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId3" type="text" />
-
-                  <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video3')}>
-                      {
-                        this.state.voiceVideoThree && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoThreeName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoFourName) ? '' : 'none', }}>
-                  <video
-                    id="video4"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoFour ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio4" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId4" type="text" />
-
-                  <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video4')}>
-                      {
-                        this.state.voiceVideoFour && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoFourName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoFiveName) ? '' : 'none' }}>
-                  <video
-                    id="video5"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoFive ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio5" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId5" type="text" />
-
-                  <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video5')}>
-                      {
-                        this.state.voiceVideoFive && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoFiveName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoSixName) ? '' : 'none', }}>
-                  <video
-                    id="video6"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoSix ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio6" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId6" type="text" />
-
-                  <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video6')}>
-                      {
-                        this.state.voiceVideoSix && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoSixName}
-                    </div>
-                  </div>
+                </div> */}
 
-                </div>
-                <div
-                  className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ position: "relative", display: (this.state.videoSevenName) ? '' : 'none' }}
-                >
-                  {
-                    this.state.customAudioed && <img
-                      alt=""
-                      src={require("../../assets/img/yingpin.png").default}
-                      style={{ width: "100%", height: "100%", }}
-                    ></img>
-                  }
-                  <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
+                {
+                this.state.videoList.map((item,index)=>{
+                  // if (index!=0)
+                  return <div key={index} className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (item.videoName) ? '' : 'none', 'order': item.order}}>
                     <video
-                      id="video7"
+                      id={'video'+(item.idIndex)}
                       autoPlay
                       muted={true}
                       disablePictureInPicture
-                      className={`video ${this.state.noVideoSeven ? 'isNoVideo' : ''}`}
+                      className={`video ${item.noVideo ? 'isNoVideo' : ''}`}
                     />
-                    <audio id="audio7" autoPlay />
-                    <label style={{ display: 'none' }} id="feedId7" type="text" />
+                    <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`}>
+                    {
+                      item.mute && <img
+                        alt=""
+                        src={require("../../assets/img/jingyin.png").default}
+                        className="imgClassVoice voiceVideoClass"
+                      />
+                    }
+                    <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 style={{ display: (this.state.videoSevenName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
-                      <div onClick={this.muteOpposite.bind(this, 'video7')}>
-                        {
-                          this.state.voiceVideoSeven && <img
-                            alt=""
-                            src={require("../../assets/img/jingyin.png").default}
-                            className="imgClassVoice voiceVideoClass"
-                          />
-                        }
-                        <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
-                      </div>
-                      <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                        {this.state.videoSevenName}
+                      <div className='titleName' style={{ color: this.props.titleColor,fontSize: this.props.fontSize + 'px',fontFamily : this.props.fontFamily}}>
+                        {item.videoName}
                       </div>
-
-
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoEightName) ? '' : 'none', }}>
-                  <video
-                    id="video8"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoEight ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio8" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId8" type="text" />
-
-                  <div style={{ display: (this.state.videoEightName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video8')}>
-                      {
-                        this.state.voiceVideoEight && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoEightName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoNineName) ? '' : 'none', }}>
-                  <video
-                    id="video9"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoNine ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio9" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId9" type="text" />
-
-                  <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video9')}>
-                      {
-                        this.state.voiceVideoNine && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoNineName}
-                    </div>
-                  </div>
-
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoTenName) ? '' : 'none' }}>
-                  <video
-                    id="video10"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoTen ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio10" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId10" type="text" />
-
-                  <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video10')}>
-                      {
-                        this.state.voiceVideoTen && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoTenName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`} style={{ display: (this.state.videoElevenName) ? '' : 'none', }}>
-                  <video
-                    id="video11"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoEleven ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio11" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId11" type="text" />
-
-                  <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video11')}>
-                      {
-                        this.state.voiceVideoEleven && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoElevenName}
-                    </div>
-                  </div>
-                </div>
-                <div className={`itemed ${this.state.isVideoList? 'videoMinutuListClass': 'videoMinutuClass'}`}
-                  style={{ display: (this.state.videoTwelveName) ? '' : 'none' }}>
-                  <video
-                    id="video12"
-                    autoPlay
-                    muted={true}
-                    disablePictureInPicture
-                    className={`video ${this.state.noVideoTwelve ? 'isNoVideo' : ''}`}
-                  />
-                  <audio id="audio12" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId12" type="text" />
-
-                  <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                    <div onClick={this.muteOpposite.bind(this, 'video12')}>
-                      {
-                        this.state.voiceVideoTwelve && <img
-                          alt=""
-                          src={require("../../assets/img/jingyin.png").default}
-                          className="imgClassVoice voiceVideoClass"
-                        />
-                      }
-                      <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none', width: '25px', height: '25px', marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
-                    </div>
-                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
-                      {this.state.videoTwelveName}
                     </div>
                   </div>
-                </div>
-
+                })
+              }
 
               </div>
               <img id="icon_huatong" style={{ display: 'none' }} src={require("../../assets/img/icon_huatong.png").default}></img>
@@ -6381,7 +5336,7 @@ class Video extends Component {
             virtualization={this.virtualization}
           ></Foot>
           {/* 暂停恢复会话 */}
-          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
+          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} maskClosable={false} onOk={this.handleOk}
             onCancel={this.handleCancel}>
             {
               this.state.isSuspend && <span>确定是否恢复会话？</span>
@@ -6391,7 +5346,7 @@ class Video extends Component {
             }
           </Modal>
           {/* 是否退出会议*/}
-          <Modal closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[
+          <Modal closable={false} centered={true} visible={this.state.isModalVisibleEnd} maskClosable={false} footer={[
             <div key='end'>
               <Button className="modelButtonCancel" onClick={this.handleCancelEnd}>取消</Button>
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}>确定</Button>
@@ -6400,11 +5355,11 @@ class Video extends Component {
             <div className='endModal'>是否要结束并退出会议？</div>
           </Modal>
           {/* ocr及人脸 */}
-          <Modal title={this.state.titleModal} width={650} closable={false} centered={true} visible={this.state.isModalVisibleFacial} footer={[
+          <Modal title={this.state.titleModal} width={800} closable={true} maskClosable={false} onCancel={this.handleCancelFacial} centered={true} visible={this.state.isModalVisibleFacial} footer={[
             // ocr及人脸在截图界面的按钮
             this.state.cardResuly == '' && this.state.faceResuly == ''  &&<div key='facial'>
               <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>取消</Button>
-              <Button className="modelButtonCancel" onClick={this.sgsinImage}>截图</Button>
+              <Button className="modelButtonCancel" onClick={this.sgsinImage}>拍照</Button>
               {/* 再截图后按钮高亮 */}
               {
                 this.state.isFaceImage && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>下一步</Button>
@@ -6416,7 +5371,12 @@ class Video extends Component {
             </div>,
             // 人脸识别后的结果界面的按钮
             this.state.cardResuly == '' && this.state.faceResuly != ''  &&<div key='facial'>
-              <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>完成</Button>
+              {
+                this.state.faceResuly == 'success' && <Button className="modelButtonCancel" onClick={this.handleFinishFacial}>完成</Button>
+              }
+              {
+                this.state.faceResuly == 'fail' && <Button className="modelButtonNo" type="primary" danger>完成</Button>
+              }
               {
                 this.state.faceResuly == 'fail' && <Button className="modelButtonOk" type="primary" danger onClick={this.ReIdentification}>重新识别</Button>
               }
@@ -6429,16 +5389,20 @@ class Video extends Component {
           // ocr成功
             this.state.cardResuly == 'success' && <div key='facial'>
               {
-                this.state.disabledIdCard && <Button className="modelButtonFaceOk" danger onClick={(e) => this.updateConfirm('noFace')}>修改</Button>
+                this.state.disabledIdCard && <Button className="modelButtonFaceOk" danger onClick={(e) => this.updateConfirm('noFace')}>修正证件信息</Button>
               }
+              <Button className="modelButtonCancel" danger onClick={this.newFaceClick}>返回重拍</Button>
               {
-                this.state.documentType == 'ID_CARD' && this.state.certificateValidityType && <Button className="modelButtonFaceOkColor" danger onClick={(e) => this.confirmCallback('face')}>完成并发起人脸识别</Button>
+                this.state.documentType == 'ID_CARD' && this.state.certificateValidityType && <Button className="modelButtonFaceOkColor" danger onClick={(e) => this.handleFinishOcr('face')}>确认信息并发起人脸识别</Button>
               }
               {
-                this.state.documentType == 'ID_CARD' && !this.state.certificateValidityType && <Button className="modelButtonFaceOkColorFile" danger >完成并发起人脸识别</Button>
+                this.state.documentType == 'ID_CARD' && !this.state.certificateValidityType && <Button className="modelButtonFaceOkColorFile" danger >确认信息并发起人脸识别</Button>
               }
               {
-                this.state.documentType != 'ID_CARD' && <Button className="modelButtonOk" type="primary" danger onClick={(e) => this.confirmCallback('noFace')}>完成</Button>
+                this.state.documentType != 'ID_CARD' &&this.state.certificateValidityType && <Button className="modelButtonOk" type="primary" danger onClick={(e) => this.handleFinishOcr('noFace')}>完成</Button>
+              }
+              {
+                this.state.documentType != 'ID_CARD' && !this.state.certificateValidityType && <Button className="modelButtonFaceOkColorFile" danger >完成</Button>
               }
               
             </div>,
@@ -6449,11 +5413,16 @@ class Video extends Component {
             </div>
           ]}>
             <Spin spinning={this.state.loadingFace} tip="识别中...">
+              <div style={{display: 'flex', padding: '10px 20px'}}>
+              <Step style={{marginTop: '10px'}}  current={this.state.titleModal == '身份验证'?3:2} ></Step>
               <div className="faceBody">
                 {this.state.cardResuly == '' && <div className='faceCardImg'>
 
                   {
-                    this.state.titleModal == 'OCR识别' && <div className='titleDiv'>{this.state.IDtypeFrontOrBack}</div>
+                    this.state.titleModal == '拍摄证件照片' && <div className='titleDiv'>{this.state.IDtypeFrontOrBack}</div>
+                  }
+                  {
+                    this.state.titleModal == '身份验证' && this.state.faceResuly == '' && <div className='titleDiv'>请确保陪同者头像清楚显示在前置镜头前</div>
                   }
 
                   {
@@ -6462,7 +5431,7 @@ class Video extends Component {
                         {
                           this.state.videoType == 'error' && <div className='errorClassFace videoErrorClass'>
                           <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>
-                          请点击“截图”拍摄客户人像的照片。若界面无客户头像显示，请检查网络并保持网络稳定后，点击“截图”重试
+                          请点击“拍照”拍摄客户人像的照片。若界面无客户头像显示，请检查网络并保持网络稳定后，点击“拍照”重试
                           </div>
                         }
                         <video disablePictureInPicture className="faceImg" id="publish_video_2" autoPlay muted={true}></video>
@@ -6480,17 +5449,17 @@ class Video extends Component {
                       this.state.cardResuly == 'success' && <div className='successClassFace'>
                         <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>
                         {
-                          this.state.cardFailReason && <span>识别成功 -- {this.state.cardFailReason}</span>
+                          this.state.cardFailReason && <span>{this.state.cardFailReason}</span>
                         }
                         {
-                          !this.state.cardFailReason && <span>识别成功</span>
+                          !this.state.cardFailReason && <span>识别证件信息成功</span>
                         }
                         
                         </div>
                     }
                     {
                       this.state.cardResuly == 'fail' && <div className='errorClassFace'>
-                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>识别失败--{this.state.cardFailReason}</div>
+                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>识别证件信息失败--{this.state.cardFailReason}</div>
                     }
                     <div className='imgDIV'>
                       <img className="faceImgCard" src={this.state.facialImgFront} alt=""></img>
@@ -6506,16 +5475,16 @@ class Video extends Component {
                   </div>
                 }
                 {
-                  this.state.titleModal == '人脸识别' && this.state.faceResuly != '' && <div className='resuleCard'>
+                  this.state.titleModal == '身份验证' && this.state.faceResuly != '' && <div className='resuleCard'>
                     {
                       this.state.faceResuly == 'success' && <div className='successClassFace'>
                         <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>
           
-                        人脸识别成功</div>
+                        认证通过</div>
                     }
                     {
                       this.state.faceResuly == 'fail' && <div className='errorClassFace'>
-                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>人脸识别失败--{this.state.faceFailReason}</div>
+                      <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>{this.state.faceFailReason}</div>
                     }
                     <div><span>客户姓名</span>  <input disabled type="text" value={this.state.idCardNameFace}/></div>
                     <div><span>身份证号</span>  <input disabled type="text" value={this.state.idCardNumberFace}/></div>
@@ -6524,9 +5493,10 @@ class Video extends Component {
                 }
 
               </div>
+              </div>
             </Spin>
           </Modal>
-          <Modal title="经理人员授权" closable={false} centered={true} visible={this.state.isModalVisibleSFP}
+          <Modal title="经理人员授权" closable={false} centered={true} visible={this.state.isModalVisibleSFP} maskClosable={false}
             footer={[
               <div key='end'>
                 <Button className="modelButtonCancel" onClick={this.handleCancelSFP}>取消</Button>
@@ -6559,7 +5529,7 @@ class Video extends Component {
             </div>
             </Spin>
           </Modal>
-          <Modal title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer}
+          <Modal width={650} title={this.state.customerTitleName} closable={false} centered={true} visible={this.state.isModalVisibleCustomer} maskClosable={false}
             footer={[
               <div key='end'>
                 
@@ -6591,12 +5561,13 @@ class Video extends Component {
                 
               </div>
             ]}>
-            <div>
-              <div className='selectCustomer'>
+            <div style={{display: 'flex', padding: '10px 20px'}}>
+              <Step current={this.state.isCustomerSelect?0:1}></Step>
+              <div>
                 {
                   this.state.isCustomerSelect && <div>
-                    <div>
-                      请选择进行身份识别的客户
+                    <div className='CustomerSelectTitle'>
+                      请选择进行身份识别的客户（陪同者)
                     </div>
                     <div>
                       <Radio.Group onChange={this.onChangeOCRCustomer} value={this.state.customerSelect}>
@@ -6619,8 +5590,8 @@ class Video extends Component {
                       this.state.documentError != '' && <div className='errorClassFace'>
                       <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>{this.state.documentError}</div>
                     }
-                    <div>
-                      请您确认您的身份证件类型
+                    <div className='CustomerSelectTitle'>
+                      请选择您的身份证件类型
                     </div>
                     <div>
                       <Radio.Group onChange={this.onChangeDocumentType} value={this.state.documentType}>
@@ -6629,7 +5600,7 @@ class Video extends Component {
                           <Radio value={'PASSPORT_CARD'}>护照</Radio>
                           <Radio value={'TW_PASS_CARD'}>台湾来往大陆通行证</Radio>
                           <Radio value={'HK_MO_PASS_CARD'}>港澳来往大陆通行证</Radio>
-                          <Radio value={'HK_MO_RESIDENCE_CARD'}>港澳台居民居住证</Radio>
+                          <Radio value={'HK_MO_RESIDENCE_CARD'}>港澳居民居住证</Radio>
                           <Radio value={'TW_RESIDENCE_CARD'}>台湾居民居住证</Radio>
                           {/* <Radio value={'FOREIGNER_RESIDENCE_CARD'}>外国人永久居住证</Radio> */}
                         </Space>
@@ -6642,7 +5613,7 @@ class Video extends Component {
 
           </Modal>
 
-          <Modal className="modelClass" title="邀请参会人员" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
+          <Modal className="modelClass" maskClosable={false} title="邀请参会人员" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
             <div key='invitation'>
               <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
               {
@@ -6698,7 +5669,7 @@ class Video extends Component {
               ></CanvasDraw> */}
             </div>
           </Modal>
-          <Modal title="设置视频设备" width={650} closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
+          <Modal title="设置视频设备" maskClosable={false} width={650} closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
             <div key='inspection'>
               <Button className="modelButtonCancel" onClick={this.handleCancelInspection}>取消</Button>
               <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInspection}>确定</Button>