react_hsbc_teller 1.9.14 → 1.9.16

package/packages/pages/video/video.jsx

@@ -221,33 +221,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: [],
@@ -259,59 +244,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: '',
@@ -357,7 +292,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.14&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=1.9.16&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -532,6 +467,7 @@ class Video extends Component {
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
     this.test_controller.Connect(config_param)
+    this.saveLog('mrtc connect start')
   };
   // 初始化视频
   ConnectMRTC = () => {
@@ -588,6 +524,7 @@ class Video extends Component {
       }
     ];
     this.test_controller.InitRoomConfig(config_param)
+    this.saveLog('mrtc InitRoomConfig start')
   };
   rateAll = async () => {
     let data = ''
@@ -829,6 +766,13 @@ class Video extends Component {
       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({
@@ -864,6 +808,7 @@ class Video extends Component {
           // faceFailReason: result.message
         })
         this.errorCodeClick('face',result.code)
+        this.saveLog('meeting ID&V error, code=' + result.code )
       }
 
 
@@ -917,112 +862,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({
@@ -1143,110 +993,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
@@ -1367,7 +1135,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);
@@ -1532,167 +1300,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 + '',
@@ -1703,11 +1342,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
           })
@@ -1717,6 +1357,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());
@@ -1735,174 +1376,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
           })
@@ -1910,7 +1412,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: '',
@@ -1920,72 +1422,19 @@ 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 : '')) {
-            this.setState({
-              videoElevenName: Mival.name
-            })
-          }
-          if (Mival.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
-            this.setState({
-              videoTwelveName: Mival.name
-            })
+          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
+          })
         }
       }
     };
@@ -2142,7 +1591,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)
@@ -2183,6 +1632,7 @@ class Video extends Component {
       } else {
         this.test_controller.CreateRoom()
       }
+      this.saveLog('InitRoomConfig successfully')
 
     };
     // 创建房间成功
@@ -2192,6 +1642,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) => {
@@ -2203,10 +1654,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) => {
@@ -2237,10 +1690,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,
@@ -2272,12 +1726,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)
@@ -2287,6 +1743,7 @@ class Video extends Component {
           this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
         }
       }
+      this.saveLog('mrtc OnReceiveTextMsg info:', uid, msg, JSON.parse(msg).typeId, JSON.parse(msg).data.sessionId, this.state.sessionId)
     }
     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}`);
@@ -2451,7 +1908,7 @@ class Video extends Component {
     };
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
-      this.saveLog('发布失败' + err_code)
+      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
@@ -2467,169 +1924,27 @@ class Video extends Component {
       
       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 : ''
-
-          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 : ''
-
-          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)
+      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)
       }
     };
     // 订阅媒体流失败
@@ -2690,120 +2005,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)
 
               }
@@ -2815,6 +2033,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
     };
     // 推送“有新发布”给与会者
@@ -2902,116 +2121,20 @@ class Video extends Component {
             config_param.need_volume_analyser = false
             console.log(config_param)
             this.test_controller.Subscribe(config_param)
-
-          }
-        } 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
-            }
+        } else {
+          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
@@ -3069,127 +2192,34 @@ 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()
-        })
-      }
-      if (!document.getElementById("video12").name) {
-        this.state.isPIBIntranet[11].type = false
-        this.setState({
-          videoTwelveName: '',
-          voiceVideoTwelve: false,
-          noVideoTwelve: 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("video1").name) {
+      //   this.state.isPIBIntranet[0].type = false
+      //   this.setState({
+      //     videoOneName: '',
+      //     voiceVideoOne: false,
+      //     noVideoOne: false
+      //   },()=>{
+      //     this.videoListClick()
+      //   })
+      // }
       this.state.analyserData.delete(sid)
       if (this.state.isPictureInPicture) {
         this.pictureInPicture('Refresh')
@@ -3243,6 +2273,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({
@@ -3273,6 +2304,7 @@ class Video extends Component {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
       if (sid == document.getElementById('publish_video1').name) {
         this.messageClick('当前网络环境较差', 'error')
+        this.saveLog('mrtc OnNetworkWeak')
       }
     };
     // 开始服务端录制成功
@@ -3280,6 +2312,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 = (
@@ -3289,11 +2322,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()
       // 获取服务端录制结果
     };
@@ -3305,6 +2340,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 = (
@@ -3450,6 +2486,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
@@ -3889,7 +2926,21 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.14')
+    console.log('hsbc_teller_sdk', '1.9.16')
+    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
@@ -4236,7 +3287,8 @@ class Video extends Component {
         isModalVisibleSFP: false,
         disabledIdCard: false,
         isStaffState: 'success',
-        loadingStaff: false
+        loadingStaff: false,
+        authorizeStaffId:  this.state.StaffidSFP,
       })
     }).catch((err) => {
       console.log(err)
@@ -4274,6 +3326,10 @@ class Video extends Component {
         idCardNumber: '',
         idCardName: '',
         certificateValidity: '',
+        resultIdCardName: '',
+        resultIdCardNumber: '',
+        resultCertificateDate: '',
+        authorizeStaffId: ''
       })
     // })
     } else {
@@ -4284,6 +3340,10 @@ class Video extends Component {
         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({
@@ -4298,6 +3358,10 @@ class Video extends Component {
         certificateValidity: '',
         idCardNumber: '',
         idCardName: '',
+        resultIdCardName: '',
+        resultIdCardNumber: '',
+        resultCertificateDate: '',
+        authorizeStaffId: '',
         titleModal: '身份验证',
         // clickedFacial: true,
         facialImg: faceImage,
@@ -4312,21 +3376,47 @@ class Video extends Component {
   // 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)
+        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')
@@ -4367,6 +3457,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',
@@ -4375,6 +3467,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,
@@ -4386,7 +3480,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)
             }
@@ -4404,6 +3500,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',
@@ -4412,6 +3509,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+'#]',
@@ -4450,13 +3548,16 @@ class Video extends Component {
             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' && 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,
@@ -4474,7 +3575,10 @@ class Video extends Component {
           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,
@@ -4486,7 +3590,10 @@ 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,
@@ -4559,21 +3666,47 @@ class Video extends Component {
     }
     this.handleCancelFacial();
     try {
-      let result = await API.confirmCallback({
-        idCardName: userInfo.idCardName,
+      // 原始证件参数
+      let data = {
+        idCardName: userInfo.resultIdCardName,
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         appAccount: this.state.faceCustomerUid,
-        idCardNumber: userInfo.idCardNumber,
+        idCardNumber: userInfo.resultIdCardNumber,
         sessionId: this.state.sessionId,
         certificateType: 'ID_CARD',
         customerName: userInfo.customerName,
-        startDate: userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[0] : '',
-        endDate: userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[1] : '',
-      });
+        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')
@@ -4866,38 +3999,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
@@ -4905,7 +4010,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
@@ -4933,117 +4039,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')
@@ -5726,7 +4743,7 @@ class Video extends Component {
                     '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.' +
+                    '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)'
                   }
                 ]
@@ -5753,7 +4770,7 @@ class Video extends Component {
                     '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.' +
+                    '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)'
                   }
                 ]
@@ -5826,6 +4843,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) {
@@ -5964,7 +5027,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>
@@ -6076,365 +5139,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>