react_hsbc_teller 1.9.19 → 1.9.21

package/package.json

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

package/packages/demo/demo.js

@@ -21,6 +21,7 @@ roomId
     // mtoken: '',
     // imRoomId: '',
     // sessionId: '',
+    pdfRendering: false,
     isVideo: false,
     tellerAccount: 'wmzTeller',
     // callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
@@ -142,6 +143,17 @@ shareMaskClick=()=>{
     }
     
 }
+pdfRenderingClick=()=>{
+    if(this.state.pdfRendering) {
+        this.setState({
+            pdfRendering: false
+        })
+    } else {
+        this.setState({
+            pdfRendering: true
+        })
+    }
+}
 createRoomCallback=(data)=>{
     console.log('createRoomCallback', data)
     this.setState({roomId: data.data.roomId});
@@ -195,6 +207,7 @@ userExit =(val)=>{
                     <div>
                         <HSBC
                         shareMask={this.state.shareMask}
+                        pdfRendering={this.state.pdfRendering}
                         roomId={this.state.roomId} 
             mtoken={this.state.mtoken}
             sessionId={this.state.sessionId}
@@ -219,6 +232,7 @@ userExit =(val)=>{
                             createRoomCallback={this.createRoomCallback}
                             joinRoomCallback={this.joinRoomCallback}
                             imgCallback={this.imgCallback}
+                            sfpCallback={()=>{console.log('sfpCallback success')}}
                             userExit={this.userExit}
                             staffPermission={this.staffPermission}
                             >
@@ -226,6 +240,7 @@ userExit =(val)=>{
                                 <Pdf></Pdf>
                         </HSBC>
                         <button onClick={this.shareMaskClick.bind(this)}>遮罩层</button>
+                        <button onClick={this.pdfRenderingClick.bind(this)}>{this.state.pdfRendering?'继续':'暂停'}渲染</button>
                         </div>
                         :
                         <div>

package/packages/demo/pdf.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 
 class pdf extends Component {
   state = {
+    testTime: '',
     isVideo: false,
     tellerAccount: '',
     callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
@@ -11,6 +12,12 @@ class pdf extends Component {
     baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
     resourcePath:'https://counter-web.leimondata.cn:7199',
 }
+componentDidMount () {
+    this.countTimer()
+}
+componentWillUnmount() {
+    clearInterval(this.state.timer)
+}
 startVideo = () => {
     this.setState({
         isVideo: true
@@ -53,6 +60,13 @@ handleResourcePath = (event) => {
         resourcePath: event.target.value
     })
 }
+countTimer = () => {
+    this.state.timer = setInterval(() => {
+        this.setState({
+            testTime: new Date().toString()
+        })
+    }, 1000);
+}
 
   render() {
     console.log('22',this.props)
@@ -68,6 +82,7 @@ handleResourcePath = (event) => {
                             阿里资源服务地址：<input placeholder="请输入阿里资源服务地址" value={this.state.resourcePath} onChange={e => this.handleResourcePath(e)}></input>
 
                             <button className="button" onClick={this.startVideo.bind(this)}>开启视频</button>
+                            <div>{this.state.testTime}</div>
                         </div>
                 }
             </div>

package/packages/pages/video/video.jsx

@@ -6,6 +6,7 @@ import API from '../../api/api';
 import { initWebSocket, joinRoom, disconnect } from '../../common/websocket';
 import { BoardOperate } from '../../common/index.esm.js';
 import './video.less'
+import { compressImage } from '../../utils/utils'
 import Header from '../header/header.jsx'
 import Foot from '../foot/foot.jsx'
 import voiceImgOpen from '../../assets/img/icon_Mute.png'
@@ -287,6 +288,7 @@ class Video extends Component {
     cardFailReason: '',
     videoType: '',
     certificateValidityType: true,
+    drawCanvasInterval: null,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -294,7 +296,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.19&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=1.9.21&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -1361,6 +1363,9 @@ class Video extends Component {
           if (Mival.type == 1) {
             this.switchExternal()
             this.saveLog('whiteboard start, typeId=1218,')
+            if (typeof this.props.sfpCallback === 'function'){
+              this.props.sfpCallback()
+            }
           } else if (Mival.type == 2) {
             if (streamShare) {
               streamShare.getTracks().forEach(track => track.stop());
@@ -1374,6 +1379,7 @@ class Video extends Component {
             } else {
               if (document.getElementById('video20').name) {
                 this.test_controller.UnPublish(document.getElementById('video20').name)
+                if(this.state.drawCanvasInterval) clearInterval(this.state.drawCanvasInterval)
               }
               this.setState({
                 isWhiteboard: false
@@ -1427,47 +1433,6 @@ class Video extends Component {
         this.tabTitlesClick('customerScreen', 'delect')
         this.saveLog('app stop sharing screen, typeId=4001, ')
 
-      } else if (Mival.typeId == 4004) {
-        // 线下demo静音处理
-        if (Mival.data.sessionId == this.state.sessionId && this.isFileSuccuse()) {
-          if (!this.state.voiceStatue) {
-            // 静音本地
-            this.setState({
-              voiceStatue: true,
-              voiceImg: voiceImgCloe,
-              voiceName: '解除静音'
-            });
-            let sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name; 
-            this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1013,
-                'muteStatus': 1,
-                'data': {
-                  'sessionId': this.state.sessionId,
-                  'userId': this.props.tellerAccount
-                }
-              })
-            }, function (code, message, data) {
-              // console.log(data)
-            })
-          }
-          document.getElementById('audio1').muted = true
-          console.log('音频流静音')
-          console.log(document.getElementById('audio1').muted)
-          setTimeout(() => {
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1223,
-                'state': 1, // app解除静音
-                'sessionId': this.state.sessionId,
-                'userId': Mival.data.userId //this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
-              })
-            });
-          }, 1000);
-        }
       } else if (Mival.typeId == 1401) {
         // 用户修改名字
         if (Mival.sessionId == this.state.sessionId) {
@@ -1787,48 +1752,6 @@ class Video extends Component {
           this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
         }
       }
-      // 线下demo静音处理
-      if (JSON.parse(msg).typeId == 4004 && this.state.sessionId == JSON.parse(msg).data.sessionId) {
-        if (this.isFileSuccuse()) {
-          if (!this.state.voiceStatue) {
-            // 静音本地
-            this.setState({
-              voiceStatue: true,
-              voiceImg: voiceImgCloe,
-              voiceName: '解除静音'
-            });
-            let sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name; 
-            this.test_controller.SetLocalAudioEnable(0, parseInt(sid, 10));
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1013,
-                'muteStatus': 1,
-                'data': {
-                  'sessionId': this.state.sessionId,
-                  'userId': this.props.tellerAccount
-                }
-              })
-            }, function (code, message, data) {
-              // console.log(data)
-            })
-          }
-          document.getElementById('audio1').muted = true
-          console.log('音频流静音')
-          console.log(document.getElementById('audio1').muted)
-          setTimeout(() => {
-            callNimIM('sendCustomCmdMsg', {
-              customId: this.state.imRoomId,
-              content: JSON.stringify({
-                'typeId': 1223,
-                'state': 1, // app解除静音
-                'sessionId': this.state.sessionId,
-                'userId': uid //this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById('feedId1').innerText).uid
-              })
-            });
-          }, 1000);
-        }
-      }
       this.saveLog('mrtc OnReceiveTextMsg info:' + msg)
     }
     this.test_controller.StreamFilterHandler = async (publish_tag, stream, stream_type, publish_device, media_type) => {
@@ -1922,10 +1845,8 @@ class Video extends Component {
           }
         }
         return newStream1
-      } else {
-        return stream
       }
-
+      return stream
     }
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
@@ -2296,9 +2217,16 @@ class Video extends Component {
           })
         }
       }
