react_hsbc_teller 1.1.3 → 1.1.6

package/package.json

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

package/packages/demo/demo.js

@@ -14,7 +14,7 @@ class Demo extends Component {
     sessionId: '',
     isVideo: false,
     tellerAccount: '00000000',
-    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+    callbackUrl: 'http://182.92.184.31: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()
     
   };
@@ -725,6 +726,7 @@ class Video extends Component {
   workerClick=()=>{
     const canvas = document.createElement('canvas');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
+    let microTimerMap = new Map()
     let blob = new Blob([
       `
       let timer;
@@ -841,6 +843,7 @@ class Video extends Component {
         aou(analyser)
         function aou(analyser){
           if(analyser) {
+            cancelAnimationFrame(microTimerMap.get(sid))
             let dataArray = new Uint8Array(analyser.frequencyBinCount);
             analyser.getByteFrequencyData(dataArray);
             let step = Math.round(dataArray.length / 60); //采样步长
@@ -864,7 +867,7 @@ class Video extends Component {
               let startY =  y1 - height  // 绘制起始点y
               cobj.fillRect(startX, startY, width, height )
             }
-            requestAnimationFrame(aou.bind(this, analyser));
+            microTimerMap.set(sid,requestAnimationFrame(aou.bind(this, analyser)) ) 
           }
 
 
@@ -1153,6 +1156,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({
@@ -1586,8 +1592,16 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         });
+        if(this.state.screenName == '取消共享') {
+          this.state.isSharedScreen = true
+        this.state.isScreenSwitching = false
+        }
       } 
       if(sid == document.getElementById('publish_video1').name) {
+        this.setState({
+
+          loading: false,
+        });
         this.enterRoom()
         this.timer = setInterval(
           () => {
@@ -2323,7 +2337,12 @@ class Video extends Component {
             loading: false
         })
       }
-      
+      if (sid == document.getElementById('video20').name) {
+        if(this.state.screenName == '取消共享') {
+          this.state.isSharedScreen = true
+        this.state.isScreenSwitching = false
+        }
+      }
     };
     // 切流失败通知
     this.test_controller.OnChangeMediaStreamFailed = (
@@ -2838,6 +2857,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
@@ -2883,8 +2905,8 @@ class Video extends Component {
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
-        this.state.isSharedScreen = true
-        this.state.isScreenSwitching = false
+        // this.state.isSharedScreen = true
+        // this.state.isScreenSwitching = false
         this.setState({
           screenName: '取消共享',
           isPDF: false
@@ -3273,7 +3295,6 @@ class Video extends Component {
     )
   }
   switchExternalAge = ()=>{
-    const that = this
     if(this.state.isSharedScreen) {
       this.state.isSharedScreen = false
       this.setState({
@@ -3286,26 +3307,30 @@ class Video extends Component {
       }
     }
 
+    this.navigatorClick()
+
+  }
+  navigatorClick=()=>{
+    const that = this
     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
+    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) =>{
+    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
+            cobj.drawImage(videoMedia, 0, top, width, height, 0, 0,width, height);
+              setTimeout(loop, 1000 / 10); // drawing at 30fps
           }
       }
       
@@ -3338,9 +3363,14 @@ class Video extends Component {
   })
   .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)
       }
       }
@@ -3349,9 +3379,8 @@ class Video extends Component {
   });
   }
   switchExternal = () => {
-    const that = this
+    
     if (!this.state.isWhiteboard) {
-      const publish_config = {};
       this.setState({
         isWhiteboard: true
       })
@@ -3370,66 +3399,7 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       }
-      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;
-      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);
-    });
+      this.navigatorClick()
     } else {
       this.messageClick('当前已经切换RM白板','success')
 
@@ -3492,7 +3462,7 @@ class Video extends Component {
     var box=document.getElementById("whiteboardDIV");
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
             this.state.whiteboardWidth = box.offsetWidth,
-            this.state.whiteboardHeight = box.offsetHeight - 33,
+            this.state.whiteboardHeight = box.offsetHeight  * 0.92,
            console.log('whiteboardDIV', this.state.whiteboardHeight,box.clientHeight,this.state.whiteboardWidth)
        }
   }
@@ -3617,7 +3587,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">
@@ -4169,7 +4139,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>
@@ -4184,7 +4154,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{