react_hsbc_teller 1.0.7 → 1.1.0

package/packages/pages/video/video.jsx

@@ -27,7 +27,9 @@ const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
 }
-let pictureInPictureVideo = ''
+let pictureInPictureVideo
+let mix_stream
+let worker
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -41,6 +43,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    listVideoPicture: [],
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
@@ -63,7 +66,7 @@ class Video extends Component {
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
-    screenName: '投屏',
+    screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
     voiceStatue: false,
@@ -592,16 +595,16 @@ class Video extends Component {
         if(!val) {
           document.exitPictureInPicture()
         } else {
-          this.pictureInPictureClick()
+          this.pictureInPictureClick('update')
         }
       } else {
         if(!val) {
-        this.pictureInPictureClick()
+        this.pictureInPictureClick('add')
         }
       }
     }
   };
-  pictureInPictureClick=()=>{
+  pictureInPictureClick=(val)=>{
     let interval
     const list = []
     if (document.getElementById('video1').name) {
@@ -710,18 +713,42 @@ class Video extends Component {
       })
     }
     console.log(list)
-    const width = 640;
-    const height = 360 * list.length;
+    this.state.listVideoPicture = list
+    // const width = 640;
+    // const height = 360 * this.state.listVideoPicture.length;
+    if(val == 'add') {
+      pictureInPictureVideo.srcObject = mix_stream;
+      let flag1 = true;
+      worker.postMessage(flag1);
+    }
+  }
+  workerClick=()=>{
     const canvas = document.createElement('canvas');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
-    canvas.width = width;
-    canvas.height = height;
+    let blob = new Blob([
+      `
+      let timer;
+      onmessage = ({data:flag})=>{
+          if(!flag){
+              clearInterval(timer);
+          }else{
+             timer = setInterval(function() { postMessage(''); }, 100);
+          }
+      }
+      `,
+    ]);
+    let url = window.URL.createObjectURL(blob);
+    worker = new Worker(url);
+    window.URL.revokeObjectURL(blob);
+    
 
-    interval = setInterval(() => {
-      cobj.clearRect(0, 0, width, height);
-      for (let i = 0; i < list.length; i++) {
+    worker.onmessage =() => {
+      cobj.clearRect(0, 0, 640, 360 * this.state.listVideoPicture.length);
+      canvas.width = 640;
+      canvas.height = 360 * this.state.listVideoPicture.length;
+      for (let i = 0; i < this.state.listVideoPicture.length; i++) {
 
-        let videoId = list[i].name;
+        let videoId = this.state.listVideoPicture[i].name;
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
         let videoHeight = videoDiv.videoHeight;
@@ -732,7 +759,7 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 640 / videoWidth;
         }
-        if(list[i].noVideo){
+        if(this.state.listVideoPicture[i].noVideo){
           cobj.fillStyle = '#333';
         cobj.fillRect((640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight)
         } else {
@@ -746,11 +773,11 @@ class Video extends Component {
         cobj.fill();
         cobj.stroke();
         cobj.beginPath();
-        cobj.font = "28px auto";
+        cobj.font = "28px serif";
         cobj.textAlign = 'left';
         cobj.lineWidth = 1;
         // 文字
-        let str = list[i].title
+        let str = this.state.listVideoPicture[i].title
         for (let k = 0; k < str.length; k++){
           // console.log(str.substring(0,k+1))
           // console.log(cobj.measureText(str.substring(0,k+1)).width)
@@ -765,7 +792,7 @@ class Video extends Component {
         //左边框
         cobj.beginPath();
         cobj.moveTo(0, 0);
-        cobj.lineTo(0, 360 * list.length);
+        cobj.lineTo(0, 360 * this.state.listVideoPicture.length);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -782,7 +809,7 @@ class Video extends Component {
 
         //右边框
         cobj.beginPath();
-        cobj.moveTo(640, 360 * list.length);
+        cobj.moveTo(640, 360 * this.state.listVideoPicture.length);
         cobj.lineTo(640, 0);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
@@ -792,8 +819,8 @@ class Video extends Component {
 
         //上边框
         cobj.beginPath();
-        cobj.moveTo(0, 360 * list.length);
-        cobj.lineTo(640, 360 * list.length);
+        cobj.moveTo(0, 360 * this.state.listVideoPicture.length);
+        cobj.lineTo(640, 360 * this.state.listVideoPicture.length);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -803,26 +830,15 @@ class Video extends Component {
         let microphoneSize = 50
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
-        if(this.state[list[i].voice]) {
+        if(this.state[this.state.listVideoPicture[i].voice]) {
           cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
         } else {
           cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
 
         // 绘制实时音量
-        let sid = document.getElementById(list[i].name).name
+        let sid = document.getElementById(this.state.listVideoPicture[i].name).name
         let analyser = this.state.analyserData.get(sid)
         aou(analyser)
-        //  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 = 50
-        //   var img = document.getElementById("icon_huatong");
-        //   cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
         function aou(analyser){
           if(analyser) {
             let dataArray = new Uint8Array(analyser.frequencyBinCount);
@@ -856,11 +872,12 @@ class Video extends Component {
         }
         
       }
-    }, 100);
+    };
+   
     const captureStream = canvas.captureStream();
-    const mix_stream = new MediaStream(captureStream);
+    mix_stream = new MediaStream(captureStream);
     pictureInPictureVideo = document.getElementById('mixedvideo');
-    pictureInPictureVideo.srcObject = mix_stream;
+    
     pictureInPictureVideo.onloadedmetadata = () => {
       pictureInPictureVideo.requestPictureInPicture();
     };
@@ -875,9 +892,11 @@ class Video extends Component {
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
       pictureInPictureVideo.srcObject = null;
       pictureInPictureVideo.style.display = "none";
-      clearInterval(interval);
+      this.state.listVideoPicture = []
+      worker.postMessage(false);
       this.state.isPictureInPicture = false
     });
+
   }
   roomCallBack = (type, manege,code) => {
     this.setState({
@@ -1118,7 +1137,10 @@ class Video extends Component {
       else if (Mival.typeId == 1220) {
         // 一炒多的图片
         if (Mival.sessionId == this.state.sessionId) {
-          this.props.imgCallback(Mival.data.type, Mival.data.file) // 文字抄录和风险抄录，3--风险，，2--文字
+          this.props.imgCallback({
+            type: Mival.data.type, 
+            file: Mival.data.file}
+            ) // 文字抄录和风险抄录，3--风险，，2--文字
         }
       } else if (Mival.typeId == 1216) {
         // 签字回调
@@ -1338,7 +1360,7 @@ class Video extends Component {
       type: '2',
       sigType: 1
     };
-
+    this.workerClick()
     this.test_controller.GetDevices();
     // 获取设备成功
     this.test_controller.OnGetDevicesSuccess = (devicesInfo) => {
@@ -1505,6 +1527,9 @@ class Video extends Component {
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
       console.log(code, sid)
+      if((code == 5004 || code == 5007) && document.getElementById('publish_video1').name == sid) {
+        this.roomCallBack(2, '媒体链路连接异常/超时',8)
+      }
     };
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
@@ -1781,7 +1806,8 @@ class Video extends Component {
           'meetingInfo': {
             'title': this.props.meetingInfo.title,
             'host': this.props.meetingInfo.host,
-            'customers': this.props.meetingInfo.customers
+            'customers': this.props.meetingInfo.customers,
+            'otherAttendees': this.props.meetingInfo.otherAttendees
           }
 
         })
@@ -1996,11 +2022,10 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         })
-        this.state.sessionType = false
         this.state.isSharedScreen = false
         this.setState({
           
-          screenName: '投屏'
+          screenName: '共享模式'
         });
         this.tabTitlesClick('RMScreen', 'delect')
         if (this.state.isPictureInPicture) {
@@ -2286,10 +2311,10 @@ class Video extends Component {
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
-      if(this.state.isModalVisibleInspection) {
-        this.messageClick('切换摄像头或麦克风成功','success')
+      if(this.state.loading) {
+        this.messageClick('摄像头或麦克风切换成功','success')
         this.setState({
-          isModalVisibleInspection: false
+            loading: false
         })
       }
       
@@ -2301,7 +2326,12 @@ class Video extends Component {
       msg
     ) => {
       console.log('切流失败通知', sid, code, msg)
+      if(this.state.loading) {
+      this.setState({
+          loading: false
+      })
       this.messageClick('切换摄像头或麦克风失败，请先检查设备','error')
+    }
     };
     // 服务端录制初始化成功
     this.test_controller.OnInitRemoteRecordSucc = (
@@ -2502,7 +2532,7 @@ class Video extends Component {
     this.timer && clearInterval(this.timer);
     if(this.state.isSharedScreen) {
       this.setState({
-        screenName: '投屏',
+        screenName: '共享模式',
       })
       this.state.isSharedScreen = false
       this.state.laveRoomSharedScreen = true
@@ -2517,7 +2547,7 @@ class Video extends Component {
       })
     } else {
       this.setState({
-        screenName: '投屏',
+        screenName: '共享模式',
       });
       this.state.isSharedScreen = false
       this.state.laveRoomSharedScreen = true
@@ -2592,6 +2622,7 @@ class Video extends Component {
       this.props.resourcePath + "/beauty/beauty.js",
       this.props.resourcePath + "/beauty/meeting_beautify_stream.js",
       this.props.resourcePath + "/beauty/backgroundBlur.js",
+
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
       // this.props.resourcePath + "/pdf.js",
@@ -2603,10 +2634,17 @@ class Video extends Component {
       this.props.resourcePath + "/meeting_im.js",
       this.props.resourcePath + "/meeting_vod.js",
       this.props.resourcePath + "/meeting_invite.js",
-      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/client_record.js",  
       this.props.resourcePath + "/remote_record.js",
       this.props.resourcePath + "/meeting_camera_stream.js",
       this.props.resourcePath + "/meeting_api.js",
+
+      this.props.resourcePath + "/eruda.js",
+      this.props.resourcePath + "/iconfont.js",
+      this.props.resourcePath + "/dialogue.css",
+      
+
+        
     ]
     const that = this
     let i = 0
@@ -2782,6 +2820,8 @@ class Video extends Component {
         publish_config.media_type = 1
         publish_config.publish_device = 2
         publish_config.video_profile_type = 1
+        publish_config.enableDesktopAudio=true
+        publish_config.degradationType=2
         publish_config.sid = document.getElementById('video20').name
         this.test_controller.ChangeMediaStream(publish_config)
         this.state.isScreenSwitching = true
@@ -2809,7 +2849,7 @@ class Video extends Component {
         this.state.isSharedScreen = false
         this.state.isScreenSwitching = false
         this.setState({
-          screenName: '投屏'
+          screenName: '共享模式'
         });
         console.log(pictureInPictureVideo)
         this.tabTitlesClick('RMScreen', 'delect')
@@ -2821,6 +2861,8 @@ class Video extends Component {
           publish_config.media_type = 1;
           publish_config.publish_device = 2;
           publish_config.video_profile_type = 1;
+          publish_config.enableDesktopAudio=true
+          publish_config.degradationType=2
           publish_config.sid = document.getElementById('video20').name;
           this.test_controller.ChangeMediaStream(publish_config);
         } else {
@@ -2828,6 +2870,8 @@ class Video extends Component {
           publish_config.publish_device = 2
           publish_config.need_volume_analyser = true
           publish_config.video_profile_type = 1
+          publish_config.enableDesktopAudio=true
+          publish_config.degradationType=2
           publish_config.publish_video_id = 'video20'
           publish_config.publish_streamId_id = 'subscribe_streamId20'
           publish_config.publish_tag = 'projectionWhiteboard'
@@ -2842,7 +2886,7 @@ class Video extends Component {
         this.tabTitlesClick(
           {
             value: 'RMScreen',
-            name: '坐席投屏'
+            name: '共享内容'
           }, 'add'
         )
         if (!this.state.isPictureInPicture) {
@@ -3189,6 +3233,7 @@ class Video extends Component {
       console.log(inp.value, '复制到的内容')
       document.execCommand('Copy') // 执行浏览器复制命令
       inp.remove()
+      this.messageClick('复制成功','success')
   }
   queryStaff = async () => {
     if(!this.state.employeeNumber) return
@@ -3229,26 +3274,75 @@ class Video extends Component {
         value: 'RMWhiteboard',
         name: 'RM白板'
       }, 'add')
-      if (document.getElementById('video20').name) {
-        // 代表已经有了进行切流
-        publish_config.publish_device = 4
-        publish_config.media_type = 1
-        publish_config.sid = document.getElementById('video20').name
-        publish_config.part_of_screen_id = 'touBoxItem'
-        publish_config.video_profile_type = 5
-        this.test_controller.ChangeMediaStream(publish_config);
-      } else {
-
-        publish_config.media_type = 1
-        publish_config.publish_device = 4
-        publish_config.need_volume_analyser = true
-        publish_config.video_profile_type = 5
-        publish_config.part_of_screen_id = 'touBoxItem';
-        publish_config.publish_video_id = 'video20'
-        publish_config.publish_streamId_id = 'subscribe_streamId10'
-        publish_config.publish_tag = 'projectionWhiteboard'
-        this.test_controller.Publish(publish_config)
-      }
+      const width = this.state.whiteboardWidth;
+      const height = this.state.whiteboardHeight;
+      const canvas = document.createElement('canvas');
+      const videoMedia = document.getElementById('manedvideo');
+      const cobj = canvas.getContext('2d'); // 获取绘图环境
+      const w = window.screen.width;
+      const h = window.screen.height;
+      canvas.width = width;
+      canvas.height = height;
+      videoMedia.addEventListener('play', (event) =>{
+        var $this = this; //cache
+        console.log('333111',!$this.paused,!$this.ended)
+        loop()
+        function loop() {
+            if (!$this.paused && !$this.ended) {
+              cobj.drawImage(videoMedia, 0, 0, width, height, 0, 0,width, height,);
+                setTimeout(loop, 1000 / 10); // drawing at 30fps
+            }
+        }
+        
+        if (document.getElementById('video20').name) {
+          // 代表已经有了进行切流
+          publish_config.publish_device = 5
+          publish_config.media_type = 1
+          publish_config.sid = document.getElementById('video20').name
+          publish_config.stream = canvas.captureStream(10)
+          publish_config.video_profile_type = 5
+          this.test_controller.ChangeMediaStream(publish_config);
+        } else {
+  
+          publish_config.media_type = 1
+          publish_config.publish_device = 5
+          publish_config.need_volume_analyser = true
+          publish_config.video_profile_type = 5
+          publish_config.stream = canvas.captureStream(10)
+          publish_config.publish_video_id = 'video20'
+          publish_config.publish_streamId_id = 'subscribe_streamId10'
+          publish_config.publish_tag = 'projectionWhiteboard'
+          this.test_controller.Publish(publish_config)
+        }
+    }, 0);
+      navigator.mediaDevices.getDisplayMedia({
+        video: true
+    })
+    .then((stream) => {
+      videoMedia.srcObject = stream;
+    }, error => {
+        console.log("Unable to acquire screen capture", error);
+    });
+      // if (document.getElementById('video20').name) {
+      //   // 代表已经有了进行切流
+      //   publish_config.publish_device = 4
+      //   publish_config.media_type = 1
+      //   publish_config.sid = document.getElementById('video20').name
+      //   publish_config.part_of_screen_id = 'touBoxItem'
+      //   publish_config.video_profile_type = 5
+      //   this.test_controller.ChangeMediaStream(publish_config);
+      // } else {
+
+      //   publish_config.media_type = 1
+      //   publish_config.publish_device = 4
+      //   publish_config.need_volume_analyser = true
+      //   publish_config.video_profile_type = 5
+      //   publish_config.part_of_screen_id = 'touBoxItem';
+      //   publish_config.publish_video_id = 'video20'
+      //   publish_config.publish_streamId_id = 'subscribe_streamId10'
+      //   publish_config.publish_tag = 'projectionWhiteboard'
+      //   this.test_controller.Publish(publish_config)
+      // }
     } else {
       this.messageClick('当前已经切换RM白板','success')
 
@@ -3279,11 +3373,16 @@ class Video extends Component {
     this.test_controller.GetDevices()
   }
   handleOkInspection = () => {
+    this.setState({
+      isModalVisibleInspection: false,
+      loading: true
+    })
     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({
@@ -3316,6 +3415,21 @@ class Video extends Component {
     if (this.props.children) {
       pdfChildren = React.cloneElement(this.props.children, { width: this.state.whiteboardWidth, height: this.state.whiteboardHeight, show: this.state.isSelect == 'RMWhiteboard'})
     }
+    const otherAttendeesList = (
+      <span className='labelClass'>
+        {(meetingInfo.otherAttendees ? meetingInfo.otherAttendees.length>0 ? true : false : false) &&
+          meetingInfo.otherAttendees.map((item, index) => {
+            return <label key={index}>
+              {item}
+              {
+                meetingInfo.otherAttendees.length > 0 && index != meetingInfo.otherAttendees.length - 1 && <label>，</label>
+              }
+
+            </label>
+          })
+        }
+      </span>
+    )
     const customerNameList = (
       <span className='labelClass'>
         {
@@ -3413,9 +3527,9 @@ class Video extends Component {
           <Header></Header>
           <div className="health">
           <div className="healthVideo">
-            <div className="projection">
+            <div className="projection"  style={{background: this.state.tabTitles.length > 0 ? '#f0f0f0' : '#ffffff'}}>
             {tabTitleList}
-            <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" />
+            {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
             
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
@@ -3432,6 +3546,7 @@ class Video extends Component {
 
               </div>
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMWhiteboard') ? '' : 'none', }}>
+              {/* <div className="videoDiv"> */}
                 <div id="touBoxItem">
                   {pdfChildren}
                 </div>
@@ -3463,9 +3578,17 @@ class Video extends Component {
                         <label className='labelClass'>{meetingInfo.host}</label>
                       </li>
                       <li>
-                        <span>参会者：</span>
+                        <span>客户：</span>
                         {customerNameList}
                       </li>
+                      {
+                        (meetingInfo.otherAttendees ? meetingInfo.otherAttendees.length>0 ? true : false : false) && <li>
+                        <span>其他参会者：</span>
+                        {otherAttendeesList}
+                      </li>
+                      }
+                      
+                      
                     </ul>
                   </div>
                 </div>
@@ -3885,7 +4008,7 @@ class Video extends Component {
             <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkEnd}>确定</Button>
             </div>
           ]}>
-            <div className='endModal'>确定是否结束会话？</div>
+            <div className='endModal'>是否要结束并退出会议？</div>
           </Modal>
           <Modal title={this.state.titleModal}  closable={false} centered={true} visible={this.state.isModalVisibleFacial} footer={[
             <div key='facial'>
@@ -3904,7 +4027,7 @@ class Video extends Component {
             </div>
 
           </Modal> */}
-          <Modal className="modelClass" title="新增预约" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
+          <Modal className="modelClass" title="邀请参会人员" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
              <div key='invitation'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
             {
@@ -3924,19 +4047,19 @@ class Video extends Component {
               <div className="invitationDiv">
               <span className="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
-              {
-                this.state.employeeName &&<div className='invitationDiv'>
-                <span className="modalSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><Button className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制会议链接</Button>
-                </div>
-              }
               
+                 <div className='invitationDiv'>
+                <span  className="modalSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <Button style={{ display: this.state.employeeName? '' : 'none'}} className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制会议链接</Button>
+                </div>
+                
             </div>
-            {
-              this.state.employeeError && <div className='errorClassInvitation'>
-              <img alt="" src={require("../../assets/img/tooltips2_fail.png").default} />
-              <span>{this.state.employeeError}</span>
+            
+            <div className={`errorClassInvitation ${this.state.employeeError ? 'errorClassInvitationColor' : ''}`}>
+              <img style={{ display: this.state.employeeError? '' : 'none'}} alt="" src={require("../../assets/img/tooltips2_fail.png").default} />
+              <span style={{ display: this.state.employeeError? '' : 'none'}}>{this.state.employeeError}</span>
               </div>
-            }
+            
             
           </Modal>
           <Modal title="签字白板" width={600} destroyOnClose={true} closable={false} centered={true} visible={isTranscribing} footer={
@@ -3958,21 +4081,21 @@ class Video extends Component {
               ></CanvasDraw>
             </div>
           </Modal>
-          <Modal title="设备检测" closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
+          <Modal title="设置视频设备" closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
              <div key='inspection'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInspection}>取消</Button>
             <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInspection}>确定</Button>
             </div>
           ]}>
             <div className="inspection">
-              <div>摄像头设备：</div>
+              <div>摄像头：</div>
               {camera}
-              <div>麦克风设备：</div>
+              <div>麦克风：</div>
               {microphone}
               {
                 this.state.speakerList.length > 0 &&
                  <span>
-                   <div>扬声器设备：</div>
+                   <div>扬声器：</div>
               {speaker}
                  </span>
               }
@@ -3980,6 +4103,8 @@ class Video extends Component {
             </div>
           </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>
+          <video className="mixedvideo" id="manedvideo" autoPlay width="0" height="0"></video>
+
         </Spin>
       </div>);
   }
@@ -3991,7 +4116,7 @@ imRoomId: "Fwua8kGB6@conference.openfire2.leimondata.cn",
 sessionId: "Fwua8kGB6",
   tellerAccount: 't001',
   businessNumber: '123',
-  callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+  callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
   // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws', 
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
 
@@ -4009,7 +4134,8 @@ sessionId: "Fwua8kGB6",
   meetingInfo: {
     title: '--',
     host: '--',
-    customers: ['--']
+    customers: ['--'],
+    otherAttendees: undefined
   },
   isTranscribing: false,
 }