-      if (!document.getElementById("video1").name) {
-        document.getElementById('audio1').muted = false
-      }
+      // if (!document.getElementById("video1").name) {
+      //   this.state.isPIBIntranet[0].type = false
+      //   this.setState({
+      //     videoOneName: '',
+      //     voiceVideoOne: false,
+      //     noVideoOne: false
+      //   },()=>{
+      //     this.videoListClick()
+      //   })
+      // }
       this.state.analyserData.delete(sid)
       if (this.state.isPictureInPicture) {
         this.pictureInPicture('Refresh')
@@ -2822,6 +2750,7 @@ class Video extends Component {
       disconnect();
     }
     message.destroy()
+    clearInterval(this.state.drawCanvasInterval)
   }
   finishSession = () => {
     // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
@@ -3012,7 +2941,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.19')
+    console.log('hsbc_teller_sdk', '1.9.21')
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -3695,6 +3624,7 @@ class Video extends Component {
         })
         // this.messageClick('识别失败', 'error')
         this.errorCodeClick('ocr',result.code)
+        this.saveLog('OCR failed, error code=' + result.code)
       }
     } catch (err) {
       this.setState({
@@ -4034,19 +3964,25 @@ class Video extends Component {
     }
   }
   sgsinImage = () => {
-    if (this.state.IDtypeFrontOrBack == IDtypeFront) {
-      this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-        isFaceImage: true,
-        facialImgFront: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-      })
-    } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
-      this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-        isFaceImage: true,
-        facialImgBack: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
-      })
-    }
+    const imgBase64 = this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+    // console.log(imgBase64)
+
+    compressImage(imgBase64, (compressedImg)=>{
+      // console.log(compressedImg)
+      if (this.state.IDtypeFrontOrBack == IDtypeFront) {
+        this.setState({
+          facialImg: compressedImg,
+          isFaceImage: true,
+          facialImgFront: compressedImg,
+        })
+      } else if (this.state.IDtypeFrontOrBack == IDtypeBack) {
+        this.setState({
+          facialImg: compressedImg,
+          isFaceImage: true,
+          facialImgBack: compressedImg,
+        })
+      }
+    })
 
   }
   handleChangeOcr = (val) => {
@@ -4209,6 +4145,21 @@ class Video extends Component {
       })
     }
   }
