react_hsbc_teller 0.3.9 → 0.4.3

package/packages/pages/video/video.jsx

@@ -52,7 +52,6 @@ class Video extends Component {
     cameraImg: cameraImgOpen,
     voiceStatue: false,
     voiceImg: voiceImgOpen,
-    isBigVideo: 'video1',
     isCustomer: false,
     publishDevic: 1,
     isSharedScreen: false,
@@ -77,11 +76,37 @@ class Video extends Component {
     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
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
+  
+componentDidMount() {
+  window.onbeforeunload = () =>{
+    this.finishSession()
+  }
+};
+
   /**
    * 创建房间成功后回调后台
    * @param  {JSON} data 数据类型
@@ -380,13 +405,54 @@ class Video extends Component {
     }
     if (document.getElementById('video6').name) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText))
-      // document.getElementById("feedId1").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
       })
     }
+    if (document.getElementById('video7').name) {
+      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
+      })
+    }
+    if (document.getElementById('video8').name) {
+      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
+      })
+    }
+    if (document.getElementById('video9').name) {
+      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
+      })
+    }
+    if (document.getElementById('video10').name) {
+      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
+      })
+    }
+    if (document.getElementById('video11').name) {
+      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
+      })
+    }
+    if (document.getElementById('video12').name) {
+      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
+      })
+    }
     if(list.length > 0) {
       if(val == 'ocr') {
         this.setState({
@@ -426,38 +492,6 @@ class Video extends Component {
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
   };
-  // 放大对应的视频
-  enlargeClick = (val) => {
-    if (val == 'isLangVideo1') {
-      if (document.getElementById('video1').name) {
-        this.setState({ isBigVideo: 'video1' })
-      }
-    } else if (val == 'isLangPublishVideo1') {
-      if (document.getElementById('publish_video1').name && this.state.isCustomer) {
-        this.setState({ isBigVideo: 'publish_video1' })
-      }
-    } else if (val == 'isLangVideo2') {
-      if (document.getElementById('video2').name) {
-        this.setState({ isBigVideo: 'video2' })
-      }
-    } else if (val == 'isLangVideo3') {
-      if (document.getElementById('video3').name) {
-        this.setState({ isBigVideo: 'video3' })
-      }
-    } else if (val == 'isLangVideo4') {
-      if (document.getElementById('video4').name) {
-        this.setState({ isBigVideo: 'video4' })
-      }
-    } else if (val == 'isLangVideo5') {
-      if (document.getElementById('video5').name) {
-        this.setState({ isBigVideo: 'video5' })
-      }
-    } else if (val == 'isLangVideo6') {
-      if (document.getElementById('video6').name) {
-        this.setState({ isBigVideo: 'video6' })
-      }
-    }
-  };
   // 画中画
   pictureInPicture = () => {
     let interval
@@ -508,12 +542,43 @@ class Video extends Component {
           title: this.state.videoSixName
         })
       }
-      // if(document.getElementById('video10').name) {
-      //   list.push({
-      //     name: 'video10',
-      //     title: '互动白板'
-      //   })
-      // }
+
+      if(document.getElementById('video7').name) {
+        list.push({
+          name: 'video7',
+          title: this.state.videoSevenName
+        })
+      }
+      if(document.getElementById('video8').name) {
+        list.push({
+          name: 'video8',
+          title: this.state.videoEightName
+        })
+      }
+      if(document.getElementById('video9').name) {
+        list.push({
+          name: 'video9',
+          title: this.state.videoNineName
+        })
+      }
+      if(document.getElementById('video10').name) {
+        list.push({
+          name: 'video10',
+          title: this.state.videoTenName
+        })
+      }
+      if(document.getElementById('video11').name) {
+        list.push({
+          name: 'video11',
+          title: this.state.videoElevenName
+        })
+      }
+      if(document.getElementById('video12').name) {
+        list.push({
+          name: 'video12',
+          title: this.state.videoTwelveName
+        })
+      }
       console.log(list)
       const width = 640;
       const height = 360  * list.length;
@@ -736,7 +801,7 @@ class Video extends Component {
                 isWhiteboard: false,
               })
             }else {
-              this.test_controller.UnPublish(document.getElementById('video10').name)
+              this.test_controller.UnPublish(document.getElementById('video20').name)
               this.setState({
                 isWhiteboard: false,
               })
@@ -745,6 +810,178 @@ class Video extends Component {
           
         }
         
+      } else if (Mival.typeId == 3100) {
+        if(Mival.data.sessionId == this.state.sessionId) {
+          if(Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoSix: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoSix: true
+              })
+            }
+            
+          }
+
+          if(Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoSix: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoSix: true
+              })
+            }
+            
+          }
+          if(Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            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 : '')) {
+            if(Mival.muteStatus == 0) {
+              this.setState({
+                voiceVideoTwelve: false
+              })
+            } else if(Mival.muteStatus == 1) {
+              this.setState({
+                voiceVideoTwelve: true
+              })
+            }
+            
+          }
+        }
       }
     };
 
@@ -753,7 +990,7 @@ class Video extends Component {
       type: '2',
       sigType: 1
     };
-    this.mpaasSig(data);
+    
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -806,11 +1043,13 @@ class Video extends Component {
           obj2.push(b)
         }
       }
-      console.log(obj, obj1)
+      this.mpaasSig(data);
     };
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
+      message.success('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头')
+      this.roomCallBack(2,'获取失败失败')
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -886,7 +1125,7 @@ class Video extends Component {
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
-      if(sid == document.getElementById('video10').name) {
+      if(sid == document.getElementById('video20').name) {
           callNimIM('sendCustomCmdMsg', {
             customId: this.state.imRoomId,
             content: JSON.stringify({
@@ -918,11 +1157,160 @@ class Video extends Component {
     // 推送“房间与会者列表”给新加⼊者
     this.test_controller.OnRoomAttendanceList = (participants) => {
       console.log('房间与会者列表', participants)
+      participants.map((item,index)=>{
+        if(item.uid != this.state.tellerAccount) {
+          item.publish.map((itemOne,indexOne)=>{
+            let array = this.state.roomCustomerList;
+      let newArray = [...array];
+      newArray.push({
+        feedId: itemOne.feedId,
+        uid: item.uid,
+        tag: itemOne.tag
+      });
+      console.log(array, newArray, this.state.roomCustomerList);
+      this.setState({
+        roomCustomerList: newArray
+      })
+      let config_param
+            if(itemOne.tag == 'VIDEO_SOURCE_SCREEN') {
+              config_param = {
+                subscribe_video_id: 'video21',
+                subscribe_audio_id: 'audio21',
+                subscribe_streamId_id: 'subscribe_streamId21',
+                feedId_id: 'feedId21',
+                feedId: itemOne.feedId
+              }
+              
+              this.tabTitlesClick(
+                {
+                  value: 'customerScreen',
+                  name: '客户投屏'
+                },'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
+                }
+              }
+            }
+            if (config_param !== undefined) {
+              config_param.need_volume_analyser = true
+              console.log(config_param)
+              this.test_controller.Subscribe(config_param)
+            }
+          })
+        }
+      })
     };
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
-      this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
+      // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
       this.setState(
         {
           isCustomer: true
@@ -932,6 +1320,20 @@ class Video extends Component {
     // 推送“有新发布”给与会者
     this.test_controller.OnNewPublish = (feed) => {
       console.log('有新发布者', feed);
+      callNimIM('sendCustomCmdMsg', {
+        customId: this.state.imRoomId,
+        content: JSON.stringify({
+          'typeId': 1014,
+          'sessionId': this.state.sessionId,
+           'meetingInfo': {
+            'title': this.props.meetingInfo.title,
+            'host': this.props.meetingInfo.host,
+            'customers': this.props.meetingInfo.customers
+          }
+          
+        })
+      }, function (code, message, data) {
+      })
       let array = this.state.roomCustomerList;
       let newArray = [...array];
       newArray.push({
@@ -947,10 +1349,10 @@ class Video extends Component {
       if(feed.uid != this.state.tellerAccount) {
         if(feed.tag == 'VIDEO_SOURCE_SCREEN') {
           config_param = {
-            subscribe_video_id: 'video11',
-            subscribe_audio_id: 'audio11',
-            subscribe_streamId_id: 'subscribe_streamId11',
-            feedId_id: 'feedId11',
+            subscribe_video_id: 'video21',
+            subscribe_audio_id: 'audio21',
+            subscribe_streamId_id: 'subscribe_streamId21',
+            feedId_id: 'feedId21',
             feedId: feed.feedId
           }
           
@@ -960,8 +1362,35 @@ class Video extends Component {
               name: '客户投屏'
             },'add'
           )
+          if (config_param !== undefined) {
+            config_param.need_volume_analyser = false
+            console.log(config_param)
+            setTimeout(()=>{
+     
+              this.test_controller.Subscribe(config_param)
+            }, 1000)
+            
+          }
         } else {
-          if(!document.getElementById('video1').name) {
+      //     let data_param = {
+      //       isVideo: true,
+      //       videoIndex: this.state.videoList.length + 1,
+      //       videoTwoName: ''
+      //     }
+      //     let videoList = this.state.videoList;
+      // let newvideoList = [...videoList];
+      // newvideoList.push(data_param);
+      //     this.setState({
+      //       videoList: newvideoList
+      //     },()=>{
+            // config_param = {
+            //   subscribe_video_id: 'video' + this.state.videoList.length,
+            //   subscribe_audio_id: 'audio' + this.state.videoList.length,
+            //   subscribe_streamId_id: 'subscribe_streamId' + this.state.videoList.length,
+            //   feedId_id: 'feedId' + this.state.videoList.length,
+            //   feedId: feed.feedId
+            // }
+            if(!document.getElementById('video1').name) {
             config_param = {
               subscribe_video_id: 'video1',
               subscribe_audio_id: 'audio1',
@@ -1015,13 +1444,74 @@ class Video extends Component {
               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
+            }
+          }
+            if (config_param !== undefined) {
+              config_param.need_volume_analyser = true
+              console.log(config_param)
+       
+                this.test_controller.Subscribe(config_param)
+              
+            }
+          // })
+            
+
         }
 
       }
-      if (config_param !== undefined) {
-        config_param.need_volume_analyser = true
-        this.test_controller.Subscribe(config_param)
-      }
+      
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -1056,39 +1546,82 @@ class Video extends Component {
       console.log('取消订阅媒体流成功', sid)
       this.state.tabTitles.map((item) => {
         if(item.value == 'customerScreen') {
-          if(!document.getElementById("video11").name) {
+          if(!document.getElementById("video21").name) {
             this.tabTitlesClick('customerScreen','delect')
           }
         }
       })
       if(!document.getElementById("video1").name) {
         this.setState({
-          videoOneName: ''
+          videoOneName: '',
+          voiceVideoOne: false
         })
       }
       if(!document.getElementById("video2").name) {
         this.setState({
-          videoTwoName: ''
+          videoTwoName: '',
+          voiceVideoTwo: false
         })
       }
       if(!document.getElementById("video3").name) {
         this.setState({
-          videoThreeName: ''
+          videoThreeName: '',
+          voiceVideoThree: false
         })
       }
       if(!document.getElementById("video4").name) {
         this.setState({
-          videoFourName: ''
+          videoFourName: '',
+          voiceVideoFour: false,
         })
       }
       if(!document.getElementById("video5").name) {
         this.setState({
-          videoFiveName: ''
+          videoFiveName: '',
+          voiceVideoFive: false
         })
       }
       if(!document.getElementById("video6").name) {
         this.setState({
-          videoSixName: ''
+          videoSixName: '',
+          voiceVideoSix: false
+        })
+      }
+
+      if(!document.getElementById("video7").name) {
+        this.setState({
+          videoSevenName: '',
+          voiceVideoSeven: false
+        })
+      }
+      if(!document.getElementById("video8").name) {
+        this.setState({
+          videoEightName: '',
+          voiceVideoEight: false
+        })
+      }
+      if(!document.getElementById("video9").name) {
+        this.setState({
+          videoNineName: '',
+          voiceVideoNine: false
+        })
+      }
+      if(!document.getElementById("video10").name) {
+        this.setState({
+          videoTenName: '',
+          voiceVideoTen: false
+        })
+      }
+      if(!document.getElementById("video11").name) {
+        this.setState({
+          videoElevenName: '',
+          voiceVideoEleven: false
+        })
+      }
+      if(!document.getElementById("video12").name) {
+        this.setState({
+          videoTwelveName: '',
+          voiceVideoTwelve: false
         })
       }
     };
@@ -1096,13 +1629,13 @@ class Video extends Component {
     this.test_controller.OnUnPublish = (feed) => {
       console.log('取消发布者', feed)
       for(let i=0;i<this.state.roomCustomerList.length;i++) {
-        if(this.state.roomCustomerList[i].uid == feed.uid) {
+        if(this.state.roomCustomerList[i].feedId == feed.feedId) {
           this.state.roomCustomerList.splice(i, 1)
         }
       }
 
       if(this.state.roomCustomerList.length == 0) {
-        this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
+        // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
         this.setState({
           isCustomer: false
         })
@@ -1150,7 +1683,7 @@ class Video extends Component {
     // 结束服务端录制成功
     this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
       console.log('结束服务端录制成功', recordId);
-      this.endSessionValue()
+      // this.endSessionValue()
       // 获取服务端录制结果
     };
     // 结束服务端录制失败
@@ -1310,6 +1843,13 @@ class Video extends Component {
       let subscribe_sid5 = document.getElementById('video5').name || document.getElementById('audio5').name;
       let subscribe_sid6 = document.getElementById('video6').name || document.getElementById('audio6').name;
 
+      let subscribe_sid7 = document.getElementById('video7').name || document.getElementById('audio7').name;
+      let subscribe_sid8 = document.getElementById('video8').name || document.getElementById('audio8').name;
+      let subscribe_sid9 = document.getElementById('video9').name || document.getElementById('audio9').name;
+      let subscribe_sid10 = document.getElementById('video10').name || document.getElementById('audio10').name;
+      let subscribe_sid11 = document.getElementById('video11').name || document.getElementById('audio11').name;
+      let subscribe_sid12 = document.getElementById('video12').name || document.getElementById('audio12').name;
+
       let volumeView;
       switch (sid) {
         case publish_sid:
@@ -1333,6 +1873,25 @@ class Video extends Component {
         case subscribe_sid6:
           volumeView = "subscribe_volumeView6";
           break;
+
+        case subscribe_sid7:
+          volumeView = "subscribe_volumeView7";
+          break;
+        case subscribe_sid8:
+          volumeView = "subscribe_volumeView8";
+          break;
+        case subscribe_sid9:
+          volumeView = "subscribe_volumeView9";
+          break;
+        case subscribe_sid10:
+          volumeView = "subscribe_volumeView10";
+          break;
+        case subscribe_sid11:
+          volumeView = "subscribe_volumeView11";
+          break;
+        case subscribe_sid12:
+          volumeView = "subscribe_volumeView12";
+          break;
       }
       if (!volumeView) {
         return;
@@ -1399,11 +1958,18 @@ class Video extends Component {
     }
   };
   finishSession = async () => {
-    try {
+    
+      
+      if(this.state.roomCustomerList.length == 0) {
+        debugger
+        try {
       let result = await API.finishSession({
         sessionId: this.state.sessionId,
         tellerId: this.props.tellerAccount
       });
+        } catch (err) {
+    }
+      }
       this.setState({
         isCustomer: false,
         isWhiteboard: false,
@@ -1413,12 +1979,7 @@ class Video extends Component {
         code: LEAVE_TYPE.TELLER_EXIT,
         errMsg: '坐席退出'
       })
-    } catch (err) {
-      this.props.onLeaveRoom({
-        code: LEAVE_TYPE.TELLER_EXIT,
-        errMsg: '坐席退出'
-      })
-    }
+
   }
   getRoomStatus = async data => {
     try {
@@ -1539,8 +2100,11 @@ class Video extends Component {
         customId: this.state.imRoomId,
         content: JSON.stringify({
           'typeId': 1013,
-          'state': 0,
-          'sessionId': this.state.sessionId,
+          'muteStatus': 1,
+          'data': {
+            'sessionId': this.state.sessionId,
+            'userId': this.props.tellerAccount
+          }
         })
       }, function (code, message, data) {
         console.log(data)
@@ -1562,8 +2126,11 @@ class Video extends Component {
         customId: this.state.imRoomId,
         content: JSON.stringify({
           'typeId': 1013,
-          'state': 1,
-          'sessionId': this.state.sessionId,
+          'muteStatus': 0,
+          'data': {
+            'sessionId': this.state.sessionId,
+            'userId': this.props.tellerAccount
+          }
         })
       }, function (code, message, data) {
         console.log(data)
@@ -1571,7 +2138,7 @@ class Video extends Component {
     }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId || this.state.isSuspend || !this.state.isCustomer) {
+    if (!this.state.sessionId || this.state.isSuspend) {
       message.success(this.props.prohibitPrompt)
       return false
     } else {
@@ -1634,7 +2201,7 @@ class Video extends Component {
         if (this.state.isWhiteboard) {
           publish_config.publish_device = 4
           publish_config.media_type = 1
-          publish_config.sid = document.getElementById('video10').name
+          publish_config.sid = document.getElementById('video20').name
           publish_config.part_of_screen_id = 'touBoxItem'
           publish_config.video_profile_type = 5
           this.test_controller.ChangeMediaStream(publish_config);
@@ -1642,7 +2209,7 @@ class Video extends Component {
             isPDF: true,
           })
         } else {
-          this.test_controller.UnPublish(document.getElementById('video10').name)
+          this.test_controller.UnPublish(document.getElementById('video20').name)
         }
         this.setState({
           publishDevic: 1,
@@ -1655,19 +2222,19 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       } else {
-        if (document.getElementById('video10').name) {
+        if (document.getElementById('video20').name) {
           publish_config.media_type = 1;
           publish_config.publish_device = 2;
           publish_config.video_profile_type = 5;
-          publish_config.sid = document.getElementById('video10').name;
+          publish_config.sid = document.getElementById('video20').name;
           this.test_controller.ChangeMediaStream(publish_config);
         } else {
           publish_config.media_type = 1
           publish_config.publish_device = 2
           publish_config.need_volume_analyser = true
           publish_config.video_profile_type = 5
-          publish_config.publish_video_id = 'video10'
-          publish_config.publish_streamId_id = 'subscribe_streamId10'
+          publish_config.publish_video_id = 'video20'
+          publish_config.publish_streamId_id = 'subscribe_streamId20'
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
@@ -1864,6 +2431,18 @@ class Video extends Component {
       sid = document.getElementById('video5').name;
     } else if (item.feedId == document.getElementById("feedId6").innerText) {
       sid = document.getElementById('video6').name;
+    } else if (item.feedId == document.getElementById("feedId7").innerText) {
+      sid = document.getElementById('video7').name;
+    } else if (item.feedId == document.getElementById("feedId8").innerText) {
+      sid = document.getElementById('video8').name;
+    } else if (item.feedId == document.getElementById("feedId9").innerText) {
+      sid = document.getElementById('video9').name;
+    } else if (item.feedId == document.getElementById("feedId10").innerText) {
+      sid = document.getElementById('video10').name;
+    } else if (item.feedId == document.getElementById("feedId11").innerText) {
+      sid = document.getElementById('video11').name;
+    } else if (item.feedId == document.getElementById("feedId12").innerText) {
+      sid = document.getElementById('video12').name;
     }
     console.log(sid)
     this.setState({
@@ -1885,6 +2464,28 @@ class Video extends Component {
   appGetUsername = async (sid) => {
     console.log(sid)
     let userId = ''
+    let index
+    // this.state.videoList.map((item,index)=>{
+    //   let name = 'video' + item.videoIndex
+    //   if(document.getElementById(name).name == sid){
+    //     userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById(("feedId" + item.videoIndex)).innerText).uid
+    //     index = index
+    //   }
+    // })
+    // try {
+    //   let result = await API.appGetUsername({
+    //     userId: userId
+    //   });
+    //   console.log(result)
+    //   if (result.code == 200) {
+    //     let data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
+    //     this.state.videoList[index].videoOneName = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById(("feedId" + item.videoIndex)).innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户' + item.videoIndex
+    //   } else {
+    //     message.success('查询失败')
+    //   }
+    // } catch (err) {
+
+    // }
     if(document.getElementById('video1').name == sid){
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
     }
@@ -1899,43 +2500,88 @@ class Video extends Component {
     }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
+    }
     try {
       let result = await API.appGetUsername({
         userId: userId
       });
       console.log(result)
+      let data
       if (result.code == 200) {
-        let data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
-        if(document.getElementById('video1').name == sid){
-
-          this.setState({
-            videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
-          })
-        }
-        if(document.getElementById('video2').name == sid){
-          this.setState({
-            videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data? data : '客户2'
-          })
-        }if(document.getElementById('video3').name == sid){
-          this.setState({
-            videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data : '客户3'
-          })
-        }if(document.getElementById('video4').name == sid){
-          this.setState({
-            videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data : '客户4'
-          })
-        }if(document.getElementById('video5').name == sid){
-          this.setState({
-            videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data? data : '客户5'
-          })
-        }if(document.getElementById('video6').name == sid){
-          this.setState({
-            videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户6'
-          })
-        }
+        data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
       } else {
         message.success('查询失败')
       }
+      if(document.getElementById('video1').name == sid){
+
+        this.setState({
+          videoOneName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户1'
+        })
+      }
+      if(document.getElementById('video2').name == sid){
+        this.setState({
+          videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data? data : '客户2'
+        })
+      }if(document.getElementById('video3').name == sid){
+        this.setState({
+          videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data : '客户3'
+        })
+      }if(document.getElementById('video4').name == sid){
+        this.setState({
+          videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data : '客户4'
+        })
+      }if(document.getElementById('video5').name == sid){
+        this.setState({
+          videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data? data : '客户5'
+        })
+      }if(document.getElementById('video6').name == sid){
+        this.setState({
+          videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户6'
+        })
+      }
+      if(document.getElementById('video7').name == sid){
+        this.setState({
+          videoSevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户7'
+        })
+      }if(document.getElementById('video8').name == sid){
+        this.setState({
+          videoEightName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户8'
+        })
+      }if(document.getElementById('video9').name == sid){
+        this.setState({
+          videoNineName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户9'
+        })
+      }if(document.getElementById('video10').name == sid){
+        this.setState({
+          videoTenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户10'
+        })
+      }if(document.getElementById('video11').name == sid){
+        this.setState({
+          videoElevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户11'
+        })
+      }if(document.getElementById('video12').name == sid){
+        this.setState({
+          videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' :data ? data: '客户12'
+        })
+      }
     } catch (err) {
 
     }
@@ -1991,11 +2637,11 @@ class Video extends Component {
         value: 'RMWhiteboard',
         name: 'RM白板'
       },'add')
-      if (document.getElementById('video10').name) {
+      if (document.getElementById('video20').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 4
         publish_config.media_type = 1
-        publish_config.sid = document.getElementById('video10').name
+        publish_config.sid = document.getElementById('video20').name
         publish_config.part_of_screen_id = 'touBoxItem'
         publish_config.video_profile_type = 5
         this.test_controller.ChangeMediaStream(publish_config);
@@ -2006,7 +2652,7 @@ class Video extends Component {
         publish_config.need_volume_analyser = true
         publish_config.video_profile_type = 5
         publish_config.part_of_screen_id = 'touBoxItem';
-        publish_config.publish_video_id = 'video10'
+        publish_config.publish_video_id = 'video20'
         publish_config.publish_streamId_id = 'subscribe_streamId10'
         publish_config.publish_tag = 'projectionWhiteboard'
         this.test_controller.Publish(publish_config)
@@ -2021,20 +2667,6 @@ class Video extends Component {
     this.setState({
           isSelect: value,
         })
-    // if (this.state.isSelect == 'video') {
-    //   if (document.getElementById('video10').name) {
-    //     this.setState({
-    //       isSelect: 'noVideo',
-    //     })
-    //   } else {
-    //     message.success('当前无签字白板')
-    //   }
-
-    // } else {
-    //   this.setState({
-    //     isSelect: 'video',
-    //   })
-    // }
   }
   facialHandleVisibleChange=(value)=>{
     if(!value) {
@@ -2051,7 +2683,7 @@ class Video extends Component {
     }
   }
   render() {
-    const {theme} = this.props
+    const {meetingInfo} = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
@@ -2059,11 +2691,11 @@ class Video extends Component {
     const customerNameList = (
       <span>
         {
-          theme.customers.map((item,index)=>{
+          meetingInfo.customers.map((item,index)=>{
             return <label>
               {item}
               {
-                theme.customers.length > 0 && index != theme.customers.length-1 &&<span>，</span>
+                meetingInfo.customers.length > 0 && index != meetingInfo.customers.length-1 &&<span>，</span>
               }
               
             </label>
@@ -2082,23 +2714,43 @@ class Video extends Component {
         }
       </div>
     )
+    const videoCustomer = 
+          this.state.videoList.map((item,index)=>{
+            return <div className={`itemed`} style={{ display: (item.isVideo) ? '' : 'none', }}>
+            <video
+              id={'video' + item.videoIndex}
+              autoPlay
+              muted={true}
+              className="video"
+            />
+            <audio id={'audio' + item.videoIndex} autoPlay />
+            <label style={{ display: 'none' }} id={'feedId' + item.videoIndex} type="text" />
+            <div className={`customerTitle titleSamlle`}>
+              <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                {this.state.videoTwoName}
+              </div>
+            </div>
+            <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
+        </div>
+          })
+        
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           {tabTitleList}
           <div className="health" style={{'margin-top': (this.state.tabTitles.length > 0) ? '0px' : '20px' }}>
-            <div className="projection" style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
+            <div className="projection">
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
-                    id="video10"
+                    id="video20"
                     autoPlay
                     muted={true}
                     className="video"
                   />
-                  <audio id="audio10" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId10" type="text" />
+                  <audio id="audio20" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId20" type="text" />
                 </div>
 
               </div>
@@ -2110,14 +2762,13 @@ class Video extends Component {
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'customerScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
-                    id="video11"
+                    id="video21"
                     autoPlay
                     muted={true}
                     className="video"
                   />
-                  <audio id="audio11" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId11" type="text" />
-                  {/* <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView10" width="70" height="70"></canvas> */}
+                  <audio id="audio21" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId21" type="text" />
                 </div>
 
               </div>
@@ -2128,11 +2779,11 @@ class Video extends Component {
                   <ul>
                     <li>
                       <span>会议主题：</span>
-                      <label>{theme.title}</label>
+                      <label>{meetingInfo.title}</label>
                     </li>
                     <li>
-                      <span>支持人：</span>
-                      <label>{theme.host}</label>
+                      <span>主持人：</span>
+                      <label>{meetingInfo.host}</label>
                     </li>
                     <li>
                       <span>参会客户：</span>
@@ -2145,15 +2796,15 @@ class Video extends Component {
               
 
             </div>
-            <div className="wrapper" style={{ width: (this.state.isCustomer) ? '20%' : '100%', }}>
+            <div className="wrapper" style={{ width:  '20%' , }}>
               <div
-                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'isBack' : (this.state.isCustomer ? 'isBack' : ''))} ${this.state.isCustomer ? '' : 'video1Div'}`}
+                className={`itemed ${this.state.publishDevic == 4 ? '' : 'isBack'} `}
               >
                 <div className="publishVideoDiv">
                   
                   <video
                     id="publish_video1"
-                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
+                    className={`publishVideoClass`}
                     autoPlay
                     muted={true}
                     webkit-playsinline={true}
@@ -2163,22 +2814,24 @@ class Video extends Component {
                   {
                     this.state.voiceStatue && <img
                       alt=""
-                      src={require("../../assets/img/icon_MuteOne.png").default}
-                      className="imgClass voiceClass"
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceClass"
                     />
                   }
-                  <div id="publish_video_div" style={{ display: (this.state.isCustomer) ? '' : 'none'}} className={`tellerTitle titleSamlle`}>
+                  <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
                     <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>坐席</div>
                   </div>
-                  <canvas style={{ display: (this.state.isCustomer && !this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
+              {/* {
+                videoCustomer
+              } */}
               <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div
-                className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
-                // className="itemed item1"
-                style={{ position: "relative"}}
+                className={`itemed`}
+                style={{ position: "relative",display: (this.state.videoOneName) ? '' : 'none'}}
               >
                 {
                   this.state.customAudioed && <img
@@ -2187,7 +2840,7 @@ class Video extends Component {
                     style={{ width: "100%", height: "100%",}}
                   ></img>
                 }
-                <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
+                <div className="video1Div">
                   <video
                     id="video1"
                     autoPlay
@@ -2196,6 +2849,13 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
+                  {
+                    this.state.voiceVideoOne && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                   <div style={{ display: (this.state.videoOneName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
                     <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                       {this.state.videoOneName}
@@ -2203,10 +2863,10 @@ class Video extends Component {
 
                     
                   </div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoOneName&&!this.state.voiceVideoOne) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
-              <div className={`itemed`}>
+              <div className={`itemed`} style={{ display: (this.state.videoTwoName) ? '' : 'none', }}>
                   <video
                     id="video2"
                     autoPlay
@@ -2215,15 +2875,22 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
+                  {
+                    this.state.voiceVideoTwo && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                   <div style={{ display: (this.state.videoTwoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
                     <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                       {this.state.videoTwoName}
                     </div>
                   </div>
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoTwoName&&!this.state.voiceVideoTwo) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`}
-              style={{'margin-top': '5px' }}>
+              style={{display: (this.state.videoThreeName) ? '' : 'none' }}>
                 <video
                   id="video3"
                   autoPlay
