react_hsbc_teller 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "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.3&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')
@@ -2996,7 +3010,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.2')
+    console.log('hsbc_teller_sdk', '2.0.3')
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -4306,6 +4320,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 +5804,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>);