+  changePdfRendering = () => {
+    if (this.props.pdfRendering) {
+      // 暂停绘制
+      clearInterval(this.state.drawCanvasInterval)
+    } else {
+      // 继续绘制
+      if (!this.drawFunction) {
+        console.log('未开始远程签署')
+        return
+      }
+      clearInterval(this.state.drawCanvasInterval)
+      this.state.drawCanvasInterval = setInterval(this.drawFunction, 1000 / 20);
+    }
+
+  }
   navigatorClick = () => {
     const that = this
     const publish_config = {};
@@ -4250,20 +4201,21 @@ class Video extends Component {
         canvas.width = this.state.whiteboardWidth
       }
       console.log('addEventListener', !$this.paused, !$this.ended, x, y, width, height)
-      loop()
-      function loop() {
-        if (!$this.paused && !$this.ended) {
-          // if(!that.state.tabTitles.find(el=>el.value == 'customerScreen')) {
-          cobj.drawImage(videoMedia, x, y, width, height, 0, 0, 960, 540);
-          // } else {
-          //   cobj.fillStyle = 'rgb(0 0 0)'
-          //   cobj.fillRect(0,0,960,540)
-          // }
-
-          setTimeout(loop, 1000 / 20); // drawing at 30fps
-        }
+
+      if (this.state.drawCanvasInterval) clearInterval(this.state.drawCanvasInterval)
+      $this.drawFunction = () => {
+          if (!$this.paused && !$this.ended) {
+            // if(!that.state.tabTitles.find(el=>el.value == 'customerScreen')) {
+            cobj.drawImage(videoMedia, x, y, width, height, 0, 0, 960, 540);
+            // } else {
+            //   cobj.fillStyle = 'rgb(0 0 0)'
+            //   cobj.fillRect(0,0,960,540)
+            // }
+          }
       }
 
+      this.state.drawCanvasInterval = setInterval($this.drawFunction , 1000/ 20);
+
       if (document.getElementById('video20').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 5
@@ -4764,6 +4716,9 @@ class Video extends Component {
     if (this.props.shareMask != prevProps.shareMask) {
       this.sendNotification()
     }
+    if (this.props.pdfRendering != prevProps.pdfRendering) {
+      this.changePdfRendering()
+    }
   }
   onChangeOCRCustomer = (e) => {
     console.log(e)
@@ -5721,6 +5676,7 @@ Video.defaultProps = {
     customers: ['--'],
     otherAttendees: undefined
   },
+  pdfRendering: false,
   isTranscribing: false,
   shareMask: false,
   isOpenSound: false, // true开启进出音效   false不开启

package/packages/utils/utils.js

@@ -0,0 +1,36 @@
+function compressImage(base64, callback) {
+  var targSize = 1024 * 1024 * 1.45 //1024KB  
+  if (base64.length <= targSize) {
+      callback(base64);
+      // console.log("直接返回")
+      return
+  }
+  var newImage = new Image();
+  newImage.src = base64;
+  console.log('压缩前'+base64.length)
+  newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要  
+  newImage.onload = function () {
+      var quality = 0.95; //压缩系数0-1之间
+      var canvas = document.createElement("canvas");
+      var ctx = canvas.getContext("2d");
+      canvas.width = 720
+      canvas.height = 405
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
+      var base64 = canvas.toDataURL("image/png", quality); //压缩语句
+      // 如想确保图片压缩到自己想要的尺寸,如要求在5-10kb之间，请加以下语句，quality初始值根据情况自定
+      // console.log(base64.length + "循环1压缩" + (base64.length / 1024 > 512))
+      
+      // while (base64.length > targSize) {
+      //     quality -= 0.03;
+      //     // console.log(base64.length + "循环压缩" + quality)
+      //     base64 = canvas.toDataURL("image/png", quality);
+      // }
+      console.log('压缩后'+base64.length)
+      callback(base64); //必须通过回调函数返回，否则无法及时拿到该值
+  }
+}
+
+export {
+  compressImage
+}