react_hsbc_teller 0.8.0 → 0.8.4

package/packages/pages/video/video.jsx

@@ -3,7 +3,7 @@
 /* eslint-disable eqeqeq */
 import React, { Component, useState } from 'react';
 import API from '../../api/api';
-import { initWebSocket, joinRoom } from '../../common/websocket';
+import { initWebSocket, joinRoom, disconnect } from '../../common/websocket';
 import './video.less'
 import Header from '../header/header.jsx'
 import Foot from '../foot/foot.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,6 +41,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    isJoinRoom: false,
     sessionType: false,
     isWhiteboard: false,
     isSelect: '',
@@ -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, '连接服务器失败','SYS-02')
+      } 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, '连接服务器失败','SYS-02')
+      } 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, '连接服务器失败','SYS-02')
+      }
       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, '连接服务器失败','SYS-02')
+      }
     }
   };
   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
       })
     }
     
@@ -545,11 +582,7 @@ class Video extends Component {
     }
   };
   endSessionValue = () => {
-    if(this.state.sessionType) {
-      this.test_controller.LeaveRoom()
-    } else {
       this.finishSession()
-    }
     
   };
   // 画中画
@@ -575,49 +608,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 +665,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)
@@ -672,7 +718,7 @@ class Video extends Component {
     canvas.height = height;
 
     interval = setInterval(() => {
-      // cobj.clearRect(0, 0, width, height);
+      cobj.clearRect(0, 0, width, height);
       for (let i = 0; i < list.length; i++) {
 
         let videoId = list[i].name;
@@ -686,8 +732,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,8 +884,29 @@ class Video extends Component {
     });
   }
   roomCallBack = (type, manege,code) => {
+    this.setState({
+      loading: false,
+    })
     if (this.state.sessionId) {
-      this.props.joinRoomCallback({
+      if(code == 'SYS-01' || code == 'SYS-02') {
+        this.props.joinRoomCallback({
+          type: type,
+          errorManage: manege,
+          errorCode: code,
+          data: {}
+        })
+      } else {
+        this.props.joinRoomCallback({
+          type: type,
+          errorManage: manege,
+          errorCode: 'Join-0' + code,
+          data: {}
+        })
+      }
+      
+    } else {
+      if(code == 'SYS-01' || code == 'SYS-02') {
+      this.props.createRoomCallback({
         type: type,
         errorManage: manege,
         errorCode: code,
@@ -844,10 +916,11 @@ class Video extends Component {
       this.props.createRoomCallback({
         type: type,
         errorManage: manege,
-        errorCode: code,
+        errorCode: 'Create-0' + code,
         data: {}
       })
     }
+    }
   }
   tabTitlesClick = (value, type) => {
     const { tabTitles } = this.state;
@@ -894,6 +967,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) {
@@ -1105,7 +1330,7 @@ class Video extends Component {
         this.setState({
           sessionType: false
         })
-        this.roomCallBack(2, 'im建立连接失败',-7)
+        this.roomCallBack(2, 'im建立连接失败',7)
       } else {
         this.setState({
           imStatus: msg
@@ -1209,9 +1434,9 @@ class Video extends Component {
       this.setState({
         cameraList: objList,
         microphoneList: objList1,
-        speakerList: [objList2.length>0? 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,
@@ -1231,7 +1456,7 @@ class Video extends Component {
         sessionType: false
       })
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头','error')
-      this.roomCallBack(2, '获取设备失败',-1)
+      this.roomCallBack(2, '获取设备失败',1)
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -1243,7 +1468,7 @@ class Video extends Component {
       this.setState({
         sessionType: false
       })
-      this.roomCallBack(2, '连接失败',-2)
+      this.roomCallBack(2, '连接失败',2)
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -1260,7 +1485,7 @@ class Video extends Component {
       this.setState({
         sessionType: false
       })
-      this.roomCallBack(2, '初始化失败',-3)
+      this.roomCallBack(2, '初始化失败',3)
     };
     // 初始化成功回调
     this.test_controller.OnInitRoomConfigOK = () => {
@@ -1289,7 +1514,7 @@ class Video extends Component {
       this.setState({
         sessionType: false
       })
-      this.roomCallBack(2, '创建房间失败',-4)
+      this.roomCallBack(2, '创建房间失败',4)
     };
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
@@ -1311,10 +1536,18 @@ class Video extends Component {
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
+      // this.setState({
+      //   sessionType: false,
+      //   isJoinRoom: true
+      // })
+      // this.roomCallBack(2, '加入失败',-5)
       this.setState({
-        sessionType: false
-      })
-      this.roomCallBack(2, '加入失败',-5)
+        channelId: '',
+        rtoken: '',
+        sessionId: '',
+        imRoomId: ''
+      });
+      this.addToScript()
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
@@ -1361,7 +1594,7 @@ class Video extends Component {
       this.setState({
         sessionType: false
       })
-      this.roomCallBack(2, '发布失败',-6)
+      this.roomCallBack(2, '发布失败',6)
     };
     // 订阅媒体流成功
     this.test_controller.OnSubscribeSucc = (feed, sid) => {
@@ -1785,12 +2018,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()
         }
+
       }
     };
     // 取消订阅媒体流成功
@@ -1906,7 +2141,7 @@ class Video extends Component {
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
       console.log('退出房间回调', leaveType);
-      this.finishSession()
+      
     };
     // 推送“退出房间者”给与会者
     this.test_controller.OnParticipantLeaveRoom = (
@@ -2227,6 +2462,9 @@ class Video extends Component {
 
     } catch (err) {
       console.error(err);
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
     }
   };
   finishSession = async () => {
@@ -2239,6 +2477,9 @@ class Video extends Component {
           tellerId: this.props.tellerAccount
         });
       } catch (err) {
+        if(err.status == 502 || err.status== 404) {
+          this.roomCallBack(2, '连接服务器失败','SYS-02')
+        }
       }
     }
     this.setState({
@@ -2247,12 +2488,18 @@ class Video extends Component {
       isPictureInPicture: false,
       imStatus: false,
       imJoinRoom: false,
-      sessionType: true
+      sessionType: false
     });
     this.props.onLeaveRoom({
       code: LEAVE_TYPE.TELLER_EXIT,
       errMsg: '坐席退出'
     })
+    if(this.state.sessionType) {
+      this.test_controller.LeaveRoom()
+      this.test_controller.Disconnect()
+      disconnect();
+    }
+    
 
   }
   getRoomStatus = async data => {
@@ -2301,13 +2548,15 @@ class Video extends Component {
     this.setState({
       loading: true,
     })
+    const that = this
     axios.get(this.props.resourcePath + "/beauty/beauty.js")
     .then(response => this.addToScriptClick()).catch(function (error) {
       console.log(error);
-      this.setState({
-        sessionType: false
+      that.setState({
+        sessionType: false,
+        loading: false
       })
-      this.roomCallBack(2, '创建房间失败',-4)
+      that.roomCallBack(2, '加载资源失败','SYS-01')
       
       
   })
@@ -2357,9 +2606,6 @@ class Video extends Component {
             script.onload = () => {
               that.test_controller = new McuController();
               that.mountClick()
-              that.setState({
-                loading: false,
-              })
             }
           }
         } else {
@@ -2729,7 +2975,9 @@ class Video extends Component {
         this.messageClick('发送失败','error')
       }
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
     }
   }
   handleCancelInvitation = () => {
@@ -2831,7 +3079,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')
       }
@@ -2889,7 +3137,9 @@ class Video extends Component {
       }
       this.pictureInPicture('Refresh')
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
     }
   }
   linkClick=()=>{
@@ -2944,7 +3194,9 @@ class Video extends Component {
         this.messageClick('签字失败','error')
       }
     } catch (err) {
-
+      if(err.status == 502 || err.status== 404) {
+        this.roomCallBack(2, '连接服务器失败','SYS-02')
+      }
     }
   }
   handleOkSign = () => {
@@ -3133,7 +3385,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">
@@ -3243,7 +3495,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" />
@@ -3271,7 +3523,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" />
@@ -3297,7 +3549,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" />
@@ -3322,7 +3574,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" />
@@ -3348,7 +3600,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" />
@@ -3373,7 +3625,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" />
@@ -3410,7 +3662,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" />
@@ -3438,7 +3690,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" />
@@ -3463,7 +3715,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" />
@@ -3490,7 +3742,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" />
@@ -3515,7 +3767,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" />
@@ -3541,7 +3793,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" />
@@ -3632,7 +3884,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>
@@ -3693,8 +3945,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>