react_hsbc_teller 0.4.2 → 0.4.6

package/packages/pages/video/video.jsx

@@ -76,6 +76,12 @@ class Video extends Component {
     videoFourName: '',
     videoFiveName: '',
     videoSixName: '',
+    videoSevenName: '',
+    videoEightName:'',
+    videoTenName: '',
+    videoNineName: '',
+    videoTwelveName: '',
+    videoElevenName: '',
     tabTitles: [
     ],
     videoList: [],
@@ -85,9 +91,22 @@ class Video extends Component {
     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 数据类型
@@ -386,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({
@@ -482,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;
@@ -710,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,
               })
@@ -793,6 +884,103 @@ class Video extends Component {
             }
             
           }
+
+          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
+              })
+            }
+            
+          }
         }
       }
     };
@@ -891,7 +1079,7 @@ class Video extends Component {
       console.log('初始化房间成功');
       // 视频通话的初始化
       if (this.state.sessionId) {
-        this.test_controller.JoinRoom(this.state.channelId, this.state.rtoken, 1)
+        this.test_controller.JoinRoom(this.state.channelId, this.state.rtoken)
       } else {
         this.test_controller.CreateRoom()
       }
@@ -937,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({
@@ -969,6 +1157,155 @@ 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) => {
@@ -1012,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
           }
           
@@ -1025,18 +1362,27 @@ 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 {
-          // let data_param = {
-          //   isVideo: true,
-          //   videoIndex: this.state.videoList.length + 1,
-          //   videoTwoName: ''
-          // }
-          // let videoList = []
-          // console.log(data_param)
-          // videoList.push(data_param)
-          // this.setState({
-          //   videoList
-          // })
+      //     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,
@@ -1044,7 +1390,7 @@ class Video extends Component {
             //   feedId_id: 'feedId' + this.state.videoList.length,
             //   feedId: feed.feedId
             // }
-          if(!document.getElementById('video1').name) {
+            if(!document.getElementById('video1').name) {
             config_param = {
               subscribe_video_id: 'video1',
               subscribe_audio_id: 'audio1',
@@ -1098,14 +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
-        console.log(config_param)
-        this.test_controller.Subscribe(config_param)
-      }
+      
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -1140,7 +1546,7 @@ 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')
           }
         }
@@ -1181,12 +1587,49 @@ class Video extends Component {
           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
+        })
+      }
     };
     // 推送“取消发布”给与会者
     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)
         }
       }
@@ -1240,7 +1683,7 @@ class Video extends Component {
     // 结束服务端录制成功
     this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
       console.log('结束服务端录制成功', recordId);
-      this.endSessionValue()
+      // this.endSessionValue()
       // 获取服务端录制结果
     };
     // 结束服务端录制失败
@@ -1400,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:
@@ -1423,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;
@@ -1489,11 +1958,17 @@ class Video extends Component {
     }
   };
   finishSession = async () => {
-    try {
+    
+      
+      if(this.state.roomCustomerList.length == 0) {
+        try {
       let result = await API.finishSession({
         sessionId: this.state.sessionId,
         tellerId: this.props.tellerAccount
       });
+        } catch (err) {
+    }
+      }
       this.setState({
         isCustomer: false,
         isWhiteboard: false,
@@ -1503,12 +1978,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 {
@@ -1730,7 +2200,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);
@@ -1738,7 +2208,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,
@@ -1751,19 +2221,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)
         }
@@ -1960,6 +2430,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({
@@ -2017,43 +2499,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) {
 
     }
@@ -2109,11 +2636,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);
@@ -2124,7 +2651,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)
@@ -2139,20 +2666,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) {
@@ -2200,25 +2713,25 @@ 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>
-    //       })
+    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">
@@ -2230,13 +2743,13 @@ class Video extends Component {
               <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>
@@ -2248,14 +2761,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>
@@ -2269,7 +2781,7 @@ class Video extends Component {
                       <label>{meetingInfo.title}</label>
                     </li>
                     <li>
-                      <span>支持人：</span>
+                      <span>主持人：</span>
                       <label>{meetingInfo.host}</label>
                     </li>
                     <li>
@@ -2318,7 +2830,7 @@ class Video extends Component {
               <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div
                 className={`itemed`}
-                style={{ position: "relative"}}
+                style={{ position: "relative",display: (this.state.videoOneName) ? '' : 'none'}}
               >
                 {
                   this.state.customAudioed && <img
@@ -2327,7 +2839,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
@@ -2353,7 +2865,7 @@ class Video extends Component {
                   <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
@@ -2377,7 +2889,7 @@ class Video extends Component {
                   <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
@@ -2398,9 +2910,9 @@ class Video extends Component {
                     {this.state.videoThreeName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.videoTwoName&&!this.state.voiceVideoThree) ? '' : '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
@@ -2424,7 +2936,7 @@ class Video extends Component {
                 <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
@@ -2447,7 +2959,7 @@ class Video extends Component {
                 </div>
                 <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
@@ -2471,6 +2983,162 @@ class Video extends Component {
                 <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>