react_hsbc_teller 1.1.1 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.1.1",
+  "version": "1.1.4",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/foot/foot.jsx

@@ -36,9 +36,6 @@ export default class foot extends Component {
     customerFaceClick=(item)=>{
         this.props.customerFaceClick(item)
     }
-    switchExternal=()=>{
-        this.props.switchExternal()
-    }
     facialHandleVisibleChange = visible => {
         console.log(visible)
         this.props.facialHandleVisibleChange(visible)
@@ -53,8 +50,11 @@ export default class foot extends Component {
       screenSwitching =()=>{
           this.props.screenSwitching()
       }
+      switchExternal=()=>{
+        this.props.switchExternal()
+    }
     render() {
-        const {clickedOcr,clickedFacial,img,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName} = this.props
+        const {clickedOcr,clickedFacial,img,isWhiteboard,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName} = this.props
         const content = (
             <div>
               {customerList.map((item,index)=>{
@@ -69,6 +69,17 @@ export default class foot extends Component {
           );
           const defaultList = (
               <div className="total totalTwo">
+                  {
+                      isWhiteboard&&<div className='footHover' onClick={this.switchExternal.bind(this)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
+                          <div className="text">
+                              白板
+                          </div>
+                      </div>
+                      </div>
+                  }
+                  
                   {
                       menus.map((item,index)=>{
                           return <div key={index}className='footHover'>

package/packages/pages/video/video.jsx

@@ -30,6 +30,7 @@ const LEAVE_TYPE = {
 let pictureInPictureVideo
 let mix_stream
 let worker
+let streamShare
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -157,11 +158,7 @@ class Video extends Component {
       });
       console.log(result);
       this.state.imRoomId = result.imRoomId,
-      this.state.sessionId = result.sessionId,
-      this.setState({
-
-        loading: false,
-      });
+      this.state.sessionId = result.sessionId;
       let publish_config = {}
       publish_config.media_type = 1
       publish_config.publish_device = 1
@@ -585,6 +582,9 @@ class Video extends Component {
     }
   };
   endSessionValue = () => {
+    if(streamShare) {
+      streamShare.getTracks().forEach(track => track.stop());
+    }
       this.finishSession()
     
   };
@@ -773,7 +773,7 @@ class Video extends Component {
         cobj.fill();
         cobj.stroke();
         cobj.beginPath();
-        cobj.font = "28px serif";
+        cobj.font = "normal lighter 25px sans-serif";
         cobj.textAlign = 'left';
         cobj.lineWidth = 1;
         // 文字
@@ -1155,10 +1155,16 @@ class Video extends Component {
           } else if (Mival.type == 2) {
             this.tabTitlesClick('RMWhiteboard', 'delect')
             if (this.state.isSharedScreen) {
-              this.state.isWhiteboard = false
+              this.setState({
+                isWhiteboard: false
+              })
             } else {
-              this.test_controller.UnPublish(document.getElementById('video20').name)
-              this.state.isWhiteboard = false
+              if(document.getElementById('video20').name) {
+                this.test_controller.UnPublish(document.getElementById('video20').name)
+              }
+              this.setState({
+                isWhiteboard: false
+              })
             }
           }
 
@@ -1527,7 +1533,7 @@ 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) {
+      if(code == 5004 || code == 5007) {
         this.roomCallBack(2, '媒体链路连接异常/超时',8)
       }
     };
@@ -1582,6 +1588,10 @@ class Video extends Component {
         });
       } 
       if(sid == document.getElementById('publish_video1').name) {
+        this.setState({
+
+          loading: false,
+        });
         this.enterRoom()
         this.timer = setInterval(
           () => {
@@ -2832,20 +2842,23 @@ class Video extends Component {
     console.log('投屏')
     if (this.isFileSuccuse()) {
       const publish_config = {};
+      if(streamShare) {
+        streamShare.getTracks().forEach(track => track.stop());
+      }
       if (this.state.isSharedScreen) {
-        if (this.state.isWhiteboard) {
-          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);
-          this.setState({
-            isPDF: true,
-          })
-        } else {
+        // if (this.state.isWhiteboard) {
+        //   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);
+        //   this.setState({
+        //     isPDF: true,
+        //   })
+        // } else {
           this.test_controller.UnPublish(document.getElementById('video20').name)
-        }
+        // }
         this.state.isSharedScreen = false
         this.state.isScreenSwitching = false
         this.setState({
@@ -3266,30 +3279,123 @@ class Video extends Component {
       this.signCanvas.current.canvas.drawing.toDataURL('image/png').replace(/data.+?;base64,/, "")
     )
   }
+  switchExternalAge = ()=>{
+    const that = this
+    if(this.state.isSharedScreen) {
+      this.state.isSharedScreen = false
+      this.setState({
+        
+        screenName: '共享模式'
+      });
+      this.tabTitlesClick('RMScreen', 'delect')
+      if (this.state.isPictureInPicture) {
+        document.exitPictureInPicture()
+      }
+    }
+
+    const publish_config = {};
+    const canvas = document.createElement('canvas');
+    const videoMedia = document.getElementById('manedvideo');
+    const cobj = canvas.getContext('2d'); // 获取绘图环境
+    const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
+    const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
+    const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+    const bottom = document.getElementById("whiteboardDIV").getBoundingClientRect().bottom
+    const width = right - left + 10
+    const height = bottom - top - 33
+    canvas.width = width;
+    canvas.height = height;
+  videoMedia.addEventListener('play', (event) =>{
+      var $this = this; //cache
+      console.log('addEventListener',!$this.paused,!$this.ended)
+      loop()
+      function loop() {
+          if (!$this.paused && !$this.ended) {
+            cobj.drawImage(videoMedia, left-10, top, 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.degradationType=2
+        publish_config.sid = document.getElementById('video20').name
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.video_profile_type = 9
+        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 = 9
+        publish_config.degradationType=2
+        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,
+      preferCurrentTab:true,
+  })
+  .then((stream) => {
+    videoMedia.srcObject = stream;
+    streamShare = stream
+    stream.getVideoTracks()[0].onended = async ()=>{
+      //单击停止共享按钮后，触发这个事件
+      if(document.getElementById('video20').name && !this.state.isSharedScreen) {
+        that.test_controller.UnPublish(document.getElementById('video20').name)
+      }
+      }
+  }, error => {
+      console.log("Unable to acquire screen capture", error);
+  });
+  }
   switchExternal = () => {
+    const that = this
     if (!this.state.isWhiteboard) {
       const publish_config = {};
-      this.state.isWhiteboard = true
+      this.setState({
+        isWhiteboard: true
+      })
       this.tabTitlesClick({
         value: 'RMWhiteboard',
         name: 'RM白板'
       }, 'add')
-      const width = this.state.whiteboardWidth;
-      const height = this.state.whiteboardHeight;
+      if(this.state.isSharedScreen) {
+        this.state.isSharedScreen = false
+        this.setState({
+          
+          screenName: '共享模式'
+        });
+        this.tabTitlesClick('RMScreen', 'delect')
+        if (this.state.isPictureInPicture) {
+          document.exitPictureInPicture()
+        }
+      }
       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;
+      const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
+      const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
+      const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+      const bottom = document.getElementById("whiteboardDIV").getBoundingClientRect().bottom
+      const width = right - left + 10
+      const height = bottom - top - 33
       canvas.width = width;
       canvas.height = height;
       videoMedia.addEventListener('play', (event) =>{
         var $this = this; //cache
-        console.log('333111',!$this.paused,!$this.ended)
+        console.log('addEventListener',!$this.paused,!$this.ended)
         loop()
         function loop() {
             if (!$this.paused && !$this.ended) {
-              cobj.drawImage(videoMedia, 0, 0, width, height, 0, 0,width, height,);
+              cobj.drawImage(videoMedia, left-10, top, width, height, 0, 0,width, height,);
                 setTimeout(loop, 1000 / 10); // drawing at 30fps
             }
         }
@@ -3298,16 +3404,18 @@ class Video extends Component {
           // 代表已经有了进行切流
           publish_config.publish_device = 5
           publish_config.media_type = 1
+          publish_config.degradationType=2
           publish_config.sid = document.getElementById('video20').name
           publish_config.stream = canvas.captureStream(10)
-          publish_config.video_profile_type = 5
+          publish_config.video_profile_type = 9
           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.video_profile_type = 9
+          publish_config.degradationType=2
           publish_config.stream = canvas.captureStream(10)
           publish_config.publish_video_id = 'video20'
           publish_config.publish_streamId_id = 'subscribe_streamId10'
@@ -3316,33 +3424,21 @@ class Video extends Component {
         }
     }, 0);
       navigator.mediaDevices.getDisplayMedia({
-        video: true
+        video: true,
+        preferCurrentTab:true,
     })
     .then((stream) => {
       videoMedia.srcObject = stream;
+      streamShare = stream
+      stream.getVideoTracks()[0].onended = async ()=>{
+        //单击停止共享按钮后，触发这个事件
+        if(document.getElementById('video20').name&&!this.state.isSharedScreen) {
+          that.test_controller.UnPublish(document.getElementById('video20').name)
+        }
+        }
     }, 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')
 
@@ -3405,8 +3501,8 @@ class Video extends Component {
     var box=document.getElementById("whiteboardDIV");
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
             this.state.whiteboardWidth = box.offsetWidth,
-            this.state.whiteboardHeight = box.offsetHeight,
-           console.log('whiteboardDIV', this.state.whiteboardHeight,this.state.whiteboardWidth)
+            this.state.whiteboardHeight = box.offsetHeight  * 0.92,
+           console.log('whiteboardDIV', this.state.whiteboardHeight,box.clientHeight,this.state.whiteboardWidth)
        }
   }
   render() {
@@ -3975,6 +4071,7 @@ class Video extends Component {
             customerList={this.state.customerList}
             clickedOcr={this.state.clickedOcr}
             clickedFacial={this.state.clickedFacial}
+            isWhiteboard={this.state.isWhiteboard}
             {...this.props}
             suspend={this.suspend}
             facialHandleVisibleChange={this.facialHandleVisibleChange}
@@ -3989,7 +4086,7 @@ class Video extends Component {
             invitationClick={this.invitationClick}
             customerFaceClick={this.customerFaceClick}
             ocrClick={this.ocrClick}
-            switchExternal={this.switchExternal}
+            switchExternal={this.switchExternalAge}
             inspection={this.inspection}
             screenSwitching={this.screenSwitching}
           ></Foot>
@@ -4048,7 +4145,7 @@ class Video extends Component {
               <span className="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
               
-                 <div className='invitationDiv'>
+                 <div className='invitationDiv' style={{ height: '27px'}}>
                 <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>
@@ -4081,7 +4178,7 @@ class Video extends Component {
               ></CanvasDraw>
             </div>
           </Modal>
-          <Modal title="设置视频设备" closable={false} centered={true} visible={this.state.isModalVisibleInspection} footer={[
+          <Modal title="设置视频设备" width={650} 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>
@@ -4095,7 +4192,9 @@ class Video extends Component {
               {
                 this.state.speakerList.length > 0 &&
                  <span>
-                   <div>扬声器：</div>
+                   <div>扬声器：
+                     <span className='speakerTitle'>（此为默认选项。若需切换，请在平板电脑右下角任务栏中的Speaker设置中调整）</span>
+                   </div>
               {speaker}
                  </span>
               }

package/packages/pages/video/video.less

@@ -144,7 +144,6 @@
 .invitationDiv{
   margin-left: 40px;
   margin-bottom: 15px;
-  height: 27px;
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     appearance: none;
@@ -478,4 +477,7 @@
   margin: 20px 40px;
   font-size: 14px;
   word-break: break-all;
+}
+.speakerTitle{
+  color: red;
 }