react_hsbc_teller 0.4.5 → 0.4.9

package/packages/pages/video/video.jsx

@@ -11,6 +11,7 @@ import voiceImgOpen from '../../assets/img/icon_Mute.png'
 import voiceImgCloe from '../../assets/img/icon_MuteOne.png'
 import cameraImgOpen from '../../assets/img/icon_camera.png'
 import cameraImgCloe from '../../assets/img/icon_cameraOne.png'
+import Background from '../../assets/img/placeholder_bg.png'
 import { callNimIM } from '../../utils/cell.js'
 import Modal from "antd/lib/modal";
 import 'antd/lib/modal/style'
@@ -77,7 +78,7 @@ class Video extends Component {
     videoFiveName: '',
     videoSixName: '',
     videoSevenName: '',
-    videoEightName:'',
+    videoEightName: '',
     videoTenName: '',
     videoNineName: '',
     videoTwelveName: '',
@@ -96,16 +97,21 @@ class Video extends Component {
     voiceVideoNine: false,
     voiceVideoTen: false,
     voiceVideoEleven: false,
-    voiceVideoTwelve: false
+    voiceVideoTwelve: false,
+    cameraList: [],
+    microphoneList: [],
+    isModalVisibleInspection: false,
+    cameraValue: '',
+    microphoneValue: ''
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
-  
-componentDidMount() {
-  window.onbeforeunload = () =>{
-    this.finishSession()
-  }
-};
+
+  componentDidMount() {
+    window.onbeforeunload = () => {
+      this.finishSession()
+    }
+  };
 
   /**
    * 创建房间成功后回调后台
@@ -167,7 +173,7 @@ componentDidMount() {
       }
     } catch (err) {
       console.error(err);
-      this.roomCallBack(2,'签名失败')
+      this.roomCallBack(2, '签名失败')
     }
   };
   handleEdit = () => {
@@ -453,12 +459,12 @@ componentDidMount() {
         name: this.state.videoTwelveName
       })
     }
-    if(list.length > 0) {
-      if(val == 'ocr') {
+    if (list.length > 0) {
+      if (val == 'ocr') {
         this.setState({
           clickedOcr: true
         })
-      } else if(val == 'facial'){
+      } else if (val == 'facial') {
         this.setState({
           clickedFacial: true
         })
@@ -473,21 +479,21 @@ componentDidMount() {
   // 人脸识别
   facialRecognition = () => {
     if (this.isFileSuccuse()) {
-    this.setState({
-      faceCustomerType: 1,
-      titleModal: '人脸识别'
-    })
-    this.selectCustomer('facial')
-  }
+      this.setState({
+        faceCustomerType: 1,
+        titleModal: '人脸识别'
+      })
+      this.selectCustomer('facial')
+    }
   };
   ocrClick = () => {
     if (this.isFileSuccuse()) {
-    this.setState({
-      faceCustomerType: 2,
-      titleModal: 'OCR识别'
-    })
-    this.selectCustomer('ocr')
-  }
+      this.setState({
+        faceCustomerType: 2,
+        titleModal: 'OCR识别'
+      })
+      this.selectCustomer('ocr')
+    }
   };
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
@@ -496,211 +502,211 @@ componentDidMount() {
   pictureInPicture = () => {
     let interval
     if (this.isFileSuccuse()) {
-      if(this.state.isPictureInPicture){
+      if (this.state.isPictureInPicture) {
         document.exitPictureInPicture()
       } else {
         const list = []
-      if(document.getElementById('video1').name) {
-        list.push({
-          name: 'video1',
-          title: this.state.videoOneName
-        })
-      }
-      if(document.getElementById('publish_video1').name) {
-        list.push({
-          name: 'publish_video1',
-          title: '坐席'
-        })
-      }
-      if(document.getElementById('video2').name) {
-        list.push({
-          name: 'video2',
-          title: this.state.videoTwoName
-        })
-      }
-      if(document.getElementById('video3').name) {
-        list.push({
-          name: 'video3',
-          title: this.state.videoThreeName
-        })
-      }
-      if(document.getElementById('video4').name) {
-        list.push({
-          name: 'video4',
-          title: this.state.videoFourName
-        })
-      }
-      if(document.getElementById('video5').name) {
-        list.push({
-          name: 'video5',
-          title: this.state.videoFiveName
-        })
-      }
-      if(document.getElementById('video6').name) {
-        list.push({
-          name: 'video6',
-          title: this.state.videoSixName
-        })
-      }
+        if (document.getElementById('video1').name) {
+          list.push({
+            name: 'video1',
+            title: this.state.videoOneName
+          })
+        }
+        if (document.getElementById('publish_video1').name) {
+          list.push({
+            name: 'publish_video1',
+            title: '坐席'
+          })
+        }
+        if (document.getElementById('video2').name) {
+          list.push({
+            name: 'video2',
+            title: this.state.videoTwoName
+          })
+        }
+        if (document.getElementById('video3').name) {
+          list.push({
+            name: 'video3',
+            title: this.state.videoThreeName
+          })
+        }
+        if (document.getElementById('video4').name) {
+          list.push({
+            name: 'video4',
+            title: this.state.videoFourName
+          })
+        }
+        if (document.getElementById('video5').name) {
+          list.push({
+            name: 'video5',
+            title: this.state.videoFiveName
+          })
+        }
+        if (document.getElementById('video6').name) {
+          list.push({
+            name: 'video6',
+            title: this.state.videoSixName
+          })
+        }
 
-      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;
-      const canvas = document.createElement('canvas');
-      const cobj = canvas.getContext('2d'); // 获取绘图环境
-      canvas.width = width;
-      canvas.height = height;
-      
-      interval = setInterval(() => {
-        cobj.clearRect(0, 0, width, height);
-        for(let i=0;i<list.length;i++){
-        
-        let videoId = list[i].name;
-        let videoDiv = document.getElementById(videoId);
-        let videoWidth = videoDiv.videoWidth;
-        let videoHeight = videoDiv.videoHeight;
-        let newVideoWidth = 640;
-        let newVideoHeight = 360;
-        if (videoHeight * 640 / videoWidth > 360) {
-          newVideoWidth = videoWidth * 360 / videoHeight;
-        } else {
-          newVideoHeight = videoHeight * 640 / videoWidth;
+        if (document.getElementById('video7').name) {
+          list.push({
+            name: 'video7',
+            title: this.state.videoSevenName
+          })
         }
-        
-        cobj.drawImage(videoDiv, (640 - newVideoWidth)/2, 360 * i, newVideoWidth, newVideoHeight);
-        cobj.beginPath();
-        cobj.strokeStyle = this.props.titleColor;
-        cobj.fillStyle = this.props.titleBackground;
-        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60 )
-        cobj.fill();
-        cobj.stroke();
-        cobj.beginPath();
-        cobj.font = "28px auto";
-        cobj.textAlign = 'center';
-        cobj.lineWidth = 1;
-        cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
-        cobj.stroke();
-               //左边框
-               cobj.beginPath();
-               cobj.moveTo( 0, 0);
-               cobj.lineTo( 0, 360 * list.length);
-               cobj.closePath(); //闭合路径
-               cobj.lineWidth = 5; //线的边框为10像素
-               cobj.strokeStyle = '#d9363e';
-               cobj.stroke(); //绘制定义的图形
-       
-               //下边框
-               cobj.beginPath();
-               cobj.moveTo( 0, 0);
-               cobj.lineTo( 640, 0);
-               cobj.closePath(); //闭合路径
-               cobj.lineWidth = 5; //线的边框为10像素
-               cobj.strokeStyle = '#d9363e';
-               cobj.stroke(); //绘制定义的图形
-       
-               //右边框
-               cobj.beginPath();
-               cobj.moveTo( 640, 360 * list.length);
-               cobj.lineTo( 640, 0);
-               cobj.closePath(); //闭合路径
-               cobj.lineWidth = 5; //线的边框为10像素
-               cobj.strokeStyle = '#d9363e';
-               cobj.stroke(); //绘制定义的图形
-       
-       
-               //上边框
-               cobj.beginPath();
-               cobj.moveTo( 0, 360 * list.length);
-               cobj.lineTo( 640, 360 * list.length);
-               cobj.closePath(); //闭合路径
-               cobj.lineWidth = 5; //线的边框为10像素
-               cobj.strokeStyle = '#d9363e';
-               cobj.stroke(); //绘制定义的图形
-        
-        // let sid = document.getElementById(list[i].name).name
-        // let stream = this.test_controller.GetMediaInfo(sid).audio_
-        // let acc = new AudioContext()
-        // let mic = acc.createMediaStreamSource(stream)
-        // let analyser = acc.createAnalyser()
-        // analyser.fftSize = 256
-        // mic.connect(analyser)
-        // aou(analyser)
-        // let microphoneSize = this.props.microphoneSize
-        // var img = document.getElementById("icon_huatong");
-        // cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
-        // function aou(analyser){
-        //   let dataArray = new Uint8Array(analyser.frequencyBinCount);
-        //   analyser.getByteFrequencyData(dataArray);
-        // let step = Math.round(dataArray.length / 60); //采样步长
-        // // 以画布左上角为坐标原点
-        // let drawArea = {
-        //   x1: 28/50 * microphoneSize + 600, // 波动范围右下角的点坐标
-        //   y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
-        //   x2: 22/50 * microphoneSize + 600,  // 波动范围左上角的点坐标
-        //   y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
-        // }
-      
-        // for (var j = 0; j < 40; j++) {
-        //   let energy = (dataArray[step * j] / 256.0) * 80;
-        //   cobj.beginPath();
-        //   cobj.fillStyle = "#0AE544";
-        //   const { x1,y1,x2,y2} = drawArea
-        //   let width = x1-x2;
-        //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
-        //   let startX =  x2 // 绘制起始点x
-        //   let startY =  y1 - height  // 绘制起始点y
-        //   cobj.fillRect(startX, startY, width, height )
-        // }
-        // requestAnimationFrame(aou.bind(this, analyser));
-      
-        // }
+        if (document.getElementById('video8').name) {
+          list.push({
+            name: 'video8',
+            title: this.state.videoEightName
+          })
         }
-      }, 100);
-      const captureStream = canvas.captureStream();
-      const mix_stream = new MediaStream(captureStream);
-      pictureInPictureVideo = document.getElementById('mixedvideo');
-      pictureInPictureVideo.srcObject = mix_stream;
-      pictureInPictureVideo.onloadedmetadata = () => {
-        pictureInPictureVideo.requestPictureInPicture();
-      };
+        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;
+        const canvas = document.createElement('canvas');
+        const cobj = canvas.getContext('2d'); // 获取绘图环境
+        canvas.width = width;
+        canvas.height = height;
+
+        interval = setInterval(() => {
+          cobj.clearRect(0, 0, width, height);
+          for (let i = 0; i < list.length; i++) {
+
+            let videoId = list[i].name;
+            let videoDiv = document.getElementById(videoId);
+            let videoWidth = videoDiv.videoWidth;
+            let videoHeight = videoDiv.videoHeight;
+            let newVideoWidth = 640;
+            let newVideoHeight = 360;
+            if (videoHeight * 640 / videoWidth > 360) {
+              newVideoWidth = videoWidth * 360 / videoHeight;
+            } else {
+              newVideoHeight = videoHeight * 640 / videoWidth;
+            }
+
+            cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight);
+            cobj.beginPath();
+            cobj.strokeStyle = this.props.titleColor;
+            cobj.fillStyle = this.props.titleBackground;
+            cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60)
+            cobj.fill();
+            cobj.stroke();
+            cobj.beginPath();
+            cobj.font = "28px auto";
+            cobj.textAlign = 'center';
+            cobj.lineWidth = 1;
+            cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
+            cobj.stroke();
+            //左边框
+            cobj.beginPath();
+            cobj.moveTo(0, 0);
+            cobj.lineTo(0, 360 * list.length);
+            cobj.closePath(); //闭合路径
+            cobj.lineWidth = 5; //线的边框为10像素
+            cobj.strokeStyle = '#d9363e';
+            cobj.stroke(); //绘制定义的图形
+
+            //下边框
+            cobj.beginPath();
+            cobj.moveTo(0, 0);
+            cobj.lineTo(640, 0);
+            cobj.closePath(); //闭合路径
+            cobj.lineWidth = 5; //线的边框为10像素
+            cobj.strokeStyle = '#d9363e';
+            cobj.stroke(); //绘制定义的图形
+
+            //右边框
+            cobj.beginPath();
+            cobj.moveTo(640, 360 * list.length);
+            cobj.lineTo(640, 0);
+            cobj.closePath(); //闭合路径
+            cobj.lineWidth = 5; //线的边框为10像素
+            cobj.strokeStyle = '#d9363e';
+            cobj.stroke(); //绘制定义的图形
+
+
+            //上边框
+            cobj.beginPath();
+            cobj.moveTo(0, 360 * list.length);
+            cobj.lineTo(640, 360 * list.length);
+            cobj.closePath(); //闭合路径
+            cobj.lineWidth = 5; //线的边框为10像素
+            cobj.strokeStyle = '#d9363e';
+            cobj.stroke(); //绘制定义的图形
+
+            // let sid = document.getElementById(list[i].name).name
+            // let stream = this.test_controller.GetMediaInfo(sid).audio_
+            // let acc = new AudioContext()
+            // let mic = acc.createMediaStreamSource(stream)
+            // let analyser = acc.createAnalyser()
+            // analyser.fftSize = 256
+            // mic.connect(analyser)
+            // aou(analyser)
+            // let microphoneSize = this.props.microphoneSize
+            // var img = document.getElementById("icon_huatong");
+            // cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+            // function aou(analyser){
+            //   let dataArray = new Uint8Array(analyser.frequencyBinCount);
+            //   analyser.getByteFrequencyData(dataArray);
+            // let step = Math.round(dataArray.length / 60); //采样步长
+            // // 以画布左上角为坐标原点
+            // let drawArea = {
+            //   x1: 28/50 * microphoneSize + 600, // 波动范围右下角的点坐标
+            //   y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
+            //   x2: 22/50 * microphoneSize + 600,  // 波动范围左上角的点坐标
+            //   y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
+            // }
+
+            // for (var j = 0; j < 40; j++) {
+            //   let energy = (dataArray[step * j] / 256.0) * 80;
+            //   cobj.beginPath();
+            //   cobj.fillStyle = "#0AE544";
+            //   const { x1,y1,x2,y2} = drawArea
+            //   let width = x1-x2;
+            //   let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+            //   let startX =  x2 // 绘制起始点x
+            //   let startY =  y1 - height  // 绘制起始点y
+            //   cobj.fillRect(startX, startY, width, height )
+            // }
+            // requestAnimationFrame(aou.bind(this, analyser));
+
+            // }
+          }
+        }, 100);
+        const captureStream = canvas.captureStream();
+        const mix_stream = new MediaStream(captureStream);
+        pictureInPictureVideo = document.getElementById('mixedvideo');
+        pictureInPictureVideo.srcObject = mix_stream;
+        pictureInPictureVideo.onloadedmetadata = () => {
+          pictureInPictureVideo.requestPictureInPicture();
+        };
       }
-      
+
 
       pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
         //可获取画中画窗口的一些数据，如宽高等
@@ -721,14 +727,14 @@ componentDidMount() {
       });
     }
   };
-  roomCallBack=(type,manege) =>{
+  roomCallBack = (type, manege) => {
     if (this.state.sessionId) {
       this.props.joinRoomCallback({
         type: type,
         errorManage: manege,
         data: {}
       })
-    }else {
+    } else {
       this.props.createRoomCallback({
         type: type,
         errorManage: manege,
@@ -736,13 +742,13 @@ componentDidMount() {
       })
     }
   }
-  tabTitlesClick = (value,type) =>{
+  tabTitlesClick = (value, type) => {
     const { tabTitles } = this.state;
-    if(type == 'add') {
+    if (type == 'add') {
       tabTitles.unshift(value)
-    }else {
-      this.state.tabTitles.map((item,index)=>{
-        if(item.value == value) {
+    } else {
+      this.state.tabTitles.map((item, index) => {
+        if (item.value == value) {
           tabTitles.splice(index, 1)
           this.setState({
             tabTitles
@@ -750,7 +756,7 @@ componentDidMount() {
         }
       })
     }
-    if(this.state.tabTitles.length >0) {
+    if (this.state.tabTitles.length > 0) {
       this.setState({
         isSelect: this.state.tabTitles[0].value
       })
@@ -792,194 +798,194 @@ componentDidMount() {
       } else if (Mival.typeId == 1218) {
         if (Mival.sessionId == this.state.sessionId) {
           // 1-开启，2-关闭
-          if(Mival.type == 1) {
+          if (Mival.type == 1) {
             this.switchExternal()
-          } else if(Mival.type == 2) {
-            this.tabTitlesClick('RMWhiteboard','delect')
-            if(this.state.isSharedScreen) {
+          } else if (Mival.type == 2) {
+            this.tabTitlesClick('RMWhiteboard', 'delect')
+            if (this.state.isSharedScreen) {
               this.setState({
                 isWhiteboard: false,
               })
-            }else {
+            } else {
               this.test_controller.UnPublish(document.getElementById('video20').name)
               this.setState({
                 isWhiteboard: false,
               })
             }
           }
-          
+
         }
-        
+
       } else if (Mival.typeId == 3100) {
-        if(Mival.data.sessionId == this.state.sessionId) {
-          if(Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
-            if(Mival.muteStatus == 0) {
+        if (Mival.data.sessionId == this.state.sessionId) {
+          if (Mival.data.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoOne: false
               })
-            } else if(Mival.muteStatus == 1) {
+            } else if (Mival.muteStatus == 1) {
               this.setState({
                 voiceVideoOne: true
               })
             }
-            
+
           }
-          if(Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
-            if(Mival.muteStatus == 0) {
+          if (Mival.data.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+            if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoTwo: false
               })
-            } else if(Mival.muteStatus == 1) {
+            } else if (Mival.muteStatus == 1) {
               this.setState({
                 voiceVideoTwo: true
               })
             }
-            
+
           }
-          if(Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
-            if(Mival.muteStatus == 0) {
+          if (Mival.data.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoThree: false
               })
-            } else if(Mival.muteStatus == 1) {
+            } else if (Mival.muteStatus == 1) {
               this.setState({
                 voiceVideoThree: true
               })
             }
-            
+
           }
-          if(Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
-            if(Mival.muteStatus == 0) {
+          if (Mival.data.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+            if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoFour: false
               })
-            } else if(Mival.muteStatus == 1) {
+            } else if (Mival.muteStatus == 1) {
               this.setState({
                 voiceVideoFour: true
               })
             }
-            
+
           }
-          if(Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
-            if(Mival.muteStatus == 0) {
+          if (Mival.data.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            if (Mival.muteStatus == 0) {
               this.setState({
                 voiceVideoFive: false
               })
-            } else if(Mival.muteStatus == 1) {
+            } else if (Mival.muteStatus == 1) {
               this.setState({
                 voiceVideoFive: true
               })
             }
-            
+
           }
-          if(Mival.data.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
-            if(Mival.muteStatus == 0) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } 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) {
+          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) {
+            } else if (Mival.muteStatus == 1) {
               this.setState({
                 voiceVideoTwelve: true
               })
             }
-            
+
           }
         }
       }
@@ -990,7 +996,7 @@ componentDidMount() {
       type: '2',
       sigType: 1
     };
-    
+
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -1043,13 +1049,28 @@ componentDidMount() {
           obj2.push(b)
         }
       }
-      this.mpaasSig(data);
+      this.setState({
+        cameraList: obj,
+        microphoneList: obj1,
+      })
+      if (!this.state.appId) {
+        this.mpaasSig(data);
+        this.setState({
+          cameraValue: obj[0].actionid,
+          microphoneValue: obj1[0].actionid
+        })
+      } else {
+        this.setState({
+          isModalVisibleInspection: true
+        })
+      }
+
     };
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
       message.success('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头')
-      this.roomCallBack(2,'获取失败失败')
+      this.roomCallBack(2, '获取失败失败')
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -1058,7 +1079,7 @@ componentDidMount() {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
-      this.roomCallBack(2,'连接失败')
+      this.roomCallBack(2, '连接失败')
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -1072,14 +1093,14 @@ componentDidMount() {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
-      this.roomCallBack(2,'初始化失败')
+      this.roomCallBack(2, '初始化失败')
     };
     // 初始化成功回调
     this.test_controller.OnInitRoomConfigOK = () => {
       console.log('初始化房间成功');
       // 视频通话的初始化
       if (this.state.sessionId) {
-        this.test_controller.JoinRoom(this.state.channelId, this.state.rtoken,0)
+        this.test_controller.JoinRoom(this.state.channelId, this.state.rtoken)
       } else {
         this.test_controller.CreateRoom()
       }
@@ -1098,7 +1119,7 @@ componentDidMount() {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
-      this.roomCallBack(2,'创建失败')
+      this.roomCallBack(2, '创建失败')
     };
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
@@ -1115,26 +1136,26 @@ componentDidMount() {
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
-      this.roomCallBack(1,'')
+      this.roomCallBack(1, '')
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
-      this.roomCallBack(2,'加入失败')
+      this.roomCallBack(2, '加入失败')
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
-      if(sid == document.getElementById('video20').name) {
-          callNimIM('sendCustomCmdMsg', {
-            customId: this.state.imRoomId,
-            content: JSON.stringify({
-              'typeId': 2030,
-              'sessionId': this.state.sessionId,
-              'sharedScreen': 1,
-              'tellerId': this.props.tellerAccount
-            })
-          });
+      if (sid == document.getElementById('video20').name) {
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 2030,
+            'sessionId': this.state.sessionId,
+            'sharedScreen': 1,
+            'tellerId': this.props.tellerAccount
+          })
+        });
       }
     };
     // 发布媒体流失败
@@ -1157,22 +1178,22 @@ componentDidMount() {
     // 推送“房间与会者列表”给新加⼊者
     this.test_controller.OnRoomAttendanceList = (participants) => {
       console.log('房间与会者列表', participants)
-      participants.map((item,index)=>{
-        if(item.uid != this.state.tellerAccount) {
-          item.publish.map((itemOne,indexOne)=>{
+      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') {
+            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',
@@ -1180,15 +1201,15 @@ componentDidMount() {
                 feedId_id: 'feedId21',
                 feedId: itemOne.feedId
               }
-              
+
               this.tabTitlesClick(
                 {
                   value: 'customerScreen',
                   name: '客户投屏'
-                },'add'
+                }, 'add'
               )
-            }else {
-              if(!document.getElementById('video1').name) {
+            } else {
+              if (!document.getElementById('video1').name) {
                 config_param = {
                   subscribe_video_id: 'video1',
                   subscribe_audio_id: 'audio1',
@@ -1197,7 +1218,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video2').name) {
+              else if (!document.getElementById('video2').name) {
                 config_param = {
                   subscribe_video_id: 'video2',
                   subscribe_audio_id: 'audio2',
@@ -1206,7 +1227,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video3').name) {
+              else if (!document.getElementById('video3').name) {
                 config_param = {
                   subscribe_video_id: 'video3',
                   subscribe_audio_id: 'audio3',
@@ -1215,7 +1236,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video4').name) {
+              else if (!document.getElementById('video4').name) {
                 config_param = {
                   subscribe_video_id: 'video4',
                   subscribe_audio_id: 'audio4',
@@ -1224,7 +1245,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video5').name) {
+              else if (!document.getElementById('video5').name) {
                 config_param = {
                   subscribe_video_id: 'video5',
                   subscribe_audio_id: 'audio5',
@@ -1233,7 +1254,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video6').name) {
+              else if (!document.getElementById('video6').name) {
                 config_param = {
                   subscribe_video_id: 'video6',
                   subscribe_audio_id: 'audio6',
@@ -1243,7 +1264,7 @@ componentDidMount() {
                 }
               }
 
-              else if(!document.getElementById('video7').name) {
+              else if (!document.getElementById('video7').name) {
                 config_param = {
                   subscribe_video_id: 'video7',
                   subscribe_audio_id: 'audio7',
@@ -1252,7 +1273,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video8').name) {
+              else if (!document.getElementById('video8').name) {
                 config_param = {
                   subscribe_video_id: 'video8',
                   subscribe_audio_id: 'audio8',
@@ -1261,7 +1282,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video9').name) {
+              else if (!document.getElementById('video9').name) {
                 config_param = {
                   subscribe_video_id: 'video9',
                   subscribe_audio_id: 'audio9',
@@ -1270,7 +1291,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video10').name) {
+              else if (!document.getElementById('video10').name) {
                 config_param = {
                   subscribe_video_id: 'video10',
                   subscribe_audio_id: 'audio10',
@@ -1279,7 +1300,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video11').name) {
+              else if (!document.getElementById('video11').name) {
                 config_param = {
                   subscribe_video_id: 'video11',
                   subscribe_audio_id: 'audio11',
@@ -1288,7 +1309,7 @@ componentDidMount() {
                   feedId: itemOne.feedId
                 }
               }
-              else if(!document.getElementById('video12').name) {
+              else if (!document.getElementById('video12').name) {
                 config_param = {
                   subscribe_video_id: 'video12',
                   subscribe_audio_id: 'audio12',
@@ -1325,12 +1346,12 @@ componentDidMount() {
         content: JSON.stringify({
           'typeId': 1014,
           'sessionId': this.state.sessionId,
-           'meetingInfo': {
+          'meetingInfo': {
             'title': this.props.meetingInfo.title,
             'host': this.props.meetingInfo.host,
             'customers': this.props.meetingInfo.customers
           }
-          
+
         })
       }, function (code, message, data) {
       })
@@ -1346,8 +1367,8 @@ componentDidMount() {
         roomCustomerList: newArray
       })
       let config_param
-      if(feed.uid != this.state.tellerAccount) {
-        if(feed.tag == 'VIDEO_SOURCE_SCREEN') {
+      if (feed.uid != this.state.tellerAccount) {
+        if (feed.tag == 'VIDEO_SOURCE_SCREEN') {
           config_param = {
             subscribe_video_id: 'video21',
             subscribe_audio_id: 'audio21',
@@ -1355,42 +1376,42 @@ componentDidMount() {
             feedId_id: 'feedId21',
             feedId: feed.feedId
           }
-          
+
           this.tabTitlesClick(
             {
               value: 'customerScreen',
               name: '客户投屏'
-            },'add'
+            }, 'add'
           )
           if (config_param !== undefined) {
             config_param.need_volume_analyser = false
             console.log(config_param)
-            setTimeout(()=>{
-     
+            setTimeout(() => {
+
               this.test_controller.Subscribe(config_param)
             }, 1000)
-            
+
           }
         } else {
-      //     let data_param = {
-      //       isVideo: true,
-      //       videoIndex: this.state.videoList.length + 1,
-      //       videoTwoName: ''
-      //     }
-      //     let videoList = this.state.videoList;
-      // let newvideoList = [...videoList];
-      // newvideoList.push(data_param);
-      //     this.setState({
-      //       videoList: newvideoList
-      //     },()=>{
-            // config_param = {
-            //   subscribe_video_id: 'video' + this.state.videoList.length,
-            //   subscribe_audio_id: 'audio' + this.state.videoList.length,
-            //   subscribe_streamId_id: 'subscribe_streamId' + this.state.videoList.length,
-            //   feedId_id: 'feedId' + this.state.videoList.length,
-            //   feedId: feed.feedId
-            // }
-            if(!document.getElementById('video1').name) {
+          //     let data_param = {
+          //       isVideo: true,
+          //       videoIndex: this.state.videoList.length + 1,
+          //       videoTwoName: ''
+          //     }
+          //     let videoList = this.state.videoList;
+          // let newvideoList = [...videoList];
+          // newvideoList.push(data_param);
+          //     this.setState({
+          //       videoList: newvideoList
+          //     },()=>{
+          // config_param = {
+          //   subscribe_video_id: 'video' + this.state.videoList.length,
+          //   subscribe_audio_id: 'audio' + this.state.videoList.length,
+          //   subscribe_streamId_id: 'subscribe_streamId' + this.state.videoList.length,
+          //   feedId_id: 'feedId' + this.state.videoList.length,
+          //   feedId: feed.feedId
+          // }
+          if (!document.getElementById('video1').name) {
             config_param = {
               subscribe_video_id: 'video1',
               subscribe_audio_id: 'audio1',
@@ -1399,7 +1420,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video2').name) {
+          else if (!document.getElementById('video2').name) {
             config_param = {
               subscribe_video_id: 'video2',
               subscribe_audio_id: 'audio2',
@@ -1408,7 +1429,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video3').name) {
+          else if (!document.getElementById('video3').name) {
             config_param = {
               subscribe_video_id: 'video3',
               subscribe_audio_id: 'audio3',
@@ -1417,7 +1438,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video4').name) {
+          else if (!document.getElementById('video4').name) {
             config_param = {
               subscribe_video_id: 'video4',
               subscribe_audio_id: 'audio4',
@@ -1426,7 +1447,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video5').name) {
+          else if (!document.getElementById('video5').name) {
             config_param = {
               subscribe_video_id: 'video5',
               subscribe_audio_id: 'audio5',
@@ -1435,7 +1456,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video6').name) {
+          else if (!document.getElementById('video6').name) {
             config_param = {
               subscribe_video_id: 'video6',
               subscribe_audio_id: 'audio6',
@@ -1444,7 +1465,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video7').name) {
+          else if (!document.getElementById('video7').name) {
             config_param = {
               subscribe_video_id: 'video7',
               subscribe_audio_id: 'audio7',
@@ -1453,7 +1474,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video8').name) {
+          else if (!document.getElementById('video8').name) {
             config_param = {
               subscribe_video_id: 'video8',
               subscribe_audio_id: 'audio8',
@@ -1462,7 +1483,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video9').name) {
+          else if (!document.getElementById('video9').name) {
             config_param = {
               subscribe_video_id: 'video9',
               subscribe_audio_id: 'audio9',
@@ -1471,7 +1492,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video10').name) {
+          else if (!document.getElementById('video10').name) {
             config_param = {
               subscribe_video_id: 'video10',
               subscribe_audio_id: 'audio10',
@@ -1480,7 +1501,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video11').name) {
+          else if (!document.getElementById('video11').name) {
             config_param = {
               subscribe_video_id: 'video11',
               subscribe_audio_id: 'audio11',
@@ -1489,7 +1510,7 @@ componentDidMount() {
               feedId: feed.feedId
             }
           }
-          else if(!document.getElementById('video12').name) {
+          else if (!document.getElementById('video12').name) {
             config_param = {
               subscribe_video_id: 'video12',
               subscribe_audio_id: 'audio12',
@@ -1498,20 +1519,20 @@ componentDidMount() {
               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) => {
@@ -1519,8 +1540,8 @@ componentDidMount() {
     };
     // 取消发布成功
     this.test_controller.OnUnPublishSucc = (sid) => {
-      console.log('取消发布成功', sid,document.getElementById('publish_video1').name)
-      if(sid != document.getElementById('publish_video1').name) {
+      console.log('取消发布成功', sid, document.getElementById('publish_video1').name)
+      if (sid != document.getElementById('publish_video1').name) {
         callNimIM('sendCustomCmdMsg', {
           customId: this.state.imRoomId,
           content: JSON.stringify({
@@ -1535,8 +1556,8 @@ componentDidMount() {
           isSharedScreen: false,
           screenName: '投屏'
         });
-        this.tabTitlesClick('RMScreen','delect')
-        if(this.state.isPictureInPicture) {
+        this.tabTitlesClick('RMScreen', 'delect')
+        if (this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
       }
@@ -1545,80 +1566,80 @@ componentDidMount() {
     this.test_controller.OnUnSubscribeSucc = (sid) => {
       console.log('取消订阅媒体流成功', sid)
       this.state.tabTitles.map((item) => {
-        if(item.value == 'customerScreen') {
-          if(!document.getElementById("video21").name) {
-            this.tabTitlesClick('customerScreen','delect')
+        if (item.value == 'customerScreen') {
+          if (!document.getElementById("video21").name) {
+            this.tabTitlesClick('customerScreen', 'delect')
           }
         }
       })
-      if(!document.getElementById("video1").name) {
+      if (!document.getElementById("video1").name) {
         this.setState({
           videoOneName: '',
           voiceVideoOne: false
         })
       }
-      if(!document.getElementById("video2").name) {
+      if (!document.getElementById("video2").name) {
         this.setState({
           videoTwoName: '',
           voiceVideoTwo: false
         })
       }
-      if(!document.getElementById("video3").name) {
+      if (!document.getElementById("video3").name) {
         this.setState({
           videoThreeName: '',
           voiceVideoThree: false
         })
       }
-      if(!document.getElementById("video4").name) {
+      if (!document.getElementById("video4").name) {
         this.setState({
           videoFourName: '',
           voiceVideoFour: false,
         })
       }
-      if(!document.getElementById("video5").name) {
+      if (!document.getElementById("video5").name) {
         this.setState({
           videoFiveName: '',
           voiceVideoFive: false
         })
       }
-      if(!document.getElementById("video6").name) {
+      if (!document.getElementById("video6").name) {
         this.setState({
           videoSixName: '',
           voiceVideoSix: false
         })
       }
 
-      if(!document.getElementById("video7").name) {
+      if (!document.getElementById("video7").name) {
         this.setState({
           videoSevenName: '',
           voiceVideoSeven: false
         })
       }
-      if(!document.getElementById("video8").name) {
+      if (!document.getElementById("video8").name) {
         this.setState({
           videoEightName: '',
           voiceVideoEight: false
         })
       }
-      if(!document.getElementById("video9").name) {
+      if (!document.getElementById("video9").name) {
         this.setState({
           videoNineName: '',
           voiceVideoNine: false
         })
       }
-      if(!document.getElementById("video10").name) {
+      if (!document.getElementById("video10").name) {
         this.setState({
           videoTenName: '',
           voiceVideoTen: false
         })
       }
-      if(!document.getElementById("video11").name) {
+      if (!document.getElementById("video11").name) {
         this.setState({
           videoElevenName: '',
           voiceVideoEleven: false
         })
       }
-      if(!document.getElementById("video12").name) {
+      if (!document.getElementById("video12").name) {
         this.setState({
           videoTwelveName: '',
           voiceVideoTwelve: false
@@ -1628,13 +1649,13 @@ componentDidMount() {
     // 推送“取消发布”给与会者
     this.test_controller.OnUnPublish = (feed) => {
       console.log('取消发布者', feed)
-      for(let i=0;i<this.state.roomCustomerList.length;i++) {
-        if(this.state.roomCustomerList[i].feedId == feed.feedId) {
+      for (let i = 0; i < this.state.roomCustomerList.length; i++) {
+        if (this.state.roomCustomerList[i].feedId == feed.feedId) {
           this.state.roomCustomerList.splice(i, 1)
         }
       }
 
-      if(this.state.roomCustomerList.length == 0) {
+      if (this.state.roomCustomerList.length == 0) {
         // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 3)
         this.setState({
           isCustomer: false
@@ -1818,6 +1839,10 @@ componentDidMount() {
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
+      message.success('切换摄像头或麦克风成功');
+      this.setState({
+        isModalVisibleInspection: false
+      })
     };
     // 切流失败通知
     this.test_controller.OnChangeMediaStreamFailed = (
@@ -1826,6 +1851,7 @@ componentDidMount() {
       msg
     ) => {
       console.log('切流失败通知', sid, code, msg)
+      message.success('切换摄像头或麦克风失败，请先检查设备');
     };
     // 服务端录制初始化成功
     this.test_controller.OnInitRemoteRecordSucc = (
@@ -1905,25 +1931,25 @@ componentDidMount() {
       analyser.getByteFrequencyData(dataArray);
       let step = Math.round(dataArray.length / 60); //采样步长
       var img = document.getElementById("icon_huatong");
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, this.props.microphoneSize, this.props.microphoneSize);
       // 以画布左上角为坐标原点
       let drawArea = {
-        x1: 28/50*canvas.width, // 波动范围右下角的点坐标
-        y1: 25/50*canvas.height, 
-        x2: 22/50*canvas.width,  // 波动范围左上角的点坐标
-        y2: 10/50*canvas.height,
+        x1: 28 / 50 * canvas.width, // 波动范围右下角的点坐标
+        y1: 25 / 50 * canvas.height,
+        x2: 22 / 50 * canvas.width,  // 波动范围左上角的点坐标
+        y2: 10 / 50 * canvas.height,
       }
 
       for (var i = 0; i < 40; i++) {
         let energy = (dataArray[step * i] / 256.0) * 80;
         ctx.beginPath();
         ctx.fillStyle = this.props.voiceColor;
-        const { x1,y1,x2,y2} = drawArea
-        let width = x1-x2;
-        let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
-        let startX =  x2 // 绘制起始点x
-        let startY =  y1 - height  // 绘制起始点y
-        ctx.fillRect(startX, startY, width, height )
+        const { x1, y1, x2, y2 } = drawArea
+        let width = x1 - x2;
+        let height = (energy > 20 ? (energy - 20) : 0) * (y1 - y2) / 70
+        let startX = x2 // 绘制起始点x
+        let startY = y1 - height  // 绘制起始点y
+        ctx.fillRect(startX, startY, width, height)
       }
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
     }
@@ -1958,27 +1984,26 @@ componentDidMount() {
     }
   };
   finishSession = async () => {
-    
-      
-      if(this.state.roomCustomerList.length == 0) {
-        debugger
-        try {
-      let result = await API.finishSession({
-        sessionId: this.state.sessionId,
-        tellerId: this.props.tellerAccount
-      });
-        } catch (err) {
-    }
+
+
+    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,
-        isPictureInPicture: false,
-      });
-      this.props.onLeaveRoom({
-        code: LEAVE_TYPE.TELLER_EXIT,
-        errMsg: '坐席退出'
-      })
+    }
+    this.setState({
+      isCustomer: false,
+      isWhiteboard: false,
+      isPictureInPicture: false,
+    });
+    this.props.onLeaveRoom({
+      code: LEAVE_TYPE.TELLER_EXIT,
+      errMsg: '坐席退出'
+    })
 
   }
   getRoomStatus = async data => {
@@ -2109,7 +2134,7 @@ componentDidMount() {
       }, function (code, message, data) {
         console.log(data)
       })
-      
+
     } else if (this.state.voiceStatue) {
       // 打开本地
       this.setState({
@@ -2217,8 +2242,8 @@ componentDidMount() {
           screenName: '投屏'
         });
         console.log(pictureInPictureVideo)
-        this.tabTitlesClick('RMScreen','delect')
-        if(this.state.isPictureInPicture) {
+        this.tabTitlesClick('RMScreen', 'delect')
+        if (this.state.isPictureInPicture) {
           document.exitPictureInPicture()
         }
       } else {
@@ -2246,14 +2271,14 @@ componentDidMount() {
         })
         this.tabTitlesClick(
           {
-        value: 'RMScreen',
-        name: '坐席投屏'
-      },'add'
+            value: 'RMScreen',
+            name: '坐席投屏'
+          }, 'add'
         )
-        if(!this.state.isPictureInPicture) {
+        if (!this.state.isPictureInPicture) {
           this.pictureInPicture()
         }
-        
+
       }
     }
   };
@@ -2486,37 +2511,37 @@ componentDidMount() {
     // } catch (err) {
 
     // }
-    if(document.getElementById('video1').name == sid){
+    if (document.getElementById('video1').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid
     }
-    if(document.getElementById('video2').name == sid){
+    if (document.getElementById('video2').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid
-    }if(document.getElementById('video3').name == sid){
+    } if (document.getElementById('video3').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid
-    }if(document.getElementById('video4').name == sid){
+    } if (document.getElementById('video4').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid
-    }if(document.getElementById('video5').name == sid){
+    } if (document.getElementById('video5').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid
-    }if(document.getElementById('video6').name == sid){
+    } if (document.getElementById('video6').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid
     }
 
-    if(document.getElementById('video7').name == sid){
+    if (document.getElementById('video7').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid
     }
-    if(document.getElementById('video8').name == sid){
+    if (document.getElementById('video8').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid
     }
-    if(document.getElementById('video9').name == sid){
+    if (document.getElementById('video9').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid
     }
-    if(document.getElementById('video10').name == sid){
+    if (document.getElementById('video10').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid
     }
-    if(document.getElementById('video11').name == sid){
+    if (document.getElementById('video11').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid
     }
-    if(document.getElementById('video12').name == sid){
+    if (document.getElementById('video12').name == sid) {
       userId = this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid
     }
     try {
@@ -2530,56 +2555,56 @@ componentDidMount() {
       } else {
         message.success('查询失败')
       }
-      if(document.getElementById('video1').name == sid){
+      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){
+      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'
+          videoTwoName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户2'
         })
-      }if(document.getElementById('video3').name == sid){
+      } 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'
+          videoThreeName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户3'
         })
-      }if(document.getElementById('video4').name == sid){
+      } 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'
+          videoFourName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户4'
         })
-      }if(document.getElementById('video5').name == sid){
+      } 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'
+          videoFiveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户5'
         })
-      }if(document.getElementById('video6').name == sid){
+      } 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'
+          videoSixName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户6'
         })
       }
-      if(document.getElementById('video7').name == sid){
+      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'
+          videoSevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户7'
         })
-      }if(document.getElementById('video8').name == sid){
+      } 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'
+          videoEightName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户8'
         })
-      }if(document.getElementById('video9').name == sid){
+      } 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'
+          videoNineName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户9'
         })
-      }if(document.getElementById('video10').name == sid){
+      } 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'
+          videoTenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户10'
         })
-      }if(document.getElementById('video11').name == sid){
+      } 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'
+          videoElevenName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户11'
         })
-      }if(document.getElementById('video12').name == sid){
+      } 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'
+          videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
         })
       }
     } catch (err) {
@@ -2628,7 +2653,7 @@ componentDidMount() {
     })
   }
   switchExternal = () => {
-    if(!this.state.isWhiteboard) {
+    if (!this.state.isWhiteboard) {
       const publish_config = {};
       this.setState({
         isWhiteboard: true,
@@ -2636,7 +2661,7 @@ componentDidMount() {
       this.tabTitlesClick({
         value: 'RMWhiteboard',
         name: 'RM白板'
-      },'add')
+      }, 'add')
       if (document.getElementById('video20').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 4
@@ -2646,7 +2671,7 @@ componentDidMount() {
         publish_config.video_profile_type = 5
         this.test_controller.ChangeMediaStream(publish_config);
       } else {
-  
+
         publish_config.media_type = 1
         publish_config.publish_device = 4
         publish_config.need_volume_analyser = true
@@ -2657,47 +2682,74 @@ componentDidMount() {
         publish_config.publish_tag = 'projectionWhiteboard'
         this.test_controller.Publish(publish_config)
       }
-    } else{
+    } else {
       message.success('当前已经切换RM白板')
     }
-    
+
 
   }
   switchSelect = (value) => {
     this.setState({
-          isSelect: value,
-        })
+      isSelect: value,
+    })
   }
-  facialHandleVisibleChange=(value)=>{
-    if(!value) {
+  facialHandleVisibleChange = (value) => {
+    if (!value) {
       this.setState({
         clickedFacial: false
       })
     }
   }
-  ocrHandleVisibleChange=(value)=>{
-    if(!value) {
+  ocrHandleVisibleChange = (value) => {
+    if (!value) {
       this.setState({
         clickedOcr: false
       })
     }
   }
+  inspection = () => {
+    this.test_controller.GetDevices()
+  }
+  handleOkInspection = () => {
+    const config = {}
+    config.sid = document.getElementById('publish_video1').name
+    config.videoSource = this.state.cameraValue
+    config.audioSource = this.state.microphoneValue
+    this.test_controller.ChangeProfile(config)
+  }
+  handleCancelInspection = () => {
+    this.setState({
+      isModalVisibleInspection: false
+    })
+  }
+  getCameraValue = (event) => {
+    console.log(event.target.value);
+    this.setState({
+      cameraValue: event.target.value
+    })
+  }
+  getMicrophoneValue = (event) => {
+    console.log(event.target.value);
+    this.setState({
+      microphoneValue: event.target.value
+    })
+  }
   render() {
-    const {meetingInfo} = this.props
+    const { meetingInfo } = this.props
     var pdfChildren
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
     }
     const customerNameList = (
-      <span>
+      <span className='labelClass'>
         {
-          meetingInfo.customers.map((item,index)=>{
+          meetingInfo.customers.map((item, index) => {
             return <label>
               {item}
               {
-                meetingInfo.customers.length > 0 && index != meetingInfo.customers.length-1 &&<span>，</span>
+                meetingInfo.customers.length > 0 && index != meetingInfo.customers.length - 1 && <label>，</label>
               }
-              
+
             </label>
           })
         }
@@ -2706,41 +2758,72 @@ componentDidMount() {
     const tabTitleList = (
       <div className="button">
         {
-          this.state.tabTitles.map((item)=>{
-            return <div className={`${this.state.isSelect == item.value  ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this,item.value)}>
+          this.state.tabTitles.map((item) => {
+            return <div className={`${this.state.isSelect == item.value ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this, item.value)}>
               {item.name}
             </div>
           })
         }
       </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>
+    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>
-            <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
+          </div>
+          <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
         </div>
+      })
+    const camera = (
+      <div class="cameraAnMicrophone">
+        {
+          this.state.cameraList.map((item, index) => {
+            return <div>
+              <input type="radio" name="camere" value={item.actionid} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)} />{item.actionname}
+            </div>
           })
-        
+        }
+      </div>
+    )
+
+    const microphone = (
+      <div>
+        {
+          this.state.microphoneList.map((item, index) => {
+            return <div class="cameraAnMicrophone">
+              <input type="radio" name="microphone" value={item.actionid} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)} />{item.actionname}
+            </div>
+          })
+        }
+      </div>
+    )
+    const sectionStyle = this.state.tabTitles.length > 0 ? {
+      background: '#f3f3f3',
+    } :{
+      backgroundImage: `url(${Background})`,
+      'background-repeat': 'no-repeat',
+      'background-size': '100% 100%'
+    };
     return (
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
-          {tabTitleList}
-          <div className="health" style={{'margin-top': (this.state.tabTitles.length > 0) ? '0px' : '20px' }}>
-            <div className="projection">
+          <div className="health">
+          <div className="healthVideo">
+            <div className="projection" style={sectionStyle}>
+            {tabTitleList}
+            <div style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
@@ -2775,33 +2858,34 @@ componentDidMount() {
               {
                 this.state.tabTitles.length == 0 &&
                 <div className='themeClass'>
-                <div>
-                  <ul>
-                    <li>
-                      <span>会议主题：</span>
-                      <label>{meetingInfo.title}</label>
-                    </li>
-                    <li>
-                      <span>主持人：</span>
-                      <label>{meetingInfo.host}</label>
-                    </li>
-                    <li>
-                      <span>参会客户：</span>
-                      {customerNameList}
-                    </li>
-                  </ul>
+                  <div>
+                    <ul>
+                      <li>
+                        <span>会议主题：</span>
+                        <label className='labelClass'>{meetingInfo.title}</label>
+                      </li>
+                      <li>
+                        <span>主持人：</span>
+                        <label className='labelClass'>{meetingInfo.host}</label>
+                      </li>
+                      <li>
+                        <span>参会客户：</span>
+                        {customerNameList}
+                      </li>
+                    </ul>
+                  </div>
                 </div>
-              </div>
               }
-              
 
+
+            </div>
             </div>
-            <div className="wrapper" style={{ width:  '20%' , }}>
+            <div className="wrapper" style={{ width: '20%', }}>
               <div
                 className={`itemed ${this.state.publishDevic == 4 ? '' : 'isBack'} `}
               >
                 <div className="publishVideoDiv">
-                  
+
                   <video
                     id="publish_video1"
                     className={`publishVideoClass`}
@@ -2811,6 +2895,8 @@ componentDidMount() {
                     playsinline={true}
                   />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
+                  
+                  <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
                   {
                     this.state.voiceStatue && <img
                       alt=""
@@ -2818,26 +2904,24 @@ componentDidMount() {
                       className="imgClassVoice voiceClass"
                     />
                   }
-                  <div id="publish_video_div" className={`tellerTitle titleSamlle`}>
-                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>坐席</div>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>坐席</div>
                   </div>
-                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
               {/* {
                 videoCustomer
               } */}
-              <div style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div
                 className={`itemed`}
-                style={{ position: "relative",display: (this.state.videoOneName) ? '' : 'none'}}
+                style={{ position: "relative", display: (this.state.videoOneName) ? '' : 'none' }}
               >
                 {
                   this.state.customAudioed && <img
                     alt=""
                     src={require("../../assets/img/yingpin.png").default}
-                    style={{ width: "100%", height: "100%",}}
+                    style={{ width: "100%", height: "100%", }}
                   ></img>
                 }
                 <div className="video1Div">
@@ -2849,6 +2933,8 @@ componentDidMount() {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
+                  
+                  <div style={{ display: (this.state.videoOneName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
                   {
                     this.state.voiceVideoOne && <img
                       alt=""
@@ -2856,41 +2942,43 @@ componentDidMount() {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <div style={{ display: (this.state.videoOneName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
-                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px'}} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+
+                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                       {this.state.videoOneName}
                     </div>
 
-                    
+
                   </div>
-                  <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`} style={{ display: (this.state.videoTwoName) ? '' : 'none', }}>
-                  <video
-                    id="video2"
-                    autoPlay
-                    muted={true}
-                    className="video"
+                <video
+                  id="video2"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio2" autoPlay />
+                <label style={{ display: 'none' }} id="feedId2" type="text" />
+                
+                <div style={{ display: (this.state.videoTwoName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                {
+                  this.state.voiceVideoTwo && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
                   />
-                  <audio id="audio2" autoPlay />
-                  <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  {
-                    this.state.voiceVideoTwo && <img
-                      alt=""
-                      src={require("../../assets/img/jingyin.png").default}
-                      className="imgClassVoice voiceVideoClass"
-                    />
-                  }
-                  <div style={{ display: (this.state.videoTwoName) ? '' : 'none'}} className={`customerTitle titleSamlle`}>
-                    <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
-                      {this.state.videoTwoName}
-                    </div>
+                }
+                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                    {this.state.videoTwoName}
                   </div>
-                  <canvas style={{ display: (this.state.videoTwoName&&!this.state.voiceVideoTwo) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                </div>
               </div>
               <div className={`itemed`}
-              style={{display: (this.state.videoThreeName) ? '' : 'none' }}>
+                style={{ display: (this.state.videoThreeName) ? '' : 'none' }}>
                 <video
                   id="video3"
                   autoPlay
@@ -2899,19 +2987,21 @@ componentDidMount() {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
+                
+                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    this.state.voiceVideoThree && <img
-                      alt=""
-                      src={require("../../assets/img/jingyin.png").default}
-                      className="imgClassVoice voiceVideoClass"
-                    />
-                  }
-                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                  this.state.voiceVideoThree && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoThreeName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.videoThreeName&&!this.state.voiceVideoThree) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`} style={{ display: (this.state.videoFourName) ? '' : 'none', }}>
                 <video
@@ -2922,22 +3012,24 @@ componentDidMount() {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
+                
+                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    this.state.voiceVideoFour && <img
-                      alt=""
-                      src={require("../../assets/img/jingyin.png").default}
-                      className="imgClassVoice voiceVideoClass"
-                    />
-                  }
-                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                  this.state.voiceVideoFour && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoFourName}
                   </div>
                 </div>
-                <canvas style={{ display: (this.state.videoFourName&&!this.state.voiceVideoFour) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed`}
-              style={{display: (this.state.videoFiveName) ? '' : 'none' }}>
+                style={{ display: (this.state.videoFiveName) ? '' : 'none' }}>
                 <video
                   id="video5"
                   autoPlay
@@ -2946,53 +3038,57 @@ componentDidMount() {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
+                
+                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    this.state.voiceVideoFive && <img
-                      alt=""
-                      src={require("../../assets/img/jingyin.png").default}
-                      className="imgClassVoice voiceVideoClass"
-                    />
-                  }
-                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                  this.state.voiceVideoFive && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoFiveName}
-                  </div>  
+                  </div>
                 </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`} style={{ display: (this.state.videoSixName) ? '' : 'none', }}>
                 <video
                   id="video6"
                   autoPlay
-                  muted={true} 
+                  muted={true}
                   className="video"
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
+                
+                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    this.state.voiceVideoSix && <img
-                      alt=""
-                      src={require("../../assets/img/jingyin.png").default}
-                      className="imgClassVoice voiceVideoClass"
-                    />
-                  }
-                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle titleSamlle`}>
-                  <div className='titleName' style={{ background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}}>
+                  this.state.voiceVideoSix && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoSixName}
                   </div>
                 </div>
-                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
               </div>
               <div
                 className={`itemed`}
-                style={{ position: "relative",display: (this.state.videoSevenName) ? '' : 'none'}}
+                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%",}}
+                    style={{ width: "100%", height: "100%", }}
                   ></img>
                 }
                 <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
@@ -3004,6 +3100,8 @@ componentDidMount() {
                   />
                   <audio id="audio7" autoPlay />
                   <label style={{ display: 'none' }} id="feedId7" type="text" />
+                  
+                  <div style={{ display: (this.state.videoSevenName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
                   {
                     this.state.voiceVideoSeven && <img
                       alt=""
@@ -3011,65 +3109,69 @@ componentDidMount() {
                       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}}>
+                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
+
+                    <div className='titleName' style={{ 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"
+                <video
+                  id="video8"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio8" autoPlay />
+                <label style={{ display: 'none' }} id="feedId8" type="text" />
+                
+                <div style={{ display: (this.state.videoEightName) ? '' : 'none' }} className={`customerTitle titleSamlle`}>
+                {
+                  this.state.voiceVideoEight && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
                   />
-                  <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>
+                }
+                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                    {this.state.videoEightName}
                   </div>
-                  <canvas style={{ display: (this.state.videoEightName&&!this.state.voiceVideoEight) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
+                </div>
               </div>
               <div className={`itemed`} style={{ display: (this.state.videoNineName) ? '' : 'none', }}>
                 <video
                   id="video9"
                   autoPlay
-                  muted={true} 
+                  muted={true}
                   className="video"
                 />
                 <audio id="audio9" autoPlay />
                 <label style={{ display: 'none' }} id="feedId9" type="text" />
+                
+                <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    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.voiceVideoNine && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ 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' }}>
+                style={{ display: (this.state.videoTenName) ? '' : 'none' }}>
                 <video
                   id="video10"
                   autoPlay
@@ -3078,19 +3180,21 @@ componentDidMount() {
                 />
                 <audio id="audio10" autoPlay />
                 <label style={{ display: 'none' }} id="feedId10" type="text" />
+                
+                <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    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.voiceVideoTen && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{  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
@@ -3101,22 +3205,24 @@ componentDidMount() {
                 />
                 <audio id="audio11" autoPlay />
                 <label style={{ display: 'none' }} id="feedId11" type="text" />
+                
+                <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    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.voiceVideoEleven && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{ 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'  }}>
+                style={{ display: (this.state.videoTwelveName) ? '' : 'none' }}>
                 <video
                   id="video12"
                   autoPlay
@@ -3125,24 +3231,27 @@ componentDidMount() {
                 />
                 <audio id="audio12" autoPlay />
                 <label style={{ display: 'none' }} id="feedId12" type="text" />
+                
+                <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
-                    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.voiceVideoTwelve && <img
+                    alt=""
+                    src={require("../../assets/img/jingyin.png").default}
+                    className="imgClassVoice voiceVideoClass"
+                  />
+                }
+                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
+
+                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
                     {this.state.videoTwelveName}
-                  </div>  
+                  </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>
+            <img id="icon_huatong" style={{ display: 'none' }} src={require("../../assets/img/icon_huatong.png").default}></img>
+          </div>
           </div>
           <Foot
             img={this.state.voiceImg}
@@ -3167,6 +3276,7 @@ componentDidMount() {
             customerFaceClick={this.customerFaceClick}
             ocrClick={this.ocrClick}
             switchExternal={this.switchExternal}
+            inspection={this.inspection}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
             onCancel={this.handleCancel}>
@@ -3177,9 +3287,11 @@ componentDidMount() {
               !this.state.isSuspend && <span>确定是否暂停会话？</span>
             }
           </Modal>
-          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisibleEnd} onOk={this.handleOkEnd}
-            onCancel={this.handleCancelEnd}>
-            <span>确定是否结束会话？</span>
+          <Modal  closable={false} centered={true} visible={this.state.isModalVisibleEnd} footer={[
+            <Button className="modelButtonCancel" onClick={this.handleCancelEnd}>取消</Button>,
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}>确定</Button>
+          ]}>
+            <div className='endModal'>确定是否结束会话？</div>
           </Modal>
           <Modal title={this.state.titleModal} cancelText="取消" okText="确定" visible={this.state.isModalVisibleFacial}
             onOk={this.handleOkFacial} onCancel={this.handleCancelFacial}>
@@ -3188,18 +3300,17 @@ componentDidMount() {
             </div>
 
           </Modal>
-          <Modal title="新增预约" visible={this.state.isModalVisibleInvitation} footer={[
-            <Button type="primary" danger onClick={this.handleOkInvitation}>发送</Button>,
-            <Button onClick={this.handleCancelInvitation}>取消</Button>
+          <Modal className="modelClass" title="新增预约" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
+            <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>,
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInvitation}>确定</Button>
           ]}>
             <div>
-              <div>输入员工号：</div>
               <div className="invitationDiv">
-                <input className="inputClick" placeholder="请输入员工号" value={this.state.employeeNumber} onChange={e => this.handleChange(e)}></input>
+                <span class="modalSpan">员工号：</span><input className="inputClick" placeholder="请输入员工号" value={this.state.employeeNumber} onChange={e => this.handleChange(e)}></input>
                 <span className="invitationSpan" onClick={this.queryStaff}>查 询</span>
               </div>
               <div className="invitationDiv">
-                <input className="inputClick" readonly value={this.state.employeeName}></input>
+              <span class="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
             </div>
           </Modal>
@@ -3220,6 +3331,17 @@ componentDidMount() {
               ></CanvasDraw>
             </div>
           </Modal>
+          <Modal title="设备检测" closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
+            <Button className="modelButtonCancel" onClick={this.handleCancelInspection}>取消</Button>,
+            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInspection}>确定</Button>
+          ]}>
+            <div class="inspection">
+              <div>摄像头设备：</div>
+              {camera}
+              <div>麦克风设备：</div>
+              {microphone}
+            </div>
+          </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"
             webkit-playsinline="true" playsInline={true} x5-playsinline="x5-playsinline"
             x-webkit-airplay="true"></video>
@@ -3237,14 +3359,14 @@ Video.defaultProps = {
   voiceColor: '#0AE544',
   titleBackground: 'rgba(0,0,0,0.65)',
   titleColor: '#fff',
-  microphoneSize: '40',
+  microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
   menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
   meetingInfo: {
     title: '测试',
     host: 'wmz',
-    customers: ['王三','张思']
+    customers: ['王三', '张思']
   }
 }
 export default Video