react_hsbc_teller 0.2.0 → 0.2.4

package/packages/pages/video/video.jsx

@@ -20,7 +20,7 @@ import Spin from "antd/lib/spin";
 import 'antd/lib/spin/style'
 import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
-import { FormattedMessage, injectIntl  } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 const LEAVE_TYPE = {
   TELLER_EXIT: '1', // 坐席退出
   ROOM_DESTROYED: '-1', // 房间异常
@@ -29,6 +29,9 @@ const LEAVE_TYPE = {
 class Video extends Component {
   signCanvas = React.createRef();
   state = {
+    isWhiteboard: false,
+    isSelect: 'video',
+    isPDF: false,
     loading: false,
     isModalVisibleSign: false,
     titleModal: '人脸识别',
@@ -38,7 +41,6 @@ class Video extends Component {
     employeeNumber: '',
     employeeName: '',
     isModalVisibleInvitation: false,
-    isPDF: false,
     roomCustomerList: [],
     facialImg: '',
     isModalVisibleFacial: false,
@@ -50,7 +52,7 @@ class Video extends Component {
     voiceStatue: false,
     voiceImg: voiceImgOpen,
     isBigVideo: 'video1',
-    isCustomer: false,
+    isCustomer: true,
     publishDevic: 1,
     isSharedScreen: false,
     isSuspend: false,
@@ -61,13 +63,10 @@ class Video extends Component {
     workSpaceId: '',
     bizName: '',
     appId: '',
-    // room_server_url: 'wss://cn-hangzhou-mrtc.cloud.alipay.com/ws',
-    room_server_url: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
     channelId: this.props.roomId,
     rtoken: this.props.mtoken,
     sessionId: this.props.sessionId,
     imRoomId: this.props.imRoomId,
-    html_string: '<span style="color:red">123456</span>',
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -128,7 +127,7 @@ class Video extends Component {
     config_param.biz_name = this.state.bizName; // 'demo'
     config_param.appId = this.state.appId;
 
-    config_param.room_server_url = this.state.room_server_url;
+    config_param.room_server_url = this.props.roomServerUrl;
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
     this.test_controller.Connect(config_param)
@@ -419,25 +418,25 @@ class Video extends Component {
   };
   // 画中画
   pictureInPicture = () => {
-    const publish_config = {};
-    publish_config.media_type = 1;
-    publish_config.publish_device = 4;
-    publish_config.need_volume_analyser = true;
-    publish_config.video_profile_type = 3;
-    publish_config.part_of_screen_id = 'touBoxItem';
-    publish_config.publish_video_id = 'video3';
-    publish_config.publish_streamId_id = 'subscribe_streamId3';
-    // publish_config.publish_tag = 'sharedScreen'
-    this.test_controller.Publish(publish_config);
-    callNimIM('sendCustomCmdMsg', {
-      customId: this.state.imRoomId,
-      content: JSON.stringify({
-        'typeId': 2030,
-        'sessionId': this.state.sessionId,
-        'sharedScreen': 1,
-        'tellerId': this.props.tellerAccount
-      })
-    });
+    // const publish_config = {};
+    // publish_config.media_type = 1;
+    // publish_config.publish_device = 4;
+    // publish_config.need_volume_analyser = true;
+    // publish_config.video_profile_type = 3;
+    // publish_config.part_of_screen_id = 'touBoxItem';
+    // publish_config.publish_video_id = 'video3';
+    // publish_config.publish_streamId_id = 'subscribe_streamId3';
+    // // publish_config.publish_tag = 'sharedScreen'
+    // this.test_controller.Publish(publish_config);
+    // callNimIM('sendCustomCmdMsg', {
+    //   customId: this.state.imRoomId,
+    //   content: JSON.stringify({
+    //     'typeId': 2030,
+    //     'sessionId': this.state.sessionId,
+    //     'sharedScreen': 1,
+    //     'tellerId': this.props.tellerAccount
+    //   })
+    // });
     if (this.isFileSuccuse()) {
       const width = 640;
       const height = 480;
@@ -514,6 +513,16 @@ class Video extends Component {
         if (Mival.sessionId == this.state.sessionId) {
           this.endSession('customerHangUp')
         }
+      } else if (Mival.typeId == 1215) {
+        // 一炒多的图片
+        if (Mival.sessionId == this.state.sessionId) {
+          this.props.imgCallback(Mival.data.type, Mival.data.file) // 文字抄录和风险抄录，3--风险，，2--文字
+        }
+      } else if (Mival.typeId == 1216) {
+        // 签字回调
+        if (Mival.sessionId == this.state.sessionId) {
+          this.props.signatureCallback()
+        }
       }
     };
 
@@ -617,7 +626,7 @@ class Video extends Component {
 
     this.test_controller.OnCreateRoomSucc = (room_id, rtoken) => {
       console.log('创建房间成功', room_id, rtoken);
-      this.setState({ 
+      this.setState({
         channelId: room_id,
         rtoken: rtoken
       });
@@ -1048,7 +1057,8 @@ class Video extends Component {
         tellerId: this.props.tellerAccount
       });
       this.setState({
-        isCustomer: false
+        isCustomer: false,
+        isWhiteboard: false,
       });
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.TELLER_EXIT,
@@ -1087,34 +1097,37 @@ class Video extends Component {
     this.setState({
       loading: true,
     })
+    console.log(this.props.resourcePath + "/log4b.js")
     const _dependScripts = [
-      "https://counter-web.leimondata.cn:7199/log4b.js",
-      "https://counter-web.leimondata.cn:7199/meeting_api_util.js",
-      "https://counter-web.leimondata.cn:7199/mcu.js",
-      "https://counter-web.leimondata.cn:7199/client_record.js",
-      "https://counter-web.leimondata.cn:7199/meeting_vod.js",
-      "https://counter-web.leimondata.cn:7199/remote_record.js",
-      "https://counter-web.leimondata.cn:7199/meeting_invite.js",
-      "https://counter-web.leimondata.cn:7199/meeting_im.js",
-      "https://counter-web.leimondata.cn:7199/meeting_camera_stream.js",
-      "https://counter-web.leimondata.cn:7199/meeting_file_stream.js",
-      "https://counter-web.leimondata.cn:7199/meeting_desk_stream.js",
-      "https://counter-web.leimondata.cn:7199/meeting_html_stream.js",
-      "https://counter-web.leimondata.cn:7199/meeting_beautify_stream.js",
-      "https://counter-web.leimondata.cn:7199/stream.js",
-      "https://counter-web.leimondata.cn:7199/room.js",
-      "https://counter-web.leimondata.cn:7199/backgroundBlur.js",
-      "https://counter-web.leimondata.cn:7199/meeting_api.js",
-      "https://counter-web.leimondata.cn:7199/html2image.js",
-      "https://counter-web.leimondata.cn:7199/reconnecting-websocket.min.js",
-      "https://counter-web.leimondata.cn:7199/mtc_api.js",
-      "https://counter-web.leimondata.cn:7199/BandwidthHandler.js",
-      "https://gw.alipayobjects.com/os/lib/recordrtc/5.5.9/RecordRTC.min.js",
-      "https://counter-web.leimondata.cn:7199/pdf.js",
-      "https://counter-web.leimondata.cn:7199/EBML.js",
-      "https://counter-web.leimondata.cn:7199/adapter.js",
-      "https://counter-web.leimondata.cn:7199/beauty.js",
-      "https://counter-web.leimondata.cn:7199/getMediaInfo.js",
+      // https://counter-web.leimondata.cn:7199
+      this.props.resourcePath + "/log4b.js",
+      this.props.resourcePath + "/meeting_api_util.js",
+      this.props.resourcePath + "/mcu.js",
+      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/meeting_vod.js",
+      this.props.resourcePath + "/remote_record.js",
+      this.props.resourcePath + "/meeting_invite.js",
+      this.props.resourcePath + "/meeting_im.js",
+      this.props.resourcePath + "/meeting_camera_stream.js",
+      this.props.resourcePath + "/meeting_file_stream.js",
+      this.props.resourcePath + "/meeting_desk_stream.js",
+      this.props.resourcePath + "/meeting_html_stream.js",
+      this.props.resourcePath + "/meeting_beautify_stream.js",
+      this.props.resourcePath + "/stream.js",
+      this.props.resourcePath + "/room.js",
+      this.props.resourcePath + "/backgroundBlur.js",
+      this.props.resourcePath + "/meeting_api.js",
+      this.props.resourcePath + "/html2image.js",
+      this.props.resourcePath + "/reconnecting-websocket.min.js",
+      this.props.resourcePath + "/mtc_api.js",
+      this.props.resourcePath + "/BandwidthHandler.js",
+      this.props.resourcePath + "/RecordRTC.min.js",
+      // "https://gw.alipayobjects.com/os/lib/recordrtc/5.5.9/RecordRTC.min.js",
+      this.props.resourcePath + "/pdf.js",
+      this.props.resourcePath + "/EBML.js",
+      this.props.resourcePath + "/adapter.js",
+      this.props.resourcePath + "/beauty.js",
+      this.props.resourcePath + "/getMediaInfo.js",
     ]
     const that = this
     let i = 0
@@ -1169,8 +1182,8 @@ class Video extends Component {
     } else {
       setTimeout(() => {
         this.setState({
-          screenName: this.props.intl.formatMessage({id: 'shareScreen'}),
-          suspendName: this.props.intl.formatMessage({id: 'suspend'}),
+          screenName: this.props.intl.formatMessage({ id: 'shareScreen' }),
+          suspendName: this.props.intl.formatMessage({ id: 'suspend' }),
         })
       }, 50);
       this.addToScript()
@@ -1288,24 +1301,60 @@ class Video extends Component {
     if (this.isFileSuccuse()) {
       const publish_config = {};
       if (this.state.isSharedScreen) {
-        publish_config.publish_device = 1;
-        publish_config.media_type = 1;
-        publish_config.sid = document.getElementById('publish_video1').name;
-        publish_config.video_profile_type = 5;
-        this.test_controller.ChangeMediaStream(publish_config);
+        if (this.state.isWhiteboard) {
+          publish_config.publish_device = 4
+          publish_config.media_type = 1
+          publish_config.sid = document.getElementById('video10').name
+          publish_config.part_of_screen_id = 'touBoxItem'
+          publish_config.video_profile_type = 5
+          this.test_controller.ChangeMediaStream(publish_config);
+          this.setState({
+            isPDF: true,
+            isSelect: 'noVideo',
+          })
+        } else {
+          this.test_controller.UnPublish(document.getElementById('video10').name)
+          this.setState({
+            isPDF: false,
+            isSelect: 'video',
+          })
+        }
         this.setState({
           publishDevic: 1,
           isSharedScreen: false,
+          
           screenName: '投屏'
         });
       } else {
-        publish_config.media_type = 1;
-        publish_config.publish_device = 2;
-        publish_config.video_profile_type = 5;
-        publish_config.sid = document.getElementById('publish_video1').name;
-        this.test_controller.ChangeMediaStream(publish_config);
+        if (document.getElementById('video10').name) {
+          publish_config.media_type = 1;
+          publish_config.publish_device = 2;
+          publish_config.video_profile_type = 5;
+          publish_config.sid = document.getElementById('video10').name;
+          this.test_controller.ChangeMediaStream(publish_config);
+        } else {
+          publish_config.media_type = 1
+          publish_config.publish_device = 2
+          publish_config.need_volume_analyser = true
+          publish_config.video_profile_type = 5
+          publish_config.publish_video_id = 'video10'
+          publish_config.publish_streamId_id = 'subscribe_streamId10'
+          publish_config.publish_tag = ''
+          this.test_controller.Publish(publish_config)
+        }
+
+
+        // publish_config.media_type = 1;
+        // publish_config.publish_device = 2;
+        // publish_config.video_profile_type = 5;
+        // publish_config.sid = document.getElementById('publish_video1').name;
+        // this.test_controller.ChangeMediaStream(publish_config);
         this.setState({
-          publishDevic: 2
+          publishDevic: 2,
+          isSelect: 'noVideo',
+          isSharedScreen: true,
+          screenName: '取消共享',
+          isPDF: false
         })
       }
     }
@@ -1493,7 +1542,7 @@ class Video extends Component {
     })
   }
   componentWillReceiveProps(props) {
-    this.setState({ 
+    this.setState({
       channelId: props.roomId,
       rtoken: props.mtoken,
       sessionId: props.sessionId,
@@ -1541,83 +1590,159 @@ class Video extends Component {
       file: this.signCanvas.current.canvas.drawing.toDataURL('image/png')
     })
   }
-  render() {
+  switchExternal = () => {
+    if(!this.state.isWhiteboard) {
+      const publish_config = {};
+      this.setState({
+        isPDF: true,
+        isWhiteboard: true,
+        isSelect: 'noVideo',
+      })
+      if (document.getElementById('video10').name) {
+        // 代表已经有了进行切流
+        publish_config.publish_device = 4
+        publish_config.media_type = 1
+        publish_config.sid = document.getElementById('video10').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 = 'video10'
+        publish_config.publish_streamId_id = 'subscribe_streamId10'
+        publish_config.publish_tag = ''
+        this.test_controller.Publish(publish_config)
+      }
+    } else{
+      message.success('当前已经切换RM白板')
+    }
+    
+
+  }
+  switchSelect = () => {
+    if (this.state.isSelect == 'video') {
+      if (document.getElementById('video10').name) {
+        this.setState({
+          isSelect: 'noVideo',
+        })
+      } else {
+        message.success('当前无签字白板')
+      }
 
+    } else {
+      this.setState({
+        isSelect: 'video',
+      })
+    }
+  }
+  render() {
+    var pdfChildren
+    if (this.props.children) {
+      pdfChildren = React.cloneElement(this.props.children, { width: 100, height: 100, id: 12 })
+    }
     return (
-      
       <div className="all">
         <Spin spinning={this.state.loading} tip="视频初始化中...">
-        <Header></Header>
-        <div className="health">
-          <div className="wrapper">
-            <div
-              className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
-              // className="itemed item1"
-              style={{ position: "relative" }}
-              onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
-            >
-              {
-                this.state.customAudioed && <img
-                  alt=""
-                  src={require("../../assets/img/yingpin.png").default}
-                  style={{ width: "100%", height: "100%" }}
-                ></img>
-              }
-              <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
-                <video
-                  id="video1"
-                  autoPlay
-                  muted={true}
-                  className="video1"
-                />
-                <audio id="audio1" autoPlay />
-                <label style={{ display: 'none' }} id="feedId1" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView1" width="70" height="70"></canvas>
+          <Header></Header>
+          <div className="health">
+            <div className="projection">
+              <div className="button">
+                <div className={`${this.state.isSelect == 'video' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>视频画面</div>
+                <div className={`${this.state.isSelect == 'noVideo' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>投屏白板</div>
+              </div>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'noVideo') ? '' : 'none', }}>
+                <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
+                  {pdfChildren}
+                </div>
+                <div style={this.state.isPDF ? { display: 'none' } : {}}>
+                  <video
+                    id="video10"
+                    autoPlay
+                    muted={true}
+                    className="video"
+                  />
+                  <audio id="audio10" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId10" type="text" />
+                  {/* <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView10" width="70" height="70"></canvas> */}
+
+                </div>
+
               </div>
             </div>
-            <div
-              className={`itemed ${this.state.isSharedScreen || this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'item1 isBack' : (this.state.isCustomer ? 'isBack' : 'itemPublic'))}`}
-              onClick={this.enlargeClick.bind(this, 'isLangPublishVideo1')}
-            >
-              <div className="publishVideoDiv">
+            <div className="wrapper">
+              <div
+                className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
+                // className="itemed item1"
+                style={{ position: "relative" }}
+                onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
+              >
                 {
-                  this.state.audioed && <img
+                  this.state.customAudioed && <img
                     alt=""
                     src={require("../../assets/img/yingpin.png").default}
-                    className="imgClass"
-                  />
+                    style={{ width: "100%", height: "100%" }}
+                  ></img>
                 }
-                {
-                  this.state.isSuspend && <img
-                    alt=""
-                    src={require("../../assets/img/zanTing.png").default}
-                    className="imgClass"
+                <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
+                  <video
+                    id="video1"
+                    autoPlay
+                    muted={true}
+                    className="video1"
                   />
-                }
-                {
+                  <audio id="audio1" autoPlay />
+                  <label style={{ display: 'none' }} id="feedId1" type="text" />
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView1" width="70" height="70"></canvas>
+                </div>
+              </div>
+              <div
+                className={`itemed ${this.state.publishDevic == 4 ? '' : (this.state.isBigVideo == 'publish_video1' ? 'item1 isBack' : (this.state.isCustomer ? 'isBack' : 'itemPublic'))}`}
+                onClick={this.enlargeClick.bind(this, 'isLangPublishVideo1')}
+              >
+                <div className="publishVideoDiv">
+                  {
+                    this.state.audioed && <img
+                      alt=""
+                      src={require("../../assets/img/yingpin.png").default}
+                      className="imgClass"
+                    />
+                  }
+                  {
+                    this.state.isSuspend && <img
+                      alt=""
+                      src={require("../../assets/img/zanTing.png").default}
+                      className="imgClass"
+                    />
+                  }
+                  {/* {
                   this.state.isSharedScreen && <span
                     className="sharedScreen"
                   >
                     屏幕共享中
                   </span>
-                }
-                <video
-                  style={{ display: (!this.state.audioed && !this.state.isSuspend) ? '' : 'none', }}
-                  id="publish_video1"
-                  className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
-                  onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
-                  autoPlay
-                  muted={true}
-                />
-                <audio id="audio1" autoPlay />
-                <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="70" height="70"></canvas>
+                } */}
+                  <video
+                    style={{ display: (!this.state.audioed && !this.state.isSuspend) ? '' : 'none', }}
+                    id="publish_video1"
+                    className={`publishVideoClass ${this.state.isCustomer ? '' : "videoFit"}`}
+                    onClick={this.enlargeClick.bind(this, 'isLangVideo2')}
+                    autoPlay
+                    muted={true}
+                  />
+                  <audio id="audio1" autoPlay />
+                  <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="70" height="70"></canvas>
+                </div>
+
               </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
 
-            </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
-              {
-                !this.state.isPDF ? <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+                <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
                   <video
                     id="video2"
                     autoPlay
@@ -1628,147 +1753,146 @@ class Video extends Component {
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView2" width="70" height="70"></canvas>
                 </div>
-                  :
-                  <div className="video" id="touBoxItem">
-                  </div>
-              }
-
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
+                onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
+                <video
+                  id="video3"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio3" autoPlay />
+                <label style={{ display: 'none' }} id="feedId3" type="text" />
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView3" width="70" height="70"></canvas>
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
+                onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
+                <video
+                  id="video4"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio4" autoPlay />
+                <label style={{ display: 'none' }} id="feedId4" type="text" />
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView4" width="70" height="70"></canvas>
+              </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
+                onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
+                <video
+                  id="video5"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio5" autoPlay />
+                <label style={{ display: 'none' }} id="feedId5" type="text" />
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView5" width="70" height="70"></canvas>
+              </div>
+              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
+                {/* <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
+                       {pdfChildren}
+                       </div> */}
+                {/* <div style={this.state.isPDF ? {display:  'none'}: {}}> */}
+                <video
+                  id="video6"
+                  autoPlay
+                  muted={true}
+                  className="video"
+                />
+                <audio id="audio6" autoPlay />
+                <label style={{ display: 'none' }} id="feedId6" type="text" />
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="70" height="70"></canvas>
+                {/* </div> */}
 
+              </div>
             </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
-              onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
-              <video
-                id="video3"
-                autoPlay
-                muted={true}
-                className="video"
-              />
-              <audio id="audio3" autoPlay />
-              <label style={{ display: 'none' }} id="feedId3" type="text" />
-              <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView3" width="70" height="70"></canvas>
-            </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
-              onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
-              <video
-                id="video4"
-                autoPlay
-                muted={true}
-                className="video"
-              />
-              <audio id="audio4" autoPlay />
-              <label style={{ display: 'none' }} id="feedId4" type="text" />
-              <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView4" width="70" height="70"></canvas>
-            </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
-              onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
-              <video
-                id="video5"
-                autoPlay
-                muted={true}
-                className="video"
-              />
-              <audio id="audio5" autoPlay />
-              <label style={{ display: 'none' }} id="feedId5" type="text" />
-              <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView5" width="70" height="70"></canvas>
-            </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video6' ? 'item1' : ""}`}
-              onClick={this.enlargeClick.bind(this, 'isLangVideo6')}>
-              <video
-                id="video6"
-                autoPlay
-                muted={true}
-                className="video"
-              />
-              <audio id="audio6" autoPlay />
-              <label style={{ display: 'none' }} id="feedId6" type="text" />
-              <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="70" height="70"></canvas>
-            </div>
-          </div>
 
-        </div>
-        <Foot
-          img={this.state.voiceImg}
-          screenName={this.state.screenName}
-          suspendName={this.state.suspendName}
-          cameraImg={this.state.cameraImg}
-          customerList={this.state.customerList}
-          suspend={this.suspend}
-          voice={this.voice}
-          cameraClick={this.cameraClick}
-          sharedScreen={this.sharedScreen}
-          endSession={this.endSession}
-          facialRecognition={this.facialRecognition}
-          pictureInPicture={this.pictureInPicture}
-          transcribingClick={this.transcribingClick}
-          invitationClick={this.invitationClick}
-          customerFaceClick={this.customerFaceClick}
-          ocrClick={this.ocrClick}
-        ></Foot>
-        <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
-          onCancel={this.handleCancel}>
-          {
-            this.state.isSuspend && <span>确定是否恢复会话？</span>
-          }
-          {
-            !this.state.isSuspend && <span>确定是否暂停会话？</span>
-          }
-        </Modal>
-        <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisibleEnd} onOk={this.handleOkEnd}
-          onCancel={this.handleCancelEnd}>
-          <span>确定是否结束会话？</span>
-        </Modal>
-        <Modal title={this.state.titleModal} cancelText="取消" okText="确定" visible={this.state.isModalVisibleFacial}
-          onOk={this.handleOkFacial} onCancel={this.handleCancelFacial}>
-          <div className="faceBody">
-            <img className="faceImg" src={this.state.facialImg} alt=""></img>
           </div>
+          <Foot
+            img={this.state.voiceImg}
+            screenName={this.state.screenName}
+            suspendName={this.state.suspendName}
+            cameraImg={this.state.cameraImg}
+            customerList={this.state.customerList}
+            suspend={this.suspend}
+            voice={this.voice}
+            cameraClick={this.cameraClick}
+            sharedScreen={this.sharedScreen}
+            endSession={this.endSession}
+            facialRecognition={this.facialRecognition}
+            pictureInPicture={this.pictureInPicture}
+            transcribingClick={this.transcribingClick}
+            invitationClick={this.invitationClick}
+            customerFaceClick={this.customerFaceClick}
+            ocrClick={this.ocrClick}
+            switchExternal={this.switchExternal}
+          ></Foot>
+          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
+            onCancel={this.handleCancel}>
+            {
+              this.state.isSuspend && <span>确定是否恢复会话？</span>
+            }
+            {
+              !this.state.isSuspend && <span>确定是否暂停会话？</span>
+            }
+          </Modal>
+          <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisibleEnd} onOk={this.handleOkEnd}
+            onCancel={this.handleCancelEnd}>
+            <span>确定是否结束会话？</span>
+          </Modal>
+          <Modal title={this.state.titleModal} cancelText="取消" okText="确定" visible={this.state.isModalVisibleFacial}
+            onOk={this.handleOkFacial} onCancel={this.handleCancelFacial}>
+            <div className="faceBody">
+              <img className="faceImg" src={this.state.facialImg} alt=""></img>
+            </div>
 
-        </Modal>
-        <Modal title="新增预约" visible={this.state.isModalVisibleInvitation} footer={[
-          <Button type="primary" danger onClick={this.handleOkInvitation}>发送</Button>,
-          <Button onClick={this.handleCancelInvitation}>取消</Button>
-        ]}>
-          <div>
-            <div>输入员工号：</div>
-            <div className="invitationDiv">
-              <input className="inputClick" placeholder="请输入员工号" value={this.state.employeeNumber} onChange={e => this.handleChange(e)}></input>
-              <span className="invitationSpan" onClick={this.queryStaff}>查 询</span>
+          </Modal>
+          <Modal title="新增预约" visible={this.state.isModalVisibleInvitation} footer={[
+            <Button type="primary" danger onClick={this.handleOkInvitation}>发送</Button>,
+            <Button onClick={this.handleCancelInvitation}>取消</Button>
+          ]}>
+            <div>
+              <div>输入员工号：</div>
+              <div className="invitationDiv">
+                <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>
+              </div>
             </div>
-            <div className="invitationDiv">
-              <input className="inputClick" readonly value={this.state.employeeName}></input>
+          </Modal>
+          <Modal title="签字白板" closable={false} visible={this.state.isModalVisibleSign} footer={
+            [
+              <Button type="primary" danger onClick={this.handleOkSign}>确定</Button>
+            ]
+          }>
+            <div className="content">
+              <CanvasDraw
+                ref={this.signCanvas}
+                brushColor="#000"
+                brushRadius={3}
+                lazyRadius={2}
+                canvasWidth="100%"
+                canvasHeight="100%"
+                hideGrid={true}
+              ></CanvasDraw>
             </div>
-          </div>
-        </Modal>
-        <Modal title="签字白板" closable={false} visible={this.state.isModalVisibleSign} footer={
-          [
-            <Button type="primary" danger onClick={this.handleOkSign}>确定</Button>
-          ]
-        }>
-          <div className="content">
-            <CanvasDraw
-              ref={this.signCanvas}
-              brushColor="#000"
-              brushRadius={3}
-              lazyRadius={2}
-              canvasWidth="100%"
-              canvasHeight="100%"
-              hideGrid={true}
-            ></CanvasDraw>
-          </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>
-          </Spin>
-      </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>
+        </Spin>
+      </div>);
   }
 }
 Video.defaultProps = {
   tellerAccount: 't001',
   businessNumber: '123',
   callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
-
+  roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+  resourcePath: 'https://counter-web.leimondata.cn:7199',
 }
 export default Video