react_hsbc_teller 1.1.2 → 1.1.5

package/package.json

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

package/packages/demo/demo.js

@@ -4,17 +4,17 @@ import Pdf from './pdf.js'
 
 class Demo extends Component {
   state = {
-    // mtoken: "182f46eea982",
-    // roomId: "646380817934933",
-    // imRoomId: "E9IYrsxUY@conference.openfire2.leimondata.cn",
-    // sessionId: "E9IYrsxUY",
+    // imRoomId: "9K9ea1vOM@conference.ls-im-xmpp.chinawp.dev.ali.cloud.cn.hsbc",
+    // sessionId: "9K9ea1vOM",
+    // mtoken: "d4e648858b03",
+    // roomId: "645110140224386",
     roomId: '',
     mtoken: '',
     imRoomId: '',
     sessionId: '',
     isVideo: false,
     tellerAccount: '00000000',
-    callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
+    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
     businessNumber: '',
     lang: 'zh',
     roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',

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
@@ -258,6 +255,7 @@ class Video extends Component {
   };
   // 初始化视频
   ConnectMRTC = () => {
+    this.test_controller.SetLocalCodecType("H264")
     const config_param = {};
     config_param.auto_publish_subscribe = 4;
     config_param.media_type = 1;
@@ -585,6 +583,9 @@ class Video extends Component {
     }
   };
   endSessionValue = () => {
+    if(streamShare) {
+      streamShare.getTracks().forEach(track => track.stop());
+    }
       this.finishSession()
     
   };
@@ -1153,6 +1154,9 @@ class Video extends Component {
           if (Mival.type == 1) {
             this.switchExternal()
           } else if (Mival.type == 2) {
+            if(streamShare) {
+              streamShare.getTracks().forEach(track => track.stop());
+            }
             this.tabTitlesClick('RMWhiteboard', 'delect')
             if (this.state.isSharedScreen) {
               this.setState({
@@ -1533,7 +1537,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)
       }
     };
@@ -1588,6 +1592,10 @@ class Video extends Component {
         });
       } 
       if(sid == document.getElementById('publish_video1').name) {
+        this.setState({
+
+          loading: false,
+        });
         this.enterRoom()
         this.timer = setInterval(
           () => {
@@ -2838,6 +2846,9 @@ 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
@@ -3273,7 +3284,6 @@ class Video extends Component {
     )
   }
   switchExternalAge = ()=>{
-    const that = this
     if(this.state.isSharedScreen) {
       this.state.isSharedScreen = false
       this.setState({
@@ -3286,23 +3296,29 @@ class Video extends Component {
       }
     }
 
+    this.navigatorClick()
+
+  }
+  navigatorClick=()=>{
+    const that = this
     const publish_config = {};
-    const width = this.state.whiteboardWidth;
-    const height = this.state.whiteboardHeight;
     const canvas = document.createElement('canvas');
     const videoMedia = document.getElementById('manedvideo');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
-    const w = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
-    const h = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+    const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
+    const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
+    const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
+    const width =  left > 21 ? right : right + left
+    const height = document.getElementById("whiteboardDIV").getBoundingClientRect().height
     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, w, h, width, height, 0, 0,width, height,);
+            cobj.drawImage(videoMedia, 0, top, width, height, 0, 0,width, height);
               setTimeout(loop, 1000 / 10); // drawing at 30fps
           }
       }
@@ -3331,13 +3347,19 @@ class Video extends Component {
       }
   }, 0);
     navigator.mediaDevices.getDisplayMedia({
-      video: true
+      video: true,
+      preferCurrentTab:true,
   })
   .then((stream) => {
     videoMedia.srcObject = stream;
+    stream.getVideoTracks()[0].applyConstraints({
+      width: document.body.offsetWidth,
+      height: document.body.offsetHeight
+    })
+    streamShare = stream
     stream.getVideoTracks()[0].onended = async ()=>{
       //单击停止共享按钮后，触发这个事件
-      if(document.getElementById('video20').name && !this.state.isSharedScreen) {
+      if(document.getElementById('video20').name&&!this.state.isSharedScreen) {
         that.test_controller.UnPublish(document.getElementById('video20').name)
       }
       }
@@ -3346,9 +3368,8 @@ class Video extends Component {
   });
   }
   switchExternal = () => {
-    const that = this
+    
     if (!this.state.isWhiteboard) {
-      const publish_config = {};
       this.setState({
         isWhiteboard: true
       })
@@ -3367,83 +3388,7 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       }
-      const width = this.state.whiteboardWidth;
-      const height = this.state.whiteboardHeight;
-      const canvas = document.createElement('canvas');
-      const videoMedia = document.getElementById('manedvideo');
-      const cobj = canvas.getContext('2d'); // 获取绘图环境
-      const w = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
-      const h = document.getElementById("whiteboardDIV").getBoundingClientRect().top
-      canvas.width = width;
-      canvas.height = height;
-      videoMedia.addEventListener('play', (event) =>{
-        var $this = this; //cache
-        console.log('333111',!$this.paused,!$this.ended)
-        loop()
-        function loop() {
-            if (!$this.paused && !$this.ended) {
-              cobj.drawImage(videoMedia, w, h, 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
-    })
-    .then((stream) => {
-      videoMedia.srcObject = 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)
-      // }
+      this.navigatorClick()
     } else {
       this.messageClick('当前已经切换RM白板','success')
 
@@ -3506,8 +3451,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() {
@@ -3631,7 +3576,7 @@ class Video extends Component {
             <div className="projection"  style={{background: this.state.tabTitles.length > 0 ? '#f0f0f0' : '#ffffff'}}>
             {tabTitleList}
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
-            <div id="whiteboardDIV" style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
+            <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
             
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
@@ -4183,7 +4128,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>
@@ -4198,7 +4143,7 @@ class Video extends Component {
                 this.state.speakerList.length > 0 &&
                  <span>
                    <div>扬声器：
-                     <span className='speakerTitle'>（请更改系统设置）</span>
+                     <span className='speakerTitle'>（此为默认选项。若需切换，请在平板电脑右下角任务栏中的Speaker设置中调整）</span>
                    </div>
               {speaker}
                  </span>

package/packages/pages/video/video.less

@@ -79,7 +79,7 @@
   height: 100%;
 }
 .health{
-  padding: 20px;
+  padding: 20Px;
   background: #f0f0f0;
 }
 .healthVideo{