react_hsbc_teller 1.9.20 → 2.0.0

package/lib/hsbc.js.LICENSE.txt

@@ -26,6 +26,12 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+/**
+ * @license qrcode.react
+ * Copyright (c) Paul O'Shannessy
+ * SPDX-License-Identifier: ISC
+ */
+
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.9.20",
+  "version": "2.0.0",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",
@@ -89,6 +89,7 @@
     "axios": "0.19.0",
     "crypto-js": "^4.1.1",
     "html2canvas": "^1.4.0",
+    "qrcode.react": "^3.1.0",
     "react": "^17.0.1",
     "react-canvas-draw": "^1.1.1",
     "react-dom": "^17.0.1",

package/packages/demo/demo.js

@@ -21,7 +21,6 @@ roomId
     // mtoken: '',
     // imRoomId: '',
     // sessionId: '',
-    pdfRendering: false,
     isVideo: false,
     tellerAccount: 'wmzTeller',
     // callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
@@ -143,17 +142,6 @@ 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});
@@ -207,7 +195,6 @@ userExit =(val)=>{
                     <div>
                         <HSBC
                         shareMask={this.state.shareMask}
-                        pdfRendering={this.state.pdfRendering}
                         roomId={this.state.roomId} 
             mtoken={this.state.mtoken}
             sessionId={this.state.sessionId}
@@ -232,7 +219,6 @@ userExit =(val)=>{
                             createRoomCallback={this.createRoomCallback}
                             joinRoomCallback={this.joinRoomCallback}
                             imgCallback={this.imgCallback}
-                            sfpCallback={()=>{console.log('sfpCallback success')}}
                             userExit={this.userExit}
                             staffPermission={this.staffPermission}
                             >
@@ -240,7 +226,6 @@ 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,7 +2,6 @@ import React, { Component } from "react";
 
 class pdf extends Component {
   state = {
-    testTime: '',
     isVideo: false,
     tellerAccount: '',
     callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
@@ -12,12 +11,6 @@ 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
@@ -60,13 +53,6 @@ handleResourcePath = (event) => {
         resourcePath: event.target.value
     })
 }
-countTimer = () => {
-    this.state.timer = setInterval(() => {
-        this.setState({
-            testTime: new Date().toString()
-        })
-    }, 1000);
-}
 
   render() {
     console.log('22',this.props)
@@ -82,7 +68,6 @@ countTimer = () => {
                             阿里资源服务地址：<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

@@ -2,6 +2,7 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable eqeqeq */
 import React, { Component, useState } from 'react';
+import QRCode  from 'qrcode.react';
 import API from '../../api/api';
 import { initWebSocket, joinRoom, disconnect } from '../../common/websocket';
 import { BoardOperate } from '../../common/index.esm.js';
@@ -287,7 +288,6 @@ class Video extends Component {
     cardFailReason: '',
     videoType: '',
     certificateValidityType: true,
-    drawCanvasInterval: null,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -295,7 +295,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.20&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.0&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -1362,9 +1362,6 @@ 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());
@@ -1431,6 +1428,47 @@ 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) {
@@ -1750,6 +1788,48 @@ 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) => {
@@ -2217,16 +2297,9 @@ class Video extends Component {
           })
         }
       }
-      // if (!document.getElementById("video1").name) {
-      //   this.state.isPIBIntranet[0].type = false
-      //   this.setState({
-      //     videoOneName: '',
-      //     voiceVideoOne: false,
-      //     noVideoOne: false
-      //   },()=>{
-      //     this.videoListClick()
-      //   })
-      // }
+      if (!document.getElementById("video1").name) {
+        document.getElementById('audio1').muted = false
+      }
       this.state.analyserData.delete(sid)
       if (this.state.isPictureInPicture) {
         this.pictureInPicture('Refresh')
@@ -2750,7 +2823,6 @@ class Video extends Component {
       disconnect();
     }
     message.destroy()
-    clearInterval(this.state.drawCanvasInterval)
   }
   finishSession = () => {
     // clearInterval(this.state.OnVolumeAnalyserMap.get(sid))
@@ -2941,7 +3013,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.20')
+    console.log('hsbc_teller_sdk', '2.0.0')
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -4138,21 +4210,6 @@ 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 = {};
@@ -4194,21 +4251,20 @@ class Video extends Component {
         canvas.width = this.state.whiteboardWidth
       }
       console.log('addEventListener', !$this.paused, !$this.ended, x, y, width, height)
-
-      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)
-            // }
-          }
+      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
+        }
       }
 
-      this.state.drawCanvasInterval = setInterval($this.drawFunction , 1000/ 20);
-
       if (document.getElementById('video20').name) {
         // 代表已经有了进行切流
         publish_config.publish_device = 5
@@ -4709,9 +4765,6 @@ 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)
@@ -5136,6 +5189,13 @@ class Video extends Component {
 
                         </ul>
                       </div>
+                      {!this.state.loading && this.state.sessionId?
+                      <QRCode
+                            style={{'position': 'absolute', 'right': '10px', 'top': '-110px'}}
+                            value={this.state.sessionId}  //value参数为生成二维码的链接
+                            size={100} //二维码的宽高尺寸
+                            fgColor="#000000"  //二维码的颜色
+                      /> : null}
                     </div>
                   }
 
@@ -5669,7 +5729,6 @@ Video.defaultProps = {
     customers: ['--'],
     otherAttendees: undefined
   },
-  pdfRendering: false,
   isTranscribing: false,
   shareMask: false,
   isOpenSound: false, // true开启进出音效   false不开启