react_hsbc_teller 2.0.38 → 2.0.40

package/package.json

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

package/packages/demo/demo.js

@@ -75,9 +75,11 @@ startVideo = () => {
 }
 onLeaveRoom = (val) => {
     console.log(val)
-    this.setState({
-        isVideo: false
-    })
+    if (val.code == 1) {
+        this.setState({
+            isVideo: false
+        })
+    }
 }
 handleChangeTeller = (event) => {
     this.setState({

package/packages/pages/multiModule/components/copy/copy_en.jsx

@@ -339,6 +339,7 @@ class Copy extends Component {
           </div>
           ]}>
             <div className='endModal'>
+				<div className='modalEndTitle'>提示</div>
 				<div className='modalEnd'>
 				<FormattedMessage id="noCopy" />
 				</div>

package/packages/pages/video/video.jsx

@@ -60,13 +60,14 @@ import MultiModule from '../multiModule/multiModule'//签字、抄录
 import axios from 'axios';
 import CryptoJS from "crypto-js";
 
-const SDK_VERISON = '2.0.38'
+const SDK_VERISON = '2.0.40'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
+  TELLER_DISCONNECT: -2, // 坐席连接断开
 }
 const POINT_TYPE = {
   tts: '文字转语音',
@@ -78,7 +79,8 @@ const POINT_TYPE = {
   wnd:	"弱网",
   mute:  "静音",
   expDark: '曝光、背光',
-  fcd: '人脸变化检测'
+  fcd: '人脸变化检测',
+  padConnected: 'ipad已连接'
 }
 const RECORD_DEVICE_NAME = 'screen-capture-recorder'
 // const RECORD_DEVICE_NAME = 'Full HD webcam'
@@ -247,6 +249,7 @@ class Video extends Component {
     isModalVisibleEnd: false,
     isModalVisible: false,
     isPictureConfirmModalVisible:false,
+    isDisconnectModalVisible: false,
     screenName: '共享模式',
     suspendName: '暂停',
     cameraImg: cameraImgOpen,
@@ -529,7 +532,7 @@ class Video extends Component {
     config_param.sign = window.sessionStorage.getItem('alimpassSig')
     config_param.room_server_url = this.props.roomServerUrl;
     // 允许最大断网时间 (超过未重连, 直接关闭)
-    config_param.network_check_timeout = 10000;
+    config_param.network_check_timeout = 1200000; // sdk默认120秒。wpb要求一直重连，设定20分钟
     this.test_controller.Connect(config_param)
     this.saveLog('mrtc connect start')
   };
@@ -1137,15 +1140,16 @@ class Video extends Component {
     };
     return mediaInfo;
   }
-  detectNetworkWeak = () => {
+  detectNetworkWeak = (streamInfo) => {
     return new Promise((resolve, reject) => {
-      let detectionsNumber = 3
+      const Total_Detect_Number = 3; // 触发弱网回调后，再连续检测3次
+      let detectionsNumber = Total_Detect_Number;
     let finalResult = true
     let setTimer = () => {
       setTimeout(() => {
-        this.test_controller.GetStats(this.mediaInfo).then(media_stat => {
-          if (detectionsNumber>2) {
-            // 不考虑第一次的评估结果，重新计算码率
+        this.test_controller.GetStats(streamInfo || this.mediaInfo).then(media_stat => {
+          if (detectionsNumber> Total_Detect_Number-1) {
+            // 不考虑第一次的评估结果，重新计算码率（因为刚触发弱网时的获取的码率总是非常大，原因不明）
             detectionsNumber--;
             setTimer()
             return
@@ -1158,27 +1162,38 @@ class Video extends Component {
           let ssrcVideoSendLostRate = media_stat["ssrcVideoSend"]["lostRate"];
           let ssrcAudioSendLostRate = media_stat["ssrcAudioSend"]["lostRate"];
           let weak_googAvailableSendBandwidth = 200;
-          let weak_ssrcVideoSendLostRate = 20;
-          let weak_ssrcAudioSendLostRate = 20;
+          // let weak_ssrcVideoSendLostRate = 0.20;
+          // let weak_ssrcAudioSendLostRate = 0.20;
           let weak_str = "网络正常";
           if (googAvailableSendBandwidth < weak_googAvailableSendBandwidth) {
             weak_str = "当前网络不佳";
           }
           let bpsSend = (media_stat.ssrcVideoSend["bpsSend"] / 1000).toFixed(2)
+          let bpsAudioSend = (media_stat.ssrcAudioSend["bpsSend"] / 1000).toFixed(2)
           let fps = media_stat["ssrcVideoSend"].googFrameRateSent
           let str =
             "带宽评估:" + (googAvailableSendBandwidth == undefined ? "none" : googAvailableSendBandwidth + "kbps") + "; "
             + "视频码率:" + bpsSend + "kb" + "; "
-            + "音频码率:" + (media_stat.ssrcAudioSend["bpsSend"] / 1000).toFixed(2) + "kb" + "; "
+            + "音频码率:" + bpsAudioSend + "kb" + "; "
             + "视频丢包率:" + (ssrcVideoSendLostRate == undefined ? "none" : ssrcVideoSendLostRate + "%") + "; "
             + "音频丢包率:" + (ssrcAudioSendLostRate == undefined ? "none" : ssrcAudioSendLostRate + "%") + "; "
             + weak_str + "; "
             + "当前编码格式:" + media_stat["ssrcVideoSend"].googCodecName + "; "
             + "分辨率:" + media_stat["ssrcVideoSend"].resolution + "; "
-            + "帧率:" + media_stat["ssrcVideoSend"].googFrameRateSent;
+            + "帧率:" + fps + '; ' 
+            + "源帧率:" + media_stat["ssrcVideoSend"].googFrameRateInput;
             console.log('弱网', str)
-          // document.getElementById("publish_media_stat1").innerText = str;
-          let result =  (bpsSend < 200 ) && googAvailableSendBandwidth < weak_googAvailableSendBandwidth
+
+          let bpsResult = (bpsSend && bpsSend < 200 ) || (bpsAudioSend && bpsAudioSend < 200 )
+          // 码率和带宽评估均低于200 
+          let result =  bpsResult && (!googAvailableSendBandwidth || googAvailableSendBandwidth < weak_googAvailableSendBandwidth)
+
+          if (fps !== undefined) {
+            // 丢包率>=10 或者帧率 <= 5
+            let videoResult = (Number(ssrcVideoSendLostRate) >= 0.1 ) || fps <= 5
+            console.log('丢包及帧率不满足', ssrcVideoSendLostRate, fps, videoResult)
+            result = videoResult || result
+          }
           if (result) {
             console.log('[!]弱网单次评估' + result);
           } else {
@@ -1522,7 +1537,7 @@ class Video extends Component {
       pictureInPictureVideo.style.display = 'block';
       pictureInPictureVideo.play();
       this.state.isPictureInPicture = true
-      clearTimeout(this.loopPlay)
+      clearTimeout(this.loopPlayTimer)
     });
 
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
@@ -1533,7 +1548,7 @@ class Video extends Component {
       worker.postMessage(false);
       this.state.isPictureInPicture = false
 
-      clearTimeout(this.loopPlay)
+      clearTimeout(this.loopPlayTimer)
       // 画中画循环播放逻辑
       if (document.hidden && this.state.businessRecordId) {
         this.setState({
@@ -1544,7 +1559,7 @@ class Video extends Component {
           if(!this.state.isPictureInPicture && document.getElementById("publish_streamId1")){
             let audio = new Audio(PIPictureClosedAudio)
             audio.play()
-            setTimeout(this.loopPlay, 3000);
+            this.loopPlayTimer = setTimeout(this.loopPlay, 3000);
           }
         }
         setTimeout(this.loopPlay, 0);
@@ -1710,12 +1725,13 @@ class Video extends Component {
           ipadLowPowerErrorModalVisible: true,
         })
         // 循环播放ipad低电量
-        clearTimeout(this.ipadLowPowerPlay)
+        clearTimeout(this.ipadLowPowerPlayTimer)
         this.ipadLowPowerPlay = () => {
           if(this.state.ipadLowPowerErrorModalVisible){
-            let audio = new Audio(IpadLowPowerAudio)
-            audio.play()
-            setTimeout(this.ipadLowPowerPlay, 3000);
+            if (this.lowPowerAudio) this.lowPowerAudio.pause()
+            this.lowPowerAudio = new Audio(IpadLowPowerAudio)
+            this.lowPowerAudio.play()
+            this.ipadLowPowerPlayTimer = setTimeout(this.ipadLowPowerPlay, 3000);
           }
         }
         setTimeout(this.ipadLowPowerPlay, 0);
@@ -1737,7 +1753,7 @@ class Video extends Component {
       else if (Mival.typeId == 5007) { // ipad充电状态
         if (Mival.type == '1') { // 1充电 2不在充电
           this.setState({ ipadLowPowerErrorModalVisible: false})
-          clearTimeout(this.ipadLowPowerPlay)
+          clearTimeout(this.ipadLowPowerPlayTimer)
         } 
       }
       else if (Mival.typeId == 1220) {
@@ -1924,13 +1940,13 @@ class Video extends Component {
         //   businessRecordId: '',
         // })
         // // 循环播放录制中断语音
-        // clearTimeout(this.recordLoopPlay)
+        // clearTimeout(this.recordLoopPlayTimer)
         // this.recordLoopPlay = () => {
         //   console.log('loop recordId', this.state.recordId, 'businessRecordId ', this.state.businessRecordId)
         //   if(!this.state.businessRecordId && document.getElementById("publish_video1")){
         //     let audio = new Audio(recordErrorAudio)
         //     audio.play()
-        //     setTimeout(this.recordLoopPlay, 3000);
+        //     this.recordLoopPlayTimer = setTimeout(this.recordLoopPlay, 3000);
         //   }
         // }
         // setTimeout(this.recordLoopPlay, 0);
@@ -2315,9 +2331,9 @@ class Video extends Component {
     };
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
-      console.log(code, sid)
+      console.log('OnMediaClose',code, sid)
       if (code == 5003 || code == 5004 || code == 5005 || code == 5007 || code == 5009 || code == 5010 || code == 5011 || code == 5012) {
-        if (sid == document.getElementById('publish_streamId1').name) {
+        if (sid == this.state.publishSid) {
           this.saveLog('Audio and video close notification，' + code)
           this.roomCallBack(2, '音视频异常关闭', 8)
         } else {
@@ -2524,9 +2540,10 @@ class Video extends Component {
           this.state.isScreenSwitching = false
           this.setSharedScreenState(true)
         }
+        this.videoInfo = this.generateMediaInfo(document.getElementById("video20").name);
       }
       if (sid == document.getElementById('publish_streamId1').name) {
-
+        this.state.publishSid = document.getElementById('publish_streamId1').name
         this.setState({
 
           loading: false,
@@ -2706,6 +2723,10 @@ class Video extends Component {
       console.log('新加⼊房间者', participant);
       this.saveLog('mrtc someone joined room, userId=' + participant)
       this.state.isCustomer = true
+
+      if (participant.includes(IPAD_SUFFIX) && this.state.businessId){
+        this.saveVideoPoint('padConnected', 'ipad已连接');
+      }
     };
     // 推送“有新发布”给与会者
     this.test_controller.OnNewPublish = (feed) => {
@@ -2915,6 +2936,15 @@ class Video extends Component {
       }
 
       console.log('退出房间回调', leaveType);
+      // if (leaveType != 1) {
+      //   this.props.onLeaveRoom({
+      //     code: LEAVE_TYPE.TELLER_DISCONNECT,
+      //     errMsg: '坐席断开连接'
+      //   })
+      //   this.setState({
+      //     isDisconnectModalVisible: true
+      //   })
+      // }
     };
     // 推送“退出房间者”给与会者
     this.test_controller.OnParticipantLeaveRoom = (
@@ -2938,13 +2968,13 @@ class Video extends Component {
           IpadLeaveErrorModalVisible: true,
           ipadTag: '',
         })
-        // 循环播放录制中断语音
-        clearTimeout(this.ipadLeavePlay)
+        // 循环播放ipad退出语音
+        clearTimeout(this.ipadLeavePlayTimer)
         this.ipadLeavePlay = () => {
           if(!this.state.ipadTag && document.getElementById("publish_streamId1")){
             let audio = new Audio(IpadLeaveAudio)
             audio.play()
-            setTimeout(this.ipadLeavePlay, 3000);
+            this.ipadLeavePlayTimer = setTimeout(this.ipadLeavePlay, 3000);
           }
         }
         setTimeout(this.ipadLeavePlay, 0);
@@ -3000,9 +3030,10 @@ class Video extends Component {
     // 弱网回调
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
-      if (sid == document.getElementById('publish_streamId1').name) {
+      if (sid == document.getElementById('publish_streamId1').name || sid == document.getElementById('video20').name) {
+        const stream = sid == document.getElementById('publish_streamId1').name ? this.mediaInfo : this.videoInfo
         
-        this.detectNetworkWeak().then((isWeak) => {
+        this.detectNetworkWeak(stream).then((isWeak) => {
           console.log('弱网结果：' + isWeak)
           if (isWeak) {
             this.messageClick('当前网络环境较差', 'error')
@@ -3194,13 +3225,13 @@ class Video extends Component {
         })
         this.saveLog(`dual recording crash, recordId=${recordId}`);
         // 循环播放录制中断语音
-        clearTimeout(this.recordLoopPlay)
+        clearTimeout(this.recordLoopPlayTimer)
         this.recordLoopPlay = () => {
           console.log('loop recordId', this.state.recordId, 'businessRecordId ', this.state.businessRecordId)
           if(!this.state.businessRecordId && document.getElementById("publish_streamId1")){
             let audio = new Audio(recordErrorAudio)
             audio.play()
-            setTimeout(this.recordLoopPlay, 3000);
+            this.recordLoopPlayTimer = setTimeout(this.recordLoopPlay, 3000);
           }
         }
         setTimeout(this.recordLoopPlay, 0);
@@ -3674,10 +3705,10 @@ class Video extends Component {
     worker.postMessage(false);
     worker.terminate();
     message.destroy()
-    clearTimeout(this.loopPlay)
-    clearTimeout(this.recordLoopPlay)
-    clearTimeout(this.ipadLeavePlay)
-    clearTimeout(this.ipadLowPowerPlay)
+    clearTimeout(this.loopPlayTimer)
+    clearTimeout(this.recordLoopPlayTimer)
+    clearTimeout(this.ipadLeavePlayTimer)
+    clearTimeout(this.ipadLowPowerPlayTimer)
     clearInterval(this.state.drawCanvasInterval)
     clearInterval(this.state.faceDetectionTimer);
     clearInterval(this.state.imageDetectionTimer);
@@ -3995,10 +4026,8 @@ class Video extends Component {
           let matchArr = re.data.matchRawTextItems.map(el => el.matchedText);
           this.saveVideoPoint('pwd', `${resultValue}`, matchArr.toString())
           if (matchArr.length>0) {
-                matchArr.forEach(el => {
-                  this.messageClick('检测到敏感词:' + matchArr, 'error')
-                })
-              }
+            this.messageClick('检测到敏感词:' + matchArr, 'error')
+          }
         }
       }); 
     }
@@ -4373,12 +4402,16 @@ class Video extends Component {
     this.pictureInPictureClick('add')
     this.setState({isPictureConfirmModalVisible: false})
   }
+  isDisconnectModalVisible = () => {
+    this.setState({isDisconnectModalVisible: false})
+  }
   handleOkRecordConfirm = () => {
     if (!this.state.isPictureInPicture) {
       this.pictureInPicture()
     }
     this.saveLog('Start business recording')
     this.enableServerRecording(this.state.businessId)
+    clearTimeout(this.recordLoopPlayTimer)
   }
   handleOkLowPowerConfirm = () => {
     // 通知ipad，获取是否在充电的状态
@@ -4393,7 +4426,7 @@ class Video extends Component {
     if (!this.state.ipadTag) {
       this.messageClick('未检测到iPad，请重新加入后再试', 'error')
     } else {
-      clearTimeout(this.ipadLeavePlay)
+      clearTimeout(this.ipadLeavePlayTimer)
       this.setState({IpadLeaveErrorModalVisible: false})
     }
   }
@@ -5455,6 +5488,7 @@ class Video extends Component {
 
       }, error => {
         console.log("Unable to acquire screen capture", error);
+        console.log('取消签署')
       });
   }
   publishRecorderDevice = () => {
@@ -6787,6 +6821,14 @@ class Video extends Component {
           ]}>
             <div className='endModal'>视频浮窗已关闭，请重新开启</div>
           </Modal>
+          {/* 连接断开 */}
+          {/* <Modal closable={false} centered={true} visible={this.state.isDisconnectModalVisible} maskClosable={false} footer={[
+            <div key='end'>
+              <Button className="modelButtonOk" type="primary" danger onClick={this.isDisconnectModalVisible}>确定</Button>
+            </div>
+          ]}>
+            <div className='endModal'>您的连接已断开，请稍后重试</div>
+          </Modal> */}
           {/* 双录中断重新开启确认 */}
           <Modal closable={false} centered={true} visible={this.state.isRecordingeErrorModalVisible} maskClosable={false} footer={[
             <div key='end'>