@@ -2232,14 +2899,21 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
+                {
+                    this.state.voiceVideoThree && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoThreeName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoThreeName&&!this.state.voiceVideoThree) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
-              <div className={`itemed`}>
+              <div className={`itemed`} style={{ display: (this.state.videoFourName) ? '' : 'none', }}>
                 <video
                   id="video4"
                   autoPlay
@@ -2248,15 +2922,22 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
+                {
+                    this.state.voiceVideoFour && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoFourName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFourName&&!this.state.voiceVideoFour) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`}
-              style={{'margin-top': '5px'  }}>
+              style={{display: (this.state.videoFiveName) ? '' : 'none' }}>
                 <video
                   id="video5"
                   autoPlay
@@ -2265,14 +2946,21 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
+                {
+                    this.state.voiceVideoFive && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoFiveName}
                   </div>  
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFiveName&&!this.state.voiceVideoFive) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div className={`"itemed"`}>
+              <div className={`itemed`} style={{ display: (this.state.videoSixName) ? '' : 'none', }}>
                 <video
                   id="video6"
                   autoPlay
@@ -2281,14 +2969,177 @@ class Video extends Component {
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
+                {
+                    this.state.voiceVideoSix && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
                 <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                   <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
                     {this.state.videoSixName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
+              <div
+                className={`itemed`}
+                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', }}>
+                  <video
+                    id="video7"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                  />
+                  <audio id="audio7" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId7" type="text" />
+                  {
+                    this.state.voiceVideoSeven && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                  <div style={{ display: (this.state.videoSevenName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                      {this.state.videoSevenName}
+                    </div>
+
+                    
+                  </div>
+                  <canvas style={{ display: (this.state.videoSevenName&&!this.state.voiceVideoSeven) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
+                </div>
+              </div>
+              <div className={`itemed`} style={{ display: (this.state.videoEightName) ? '' : 'none', }}>
+                  <video
+                    id="video8"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                  />
+                  <audio id="audio8" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId8" type="text" />
+                  {
+                    this.state.voiceVideoEight && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                  <div style={{ display: (this.state.videoEightName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
+                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                      {this.state.videoEightName}
+                    </div>
+                  </div>
+                  <canvas style={{ display: (this.state.videoEightName&&!this.state.voiceVideoEight) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
+              </div>
+              <div className={`itemed`} style={{ display: (this.state.videoNineName) ? '' : 'none', }}>
+                <video
+                  id="video9"
+                  autoPlay
+                  muted={true} 
+                  className="video"
+                />
+                <audio id="audio9" autoPlay />
+                <label style={{ display: 'none' }} id="feedId9" type="text" />
+                {
+                    this.state.voiceVideoNine && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoNineName}
+                  </div>
+                </div>
+                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
+
+              </div>
+              <div className={`itemed`}
+              style={{display: (this.state.videoTenName) ? '' : 'none' }}>
+                <video
+                  id="video10"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio10" autoPlay />
+                <label style={{ display: 'none' }} id="feedId10" type="text" />
+                {
+                    this.state.voiceVideoTen && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoTenName}
+                  </div>
+                </div>
+                <canvas style={{ display: (this.state.videoTenName&&!this.state.voiceVideoTen) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
+              </div>
+              <div className={`itemed`} style={{ display: (this.state.videoElevenName) ? '' : 'none', }}>
+                <video
+                  id="video11"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio11" autoPlay />
+                <label style={{ display: 'none' }} id="feedId11" type="text" />
+                {
+                    this.state.voiceVideoEleven && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoElevenName}
+                  </div>
+                </div>
+                <canvas style={{ display: (this.state.videoElevenName&&!this.state.voiceVideoEleven) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
+              </div>
+              <div className={`itemed`}
+              style={{display: (this.state.videoTwelveName) ? '' : 'none'  }}>
+                <video
+                  id="video12"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio12" autoPlay />
+                <label style={{ display: 'none' }} id="feedId12" type="text" />
+                {
+                    this.state.voiceVideoTwelve && <img
+                      alt=""
+                      src={require("../../assets/img/jingyin.png").default}
+                      className="imgClassVoice voiceVideoClass"
+                    />
+                  }
+                <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                    {this.state.videoTwelveName}
+                  </div>  
+                </div>
+                <canvas style={{ display: (this.state.videoTwelveName&&!this.state.voiceVideoTwelve) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
+              </div>
+              
               </div>
             </div>
             <img id="icon_huatong" style={{display:'none'}} src={require("../../assets/img/icon_huatong.png").default}></img>
@@ -2386,11 +3237,11 @@ Video.defaultProps = {
   voiceColor: '#0AE544',
   titleBackground: 'rgba(0,0,0,0.65)',
   titleColor: '#fff',
-  microphoneSize: '50',
+  microphoneSize: '40',
   fontSize: '14',
   fontFamily: 'auto',
   menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
-  theme: {
+  meetingInfo: {
     title: '测试',
     host: 'wmz',
     customers: ['王三','张思']