react_hsbc_teller 0.2.3 → 0.2.7

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,8 @@ const LEAVE_TYPE = {
 class Video extends Component {
   signCanvas = React.createRef();
   state = {
+    isWhiteboard: false,
+    isSelect: 'video',
     isPDF: false,
     loading: false,
     isModalVisibleSign: 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,
@@ -75,8 +77,8 @@ class Video extends Component {
   createRoom = async () => {
     try {
       let result = await API.createRoom({
-        tellerAccount: this.props.tellerAccount,
-        businessNumber: this.props.businessNumber,
+        staffId: this.props.tellerAccount,
+        activityId: this.props.businessNumber,
         callbackUrl: this.props.callbackUrl,
         roomId: this.state.channelId,
         mtoken: this.state.rtoken
@@ -88,8 +90,16 @@ class Video extends Component {
       });
       // eslint-disable-next-line no-undef
       joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
+      this.props.createRoomCallback({
+        type: 1,
+        errorManage: ''
+      })
     } catch (err) {
       console.error(err);
+      this.props.createRoomCallback({
+        type: 2,
+        errorManage: '保存房间信息失败'
+      })
     }
   };
   /**
@@ -113,6 +123,7 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
+      this.roomCallBack(2,'签名失败')
     }
   };
   handleEdit = () => {
@@ -416,27 +427,53 @@ 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 list = []
+      if(document.getElementById('video1').name) {
+        list.push('video1')
+      }
+      if(document.getElementById('publish_video1').name) {
+        list.push('publish_video1')
+      }
+      if(document.getElementById('video2').name) {
+        list.push('video2')
+      }
+      if(document.getElementById('video3').name) {
+        list.push('video3')
+      }
+      if(document.getElementById('video4').name) {
+        list.push('video4')
+      }
+      if(document.getElementById('video5').name) {
+        list.push('video5')
+      }
+      if(document.getElementById('video6').name) {
+        list.push('video6')
+      }
+      if(document.getElementById('video10').name) {
+        list.push('video10')
+      }
+      console.log(list)
+      const width = 320 * list.length;
       const height = 480;
       const canvas = document.createElement('canvas');
       const cobj = canvas.getContext('2d'); // 获取绘图环境
@@ -444,7 +481,9 @@ class Video extends Component {
       canvas.height = height;
       let interval = setInterval(() => {
         cobj.clearRect(0, 0, width, height);
-        let videoId = 'publish_video1';
+        for(let i=0;i<list.length;i++){
+          
+        let videoId = list[i];
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
         let videoHeight = videoDiv.videoHeight;
@@ -455,20 +494,34 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 320 / videoWidth;
         }
-        cobj.drawImage(videoDiv, 0, 480 - newVideoHeight, newVideoWidth, newVideoHeight);
-
-        let subscribeVideo = 'video1';
-        let subscribeVideoDiv = document.getElementById(subscribeVideo);
-        let subscribeVideoDivWidth = subscribeVideoDiv.videoWidth;
-        let subscribeVideoDivHeight = subscribeVideoDiv.videoHeight;
-        let newVideoWidth1 = 320;
-        let newVideoHeight1 = 480;
-        if (subscribeVideoDivHeight * 320 / subscribeVideoDivWidth > 480) {
-          newVideoWidth1 = subscribeVideoDivWidth * 480 / subscribeVideoDivHeight;
-        } else {
-          newVideoHeight1 = subscribeVideoDivHeight * 320 / subscribeVideoDivWidth;
+        cobj.drawImage(videoDiv, 320 * i, 480 - newVideoHeight, 320, newVideoHeight);
         }
-        cobj.drawImage(subscribeVideoDiv, 320, 480 - newVideoHeight1, newVideoWidth1, 80);
+        // cobj.clearRect(0, 0, width, height);
+        // let videoId = 'publish_video1';
+        // let videoDiv = document.getElementById(videoId);
+        // let videoWidth = videoDiv.videoWidth;
+        // let videoHeight = videoDiv.videoHeight;
+        // let newVideoWidth = 320;
+        // let newVideoHeight = 480;
+        // if (videoHeight * 320 / videoWidth > 480) {
+        //   newVideoWidth = videoWidth * 480 / videoHeight;
+        // } else {
+        //   newVideoHeight = videoHeight * 320 / videoWidth;
+        // }
+        // cobj.drawImage(videoDiv, 0, 480 - newVideoHeight, newVideoWidth, newVideoHeight);
+
+        // let subscribeVideo = 'video1';
+        // let subscribeVideoDiv = document.getElementById(subscribeVideo);
+        // let subscribeVideoDivWidth = subscribeVideoDiv.videoWidth;
+        // let subscribeVideoDivHeight = subscribeVideoDiv.videoHeight;
+        // let newVideoWidth1 = 320;
+        // let newVideoHeight1 = 480;
+        // if (subscribeVideoDivHeight * 320 / subscribeVideoDivWidth > 480) {
+        //   newVideoWidth1 = subscribeVideoDivWidth * 480 / subscribeVideoDivHeight;
+        // } else {
+        //   newVideoHeight1 = subscribeVideoDivHeight * 320 / subscribeVideoDivWidth;
+        // }
+        // cobj.drawImage(subscribeVideoDiv, 320, 480 - newVideoHeight1, newVideoWidth1, newVideoHeight1);
 
       }, 100);
       const captureStream = canvas.captureStream();
@@ -492,6 +545,19 @@ class Video extends Component {
       });
     }
   };
+  roomCallBack=(type,manege) =>{
+    if (this.state.sessionId) {
+      this.props.joinRoomCallback({
+        type: type,
+        errorManage: manege
+      })
+    }else {
+      this.props.createRoomCallback({
+        type: type,
+        errorManage: manege
+      })
+    }
+  }
   mountClick = () => {
     window.IMEvt = msg => {
       console.log(JSON.parse(msg));
@@ -511,6 +577,38 @@ 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()
+        }
+      } else if (Mival.typeId == 1218) {
+        if (Mival.sessionId == this.state.sessionId) {
+          // 1-开启，2-关闭
+          if(Mival.type == 1) {
+            this.switchExternal()
+          } else if(Mival.type == 2) {
+            if(this.state.isSharedScreen) {
+              this.setState({
+                isWhiteboard: false,
+              })
+            }else {
+              this.test_controller.UnPublish(document.getElementById('video10').name)
+              this.setState({
+                isPDF: false,
+                isSelect: 'video',
+                isWhiteboard: false,
+              })
+            }
+          }
+          
+        }
+        
       }
     };
 
@@ -585,6 +683,7 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
+      this.roomCallBack(2,'连接失败')
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -598,6 +697,7 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
+      this.roomCallBack(2,'初始化失败')
     };
     // 初始化成功回调
     this.test_controller.OnInitRoomConfigOK = () => {
@@ -614,7 +714,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
       });
@@ -623,6 +723,7 @@ class Video extends Component {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
+      this.roomCallBack(2,'创建失败')
     };
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
@@ -639,10 +740,12 @@ class Video extends Component {
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
+      this.roomCallBack(1,'')
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
+      this.roomCallBack(2,'加入失败')
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
@@ -1045,7 +1148,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,
@@ -1084,37 +1188,23 @@ class Video extends Component {
     this.setState({
       loading: true,
     })
-    console.log( this.props.resourcePath + "/log4b.js")
     const _dependScripts = [
       // https://counter-web.leimondata.cn:7199
-      this.props.resourcePath + "/log4b.js",
-      this.props.resourcePath + "/meeting_api_util.js",
+      this.props.resourcePath + "/adapter.js",
+      this.props.resourcePath + "/getMediaInfo.js",
+      this.props.resourcePath + "/pdf.js",
+      this.props.resourcePath + "/EBML.js",
       this.props.resourcePath + "/mcu.js",
-      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/meeting_desk_stream.js",
+      this.props.resourcePath + "/meeting_html_stream.js",
+      this.props.resourcePath + "/meeting_file_stream.js",
+      this.props.resourcePath + "/meeting_im.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 + "/client_record.js",
+      this.props.resourcePath + "/remote_record.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 +1259,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 +1378,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 +1619,7 @@ class Video extends Component {
     })
   }
   componentWillReceiveProps(props) {
-    this.setState({ 
+    this.setState({
       channelId: props.roomId,
       rtoken: props.mtoken,
       sessionId: props.sessionId,
@@ -1541,96 +1667,158 @@ class Video extends Component {
       file: this.signCanvas.current.canvas.drawing.toDataURL('image/png')
     })
   }
-  switchExternal=()=>{
-    if(this.state.isPDF){
+  switchExternal = () => {
+    if(!this.state.isWhiteboard) {
+      const publish_config = {};
       this.setState({
-        isPDF: false,
-        isBigVideo: 'video1'
+        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({
-        isPDF: true,
-        isBigVideo: 'video6'
+        isSelect: 'video',
       })
     }
-    
   }
   render() {
-    const pdfChildren = React.cloneElement(this.props.children,{width: 100, height: 100, id: 12})
+    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 className="videoDiv"  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="20" height="50"></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="20" height="50"></canvas>
+                </div>
+
               </div>
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
 
-            </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
-              
                 <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
                   <video
                     id="video2"
@@ -1640,143 +1828,141 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <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>
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView2" width="20" height="50"></canvas>
                 </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' ? (this.state.isPDF ? 'item1' : 'item1 itemed') : "itemed"}`}>
-                       <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
+              </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="20" height="50"></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="20" height="50"></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="20" height="50"></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 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="20" height="50"></canvas>
+                {/* </div> */}
+
               </div>
-          </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}
-          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>
+          <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="400" height="400"
+            webkit-playsinline="true" playsInline={true} x5-playsinline="x5-playsinline"
+            x-webkit-airplay="true"></video>
+        </Spin>
+      </div>);
   }
 }
 Video.defaultProps = {
@@ -1784,6 +1970,6 @@ Video.defaultProps = {
   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',
+  resourcePath: 'https://counter-web.leimondata.cn:7199',
 }
 export default Video