react_hsbc_teller 2.0.2 → 2.0.4

package/package.json

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

package/packages/pages/video/video.jsx

@@ -56,6 +56,7 @@ let pictureInPictureVideo
 let mix_stream
 let worker
 let streamShare
+let streamRecord
 let videoName
 let muteJson = new Map()
 let dateTime = 0
@@ -295,7 +296,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.2&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.4&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -340,6 +341,7 @@ class Video extends Component {
         publish_config.publish_tag = 'tag' + (i+1)
         this.test_controller.Publish(publish_config)
       })
+      this.publishAllScreen();
       
       // eslint-disable-next-line no-undef
       setTimeout(() => {
@@ -633,6 +635,13 @@ class Video extends Component {
           width: 213,
           height: 175
         },
+        {
+          tag: 'RM_ALL_SCREEN',
+          xPosition: 960,
+          yPosition: 180,
+          width: 320,
+          height: 180
+        }
       ]
       Array.isArray(res) ?
         res.map((item) => {
@@ -954,6 +963,10 @@ class Video extends Component {
       streamShare.getTracks().forEach(track => track.stop());
       streamShare = ''
     }
+    if (streamRecord) {
+      streamRecord.getTracks().forEach(track => track.stop());
+      streamRecord = ''
+    }
     this.finishSession()
 
   };
@@ -1716,6 +1729,7 @@ class Video extends Component {
         publish_config.publish_tag = 'tag' + (i+1)
         this.test_controller.Publish(publish_config)
       })
+      this.publishAllScreen();
       
       this.roomCallBack(1, '', 0)
       this.saveLog('mrtc join room success')
@@ -1829,23 +1843,7 @@ class Video extends Component {
       if (publish_tag == 'tag1') {
         console.log('tag1', stream)
         let newStream = stream;
-        // if (stream.getVideoTracks()[0]) {
-        //   await startBeauty(newStream);
-        //   newStream = beautyCaptureStream();
-        //   // 清理原始流
-        // newStream.oninactive = function () {
-        //   clearOriginStream(stream);
-        // };
-        // newStream.getVideoTracks()[0].onended = function () {
-        //   clearOriginStream(stream);
-        // };
-        // function clearOriginStream(stream) {
-        //   stream.getTracks().forEach((track) => {
-        //     track.stop();
-        //   });
-        //   stream = null;
-        // }
-        // };
+
         if (stream.getVideoTracks()[0]) {
           await startBeauty(newStream);
           newStream = beautyCaptureStream();
@@ -1872,8 +1870,7 @@ class Video extends Component {
       }
 
       if (publish_tag == 'projectionWhiteboard' && publish_device == 2) {
-        // this.graffiti()
-        console.log('projectionWhiteboard', stream)
+
         let newStream1 = stream;
         if (stream.getVideoTracks()[0]) {
           if (this.state.operateShow) {
@@ -1890,6 +1887,8 @@ class Video extends Component {
           }
 
           newStream1 = mixCaptureStream();
+          newStream1.getVideoTracks()[0].contentHint = "text"; // 解决清晰度问题
+
           console.log('projectionWhiteboard1', newStream1)
           // 清理原始流
           newStream1.oninactive = function () {
@@ -2996,7 +2995,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.2')
+    console.log('hsbc_teller_sdk', '2.0.4')
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -4306,6 +4305,83 @@ class Video extends Component {
         console.log("Unable to acquire screen capture", error);
       });
   }
+  // publishAllScreen = () => {
+    
+  // }
+  publishAllScreen = () => {
+    const that = this
+    const publish_config = {};
+    const canvas = document.createElement('canvas');
+    const videoMedia = document.getElementById('recordvideo');
+    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
+    let width = ((right - left) * window.screen.width / document.body.clientWidth) - 5
+    let height = ((bottom - top) * window.screen.width / document.body.clientWidth) - 30
+    let x = (left * window.screen.width / document.body.clientWidth)
+    let y = (top * window.screen.width / document.body.clientWidth) + 8
+    // console.error(left, right, top, bottom)
+    // console.error(width,height,x,y)
+
+
+    canvas.width = 960;
+    canvas.height = 540;
+
+
+    videoMedia.addEventListener('play', (event) => {
+      var $this = this; //cache
+      console.log('addEventListener', !$this.paused, !$this.ended, x, y, width, height)
+      loop()
+      function loop() {
+        if (!$this.paused && !$this.ended) {
+          cobj.drawImage(videoMedia, x, y, width, height, 0, 0, 960, 540);
+          setTimeout(loop, 1000 / 20); // drawing at 30fps
+        }
+      }
+
+        publish_config.media_type = 3
+        publish_config.publish_device = 5
+        publish_config.need_volume_analyser = false
+        publish_config.video_profile_type = 1
+        publish_config.degradationType = 2
+        publish_config.stream = canvas.captureStream(10)
+        publish_config.publish_video_id = 'record_video'
+        publish_config.publish_streamId_id = 'record_video_streamId'
+        publish_config.publish_tag = 'RM_ALL_SCREEN'
+        this.test_controller.Publish(publish_config)
+    }, 0);
+    navigator.mediaDevices.getDisplayMedia({
+      video: true,
+      preferCurrentTab: true,
+    })
+      .then((stream) => {
+        if (streamRecord) {
+          streamRecord.getTracks().forEach(track => track.stop());
+          streamRecord = ''
+        }
+        videoMedia.srcObject = stream;
+        stream.getVideoTracks()[0].applyConstraints({
+          // width: 1280,
+          // height: 720
+          width: window.screen.width,
+          height: window.screen.height
+        })
+
+        streamRecord = stream
+
+        stream.getVideoTracks()[0].onended = async () => {
+          //单击停止共享按钮后，触发这个事件
+          streamRecord = ''
+          if (document.getElementById('record_video').name) {
+            that.test_controller.UnPublish(document.getElementById('record_video').name)
+          }
+        }
+      }, error => {
+        console.log("Unable to acquire screen capture", error);
+      });
+  }
   switchExternal = () => {
     if (this.isFileSuccuse()) {
       if (!this.state.tabTitles.find(el => el.value == 'staffScreen')) {
@@ -5713,6 +5789,8 @@ class Video extends Component {
           <video className="mixedvideo" id="manedvideo" autoPlay width="0" height="0"></video>
           <video className="mixedvideo" id="video30" autoPlay width="0" height="0"></video>
 
+          <video className="mixedvideo" id="recordvideo" autoPlay width="0" height="0"></video>
+          <video className="mixedvideo" id="record_video" muted autoPlay></video>
 
         </Spin>
       </div>);