react_hsbc_teller 0.7.8 → 0.8.2

package/packages/pages/video/video.jsx

@@ -28,7 +28,11 @@ const LEAVE_TYPE = {
   ROOM_DESTROYED: -1, // 房间异常
 }
 let pictureInPictureVideo = ''
+message.config({
+  getContainer: ()=>document.getElementById('allHSBC')
+})
 @injectIntl
+
 class Video extends Component {
   constructor(props) {
     super(props)
@@ -37,7 +41,8 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
-    sessionType: true,
+    isJoinRoom: false,
+    sessionType: false,
     isWhiteboard: false,
     isSelect: '',
     loading: false,
@@ -72,10 +77,10 @@ class Video extends Component {
     workSpaceId: '',
     bizName: '',
     appId: '',
-    channelId: this.props.roomId,
-    rtoken: this.props.mtoken,
-    sessionId: this.props.sessionId,
-    imRoomId: this.props.imRoomId,
+    channelId: '',
+    rtoken: '',
+    sessionId: '',
+    imRoomId: '',
     isPictureInPicture: false,
     clickedFacial: false,
     clickedOcr: false,
@@ -115,7 +120,19 @@ class Video extends Component {
     imStatus: false,
     imJoinRoom: false,
     analyserData: new Map(),
-    analyserHeight: new Map()
+    analyserHeight: new Map(),
+    noVideoOne: false,
+    noVideoTwo: false,
+    noVideoThree: false,
+    noVideoFour: false,
+    noVideoFive: false,
+    noVideoSix: false,
+    noVideoSeven: false,
+    noVideoEight: false,
+    noVideoNine: false,
+    noVideoTen: false,
+    noVideoEleven: false,
+    noVideoTwelve: false,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -142,7 +159,8 @@ class Video extends Component {
       console.log(result);
       this.setState({
         imRoomId: result.imRoomId,
-        sessionId: result.sessionId
+        sessionId: result.sessionId,
+        loading: false,
       });
       // eslint-disable-next-line no-undef
       if(this.state.imStatus) {
@@ -165,15 +183,21 @@ class Video extends Component {
       })
     } catch (err) {
       console.error(err);
+      
       this.setState({
         sessionType: false
       })
-      this.props.createRoomCallback({
-        type: 2,
-        errorManage: '保存房间信息失败',
-        errorCode:-9,
-        data: {}
-      })
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      } else {
+        this.props.createRoomCallback({
+          type: 2,
+          errorManage: '保存房间信息失败',
+          errorCode:-9,
+          data: {}
+        })
+      }
+      
     }
   };
   /**
@@ -203,7 +227,12 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
-      this.roomCallBack(2, '签名失败',-8)
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      } else {
+        this.roomCallBack(2, '签名失败',-8)
+      }
+      
     }
   };
   handleEdit = () => {
@@ -357,6 +386,9 @@ class Video extends Component {
 
 
     } catch (err) {
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
       console.error(err);
     }
   };
@@ -376,6 +408,9 @@ class Video extends Component {
 
     } catch (err) {
       console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   };
   dataURLtoFile = (dataURI, type) => {
@@ -514,13 +549,15 @@ class Video extends Component {
       message.error({
         content: value,
         icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-        className: 'errorClassName'
+        className: 'errorClassName',
+        top: 200
       })
     } else if(valueOne == 'success') {
       message.success({
         content: value,
         icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-        className: 'successClassName'
+        className: 'successClassName',
+        top: 200
       })
     }
     
@@ -575,49 +612,56 @@ class Video extends Component {
       list.push({
         name: 'video1',
         title: this.state.videoOneName,
-        voice: 'voiceVideoOne'
+        voice: 'voiceVideoOne',
+        noVideo: this.state.noVideoOne
       })
     }
     if (document.getElementById('publish_video1').name) {
       list.push({
         name: 'publish_video1',
         title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席',
-        voice: 'voiceStatue'
+        voice: 'voiceStatue',
+        noVideo: false
       })
     }
     if (document.getElementById('video2').name) {
       list.push({
         name: 'video2',
         title: this.state.videoTwoName,
-        voice: 'voiceVideoTwo'
+        voice: 'voiceVideoTwo',
+        noVideo: this.state.noVideoTwo
       })
     }
     if (document.getElementById('video3').name) {
       list.push({
         name: 'video3',
         title: this.state.videoThreeName,
-        voice: 'voiceVideoThree'
+        voice: 'voiceVideoThree',
+        noVideo: this.state.noVideoThree
       })
     }
     if (document.getElementById('video4').name) {
       list.push({
         name: 'video4',
         title: this.state.videoFourName,
-        voice: 'voiceVideoFour'
+        voice: 'voiceVideoFour',
+        noVideo: this.state.noVideoFour
       })
     }
     if (document.getElementById('video5').name) {
       list.push({
         name: 'video5',
         title: this.state.videoFiveName,
-        voice: 'voiceVideoFive'
+        voice: 'voiceVideoFive',
+        noVideo: this.state.noVideoFive
       })
     }
     if (document.getElementById('video6').name) {
       list.push({
         name: 'video6',
         title: this.state.videoSixName,
-        voice: 'voiceVideoSix'
+        voice: 'voiceVideoSix',
+        noVideo: this.state.noVideoSix
       })
     }
 
@@ -625,42 +669,48 @@ class Video extends Component {
       list.push({
         name: 'video7',
         title: this.state.videoSevenName,
-        voice: 'voiceVideoSeven'
+        voice: 'voiceVideoSeven',
+        noVideo: this.state.noVideoSeven
       })
     }
     if (document.getElementById('video8').name) {
       list.push({
         name: 'video8',
         title: this.state.videoEightName,
-        voice: 'voiceVideoEight'
+        voice: 'voiceVideoEight',
+        noVideo: this.state.noVideoEight
       })
     }
     if (document.getElementById('video9').name) {
       list.push({
         name: 'video9',
         title: this.state.videoNineName,
-        voice: 'voiceVideoNine'
+        voice: 'voiceVideoNine',
+        noVideo: this.state.noVideoNine
       })
     }
     if (document.getElementById('video10').name) {
       list.push({
         name: 'video10',
         title: this.state.videoTenName,
-        voice: 'voiceVideoTen'
+        voice: 'voiceVideoTen',
+        noVideo: this.state.noVideoTen
       })
     }
     if (document.getElementById('video11').name) {
       list.push({
         name: 'video11',
         title: this.state.videoElevenName,
-        voice: 'voiceVideoEleven'
+        voice: 'voiceVideoEleven',
+        noVideo: this.state.noVideoEleven
       })
     }
     if (document.getElementById('video12').name) {
       list.push({
         name: 'video12',
         title: this.state.videoTwelveName,
-        voice: 'voiceVideoTwelve'
+        voice: 'voiceVideoTwelve',
+        noVideo: this.state.noVideoTwelve
       })
     }
     console.log(list)
@@ -686,8 +736,13 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 640 / videoWidth;
         }
+        if(list[i].noVideo){
+          cobj.fillStyle = '#333';
+        cobj.fillRect((640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight)
+        } else {
+          cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, 640, 360);
 
-        cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight);
+        }
         cobj.beginPath();
         cobj.strokeStyle = this.props.titleColor;
         cobj.fillStyle = this.props.titleBackground;
@@ -833,6 +888,9 @@ class Video extends Component {
     });
   }
   roomCallBack = (type, manege,code) => {
+    this.setState({
+      loading: false,
+    })
     if (this.state.sessionId) {
       this.props.joinRoomCallback({
         type: type,
@@ -894,6 +952,158 @@ class Video extends Component {
       //     this.endSession('customerHangUp')
       //   }
       // } 
+      else if (Mival.typeId == 3002) {
+        if (Mival.data.sessionId == this.state.sessionId) {
+          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            this.setState({
+              noVideoOne: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+
+            this.setState({
+              noVideoTwo: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            this.setState({
+              noVideoThree: true
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+
+            this.setState({
+              noVideoFour: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            this.setState({
+              noVideoFive: true
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+
+            this.setState({
+              noVideoSix: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
+
+            this.setState({
+              noVideoSeven: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
+            this.setState({
+              noVideoEight: true
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
+
+            this.setState({
+              noVideoNine: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
+            this.setState({
+              noVideoTen: true
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
+
+            this.setState({
+              noVideoEleven: true
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
+
+            this.setState({
+              noVideoTwelve: true
+            })
+          }
+          this.pictureInPicture('Refresh')
+        }
+      }
+      else if (Mival.typeId == 3003) {
+        if (Mival.data.sessionId == this.state.sessionId) {
+          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            this.setState({
+              noVideoOne: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+
+            this.setState({
+              noVideoTwo: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            this.setState({
+              noVideoThree: false
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+
+            this.setState({
+              noVideoFour: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            this.setState({
+              noVideoFive: false
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+
+            this.setState({
+              noVideoSix: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
+
+            this.setState({
+              noVideoSeven: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
+            this.setState({
+              noVideoEight: false
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
+
+            this.setState({
+              noVideoNine: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
+            this.setState({
+              noVideoTen: false
+            })
+
+          }
+          if (Mival.data.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
+
+            this.setState({
+              noVideoEleven: false
+            })
+          }
+          if (Mival.data.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
+
+            this.setState({
+              noVideoTwelve: false
+            })
+          }
+          this.pictureInPicture('Refresh')
+        }
+      }
       else if (Mival.typeId == 1215) {
         // 一炒多的图片
         if (Mival.sessionId == this.state.sessionId) {
@@ -1140,7 +1350,7 @@ class Video extends Component {
           console.log('deviceId' + devicesInfo[i].deviceId);
 
           b.actionid = devicesInfo[i].deviceId;
-          b.groupId = devicesInfo[i].groupId;
+          b.groupId = devicesInfo[i].groupId || 'empty';
           if (
             devicesInfo[i].label === '' ||
             devicesInfo[i].label === undefined ||
@@ -1154,7 +1364,7 @@ class Video extends Component {
         } else if (devicesInfo[i].kind === 'audioinput') {
           // 麦克风
           b.actionid = devicesInfo[i].deviceId;
-          b.groupId = devicesInfo[i].groupId;
+          b.groupId = devicesInfo[i].groupId || 'empty';
           if (
             devicesInfo[i].label === '' ||
             devicesInfo[i].label === undefined ||
@@ -1168,7 +1378,7 @@ class Video extends Component {
         } else if (devicesInfo[i].kind === 'audiooutput') {
           // 喇叭
           b.actionid = devicesInfo[i].deviceId;
-          b.groupId = devicesInfo[i].groupId;
+          b.groupId = devicesInfo[i].groupId || 'empty';
           if (
             devicesInfo[i].label === '' ||
             devicesInfo[i].label === undefined ||
@@ -1205,12 +1415,13 @@ class Video extends Component {
          arr2[obj2[i].groupId] = true;
      }
  }
+ console.log(objList, objList1, objList2 )
       this.setState({
         cameraList: objList,
         microphoneList: objList1,
-        speakerList: [objList2[0]]
+        speakerList: [objList2.length>0? objList2[0]: []]
       })
-      if (!this.state.appId && this.state.sessionType) {
+      if (!this.state.appId && !this.state.sessionType) {
         this.mpaasSig(data);
         this.setState({
           cameraValue: obj[0].actionid,
@@ -1311,13 +1522,17 @@ class Video extends Component {
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
       this.setState({
-        sessionType: false
+        sessionType: false,
+        isJoinRoom: true
       })
       this.roomCallBack(2, '加入失败',-5)
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
+      this.setState({
+        sessionType: true
+      })
       if (sid == document.getElementById('video20').name) {
         callNimIM('sendCustomCmdMsg', {
           customId: this.state.imRoomId,
@@ -1781,12 +1996,14 @@ class Video extends Component {
         this.setState({
           publishDevic: 1,
           isSharedScreen: false,
-          screenName: '投屏'
+          screenName: '投屏',
+          sessionType: false
         });
         this.tabTitlesClick('RMScreen', 'delect')
         if (this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
+
       }
     };
     // 取消订阅媒体流成功
@@ -1902,7 +2119,10 @@ class Video extends Component {
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
       console.log('退出房间回调', leaveType);
-      this.finishSession()
+      if(!this.state.isJoinRoom) {
+        this.finishSession()
+      }
+      
     };
     // 推送“退出房间者”给与会者
     this.test_controller.OnParticipantLeaveRoom = (
@@ -2223,6 +2443,9 @@ class Video extends Component {
 
     } catch (err) {
       console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   };
   finishSession = async () => {
@@ -2235,6 +2458,9 @@ class Video extends Component {
           tellerId: this.props.tellerAccount
         });
       } catch (err) {
+        if(err.status == 502 || err.status== 404) {
+          this.roomCallBack(2, '连接服务器失败',-11)
+        }
       }
     }
     this.setState({
@@ -2243,7 +2469,7 @@ class Video extends Component {
       isPictureInPicture: false,
       imStatus: false,
       imJoinRoom: false,
-      sessionType: true
+      sessionType: false
     });
     this.props.onLeaveRoom({
       code: LEAVE_TYPE.TELLER_EXIT,
@@ -2259,10 +2485,6 @@ class Video extends Component {
       if (result.code == 200 && result.data.roomStatus == 1) {
         this.addToScript()
       } else {
-        this.props.sessionId = ''
-        this.props.roomId = ''
-        this.props.mtoken = ''
-        this.props.imRoomId = ''
         this.setState({
           channelId: '',
           rtoken: '',
@@ -2280,10 +2502,6 @@ class Video extends Component {
         // })
       }
     } catch (err) {
-      this.props.sessionId = ''
-        this.props.roomId = ''
-        this.props.mtoken = ''
-        this.props.imRoomId = ''
         this.setState({
           channelId: '',
           rtoken: '',
@@ -2311,7 +2529,7 @@ class Video extends Component {
       this.setState({
         sessionType: false
       })
-      this.roomCallBack(2, '创建房间失败',-4)
+      this.roomCallBack(2, '加载资源失败',-10)
       
       
   })
@@ -2361,9 +2579,6 @@ class Video extends Component {
             script.onload = () => {
               that.test_controller = new McuController();
               that.mountClick()
-              that.setState({
-                loading: false,
-              })
             }
           }
         } else {
@@ -2733,7 +2948,9 @@ class Video extends Component {
         this.messageClick('发送失败','error')
       }
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   }
   handleCancelInvitation = () => {
@@ -2835,7 +3052,7 @@ class Video extends Component {
       console.log(result)
       let data
       if (result.code == 200) {
-        data = result.data.userInfo ? result.data.userInfo.userName ? result.data.userInfo.userName : '' : ''
+        data = result.data.username ? result.data.username : ''
       } else {
         this.messageClick('查询失败','error')
       }
@@ -2893,7 +3110,9 @@ class Video extends Component {
       }
       this.pictureInPicture('Refresh')
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   }
   linkClick=()=>{
@@ -2948,7 +3167,9 @@ class Video extends Component {
         this.messageClick('签字失败','error')
       }
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败',-11)
+      }
     }
   }
   handleOkSign = () => {
@@ -3137,7 +3358,7 @@ class Video extends Component {
       margin: 'auto'
     };
     return (
-      <div className="all">
+      <div className="all" id="allHSBC">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           <div className="health">
@@ -3247,7 +3468,7 @@ class Video extends Component {
                     id="video1"
                     autoPlay
                     muted={true}
-                    className="video1"
+                    className={`video1 ${this.state.noVideoOne ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
@@ -3275,7 +3496,7 @@ class Video extends Component {
                   id="video2"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoTwo ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio2" autoPlay />
                 <label style={{ display: 'none' }} id="feedId2" type="text" />
@@ -3301,7 +3522,7 @@ class Video extends Component {
                   id="video3"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoThree ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
@@ -3326,7 +3547,7 @@ class Video extends Component {
                   id="video4"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoFour ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
@@ -3352,7 +3573,7 @@ class Video extends Component {
                   id="video5"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoFive ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
@@ -3377,7 +3598,7 @@ class Video extends Component {
                   id="video6"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoSix ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
@@ -3414,7 +3635,7 @@ class Video extends Component {
                     id="video7"
                     autoPlay
                     muted={true}
-                    className="video"
+                    className={`video ${this.state.noVideoSeven ? 'isNoVideo' : ''}`}
                   />
                   <audio id="audio7" autoPlay />
                   <label style={{ display: 'none' }} id="feedId7" type="text" />
@@ -3442,7 +3663,7 @@ class Video extends Component {
                   id="video8"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoEight ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio8" autoPlay />
                 <label style={{ display: 'none' }} id="feedId8" type="text" />
@@ -3467,7 +3688,7 @@ class Video extends Component {
                   id="video9"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoNine ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio9" autoPlay />
                 <label style={{ display: 'none' }} id="feedId9" type="text" />
@@ -3494,7 +3715,7 @@ class Video extends Component {
                   id="video10"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoTen ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio10" autoPlay />
                 <label style={{ display: 'none' }} id="feedId10" type="text" />
@@ -3519,7 +3740,7 @@ class Video extends Component {
                   id="video11"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoEleven ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio11" autoPlay />
                 <label style={{ display: 'none' }} id="feedId11" type="text" />
@@ -3545,7 +3766,7 @@ class Video extends Component {
                   id="video12"
                   autoPlay
                   muted={true}
-                  className="video"
+                  className={`video ${this.state.noVideoTwelve ? 'isNoVideo' : ''}`}
                 />
                 <audio id="audio12" autoPlay />
                 <label style={{ display: 'none' }} id="feedId12" type="text" />
@@ -3636,7 +3857,7 @@ class Video extends Component {
              <div key='invitation'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
             {
-              this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}>邮件发送会议邀请</Button>
+              this.state.employeeName &&<Button className='modelButtonOkInvitation'type="primary" danger onClick={this.handleOkInvitation}>邮件发送会议邀请</Button>
             }
             {
               !this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger >邮件发送会议邀请</Button>
@@ -3697,8 +3918,14 @@ class Video extends Component {
               {camera}
               <div>麦克风设备：</div>
               {microphone}
-              <div>扬声器设备：</div>
+              {
+                this.state.speakerList.length > 0 &&
+                 <span>
+                   <div>扬声器设备：</div>
               {speaker}
+                 </span>
+              }
+              
             </div>
           </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>