react_hsbc_teller 2.0.9 → 2.0.11

package/package.json

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

package/packages/pages/video/video.jsx

@@ -53,7 +53,7 @@ import Step from '../components/step/step.jsx'
 import axios from 'axios';
 import CryptoJS from "crypto-js";
 
-const SDK_VERISON = '2.0.9'
+const SDK_VERISON = '2.0.11'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -81,8 +81,9 @@ let streamShare
 let streamRecord
 let videoName
 let muteJson = new Map()
-let dateTime = 0
+// let dateTime = 0
 let messageValue = ''
+let messageValueMap = new Map()
 // let beautyType = false
 // let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
@@ -655,13 +656,13 @@ class Video extends Component {
           width: 213,
           height: 175
         },
-        {
-          tag: 'sharedScreen', // 一期暂时不需要录制
-          xPosition: 960,
-          yPosition: 180,
-          width: 320,
-          height: 180
-        }
+        // {
+        //   tag: 'sharedScreen', // 一期暂时不需要录制
+        //   xPosition: 960,
+        //   yPosition: 180,
+        //   width: 320,
+        //   height: 180
+        // }
       ]
       Array.isArray(res) ?
         res.map((item) => {
@@ -934,47 +935,38 @@ class Video extends Component {
       this.messageClick('当前暂无客户', 'error')
     }
   }
-  messageClick = (value, valueOne) => {
-    console.log(value, valueOne)
-    if (messageValue != value) {
+  messageClick = (value, tipType) => {
+    console.log('messageClick', value, tipType)
+    const intervalSec = 15 // 相同提示触发间隔
+    const durationSec = 10 // 提示持续时间
+    if (messageValueMap.get(value) == undefined) {
+      // map中没有相同消息
       messageValue = value
-      dateTime = new Date().getTime()
-      if (valueOne == 'error') {
-        message.error({
-          content: value,
-          icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-          className: 'errorClassName',
-          top: 200,
-          duration: 10
-        })
-      } else if (valueOne == 'success') {
-        message.success({
-          content: value,
-          icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-          className: 'successClassName',
-          top: 200,
-          duration: 10
-        })
-      }
-    } else if (((new Date().getTime()) - dateTime) / 1000 > 30) {
-      dateTime = new Date().getTime()
-      if (valueOne == 'error') {
+      messageValueMap.set(value, setTimeout(() => {
+        messageValueMap.delete(value) 
+      }, intervalSec * 1000))
+
+      if (tipType == 'error') {
         message.error({
           content: value,
           icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
           className: 'errorClassName',
           top: 200,
-          duration: 10
+          duration: durationSec
         })
-      } else if (valueOne == 'success') {
+      } else if (tipType == 'success') {
         message.success({
           content: value,
           icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
           className: 'successClassName',
           top: 200,
-          duration: 10
+          duration: durationSec
         })
       }
+      clearTimeout(this.messageClearTimer)
+      this.messageClearTimer = setTimeout(() => {
+        messageValue = ''
+      }, durationSec * 1000);
     }
 
   }
@@ -1188,11 +1180,14 @@ class Video extends Component {
     worker = new Worker(url);
     window.URL.revokeObjectURL(blob);
 
-
     worker.onmessage = () => {
-      cobj.clearRect(0, 0, 640, 360 * this.state.listVideoPicture.length);
+      const messageBoxHeight = 50;
+      const recordBoxHeight = 50; // this.state.businessRecordId ? 50 : 0;
+      const baseStartHeight = messageBoxHeight + recordBoxHeight
+
+      cobj.clearRect(0, 0, 640, 360 * this.state.listVideoPicture.length + baseStartHeight);
       canvas.width = 640;
-      canvas.height = 360 * this.state.listVideoPicture.length;
+      canvas.height = 360 * this.state.listVideoPicture.length + baseStartHeight;
       for (let i = 0; i < this.state.listVideoPicture.length; i++) {
 
         let videoId = this.state.listVideoPicture[i].name;
@@ -1208,15 +1203,15 @@ class Video extends Component {
         }
         if (this.state.listVideoPicture[i].noVideo) {
           cobj.fillStyle = '#333';
-          cobj.fillRect((640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight)
+          cobj.fillRect((640 - newVideoWidth) / 2, 360 * i + baseStartHeight, newVideoWidth, newVideoHeight)
         } else {
-          cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, 640, 360);
+          cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i + baseStartHeight, 640, 360);
 
         }
         cobj.beginPath();
         cobj.strokeStyle = this.props.titleColor;
         cobj.fillStyle = this.props.titleBackground;
-        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60)
+        cobj.fillRect(0, 360 * (i + 1) - 60 + baseStartHeight, 300, 60)
         cobj.fill();
         cobj.stroke();
         cobj.beginPath();
@@ -1234,12 +1229,12 @@ class Video extends Component {
             break;
           }
         }
-        cobj.strokeText(str, 70, 360 * (i + 1) - 20);
+        cobj.strokeText(str, 70, 360 * (i + 1) - 20 + baseStartHeight);
         cobj.stroke();
         //左边框
         cobj.beginPath();
-        cobj.moveTo(0, 0);
-        cobj.lineTo(0, 360 * this.state.listVideoPicture.length);
+        cobj.moveTo(0, 0 + baseStartHeight);
+        cobj.lineTo(0, 360 * this.state.listVideoPicture.length + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1247,8 +1242,8 @@ class Video extends Component {
 
         //下边框
         cobj.beginPath();
-        cobj.moveTo(0, 0);
-        cobj.lineTo(640, 0);
+        cobj.moveTo(0, 0 + baseStartHeight);
+        cobj.lineTo(640, 0 + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1256,8 +1251,8 @@ class Video extends Component {
 
         //右边框
         cobj.beginPath();
-        cobj.moveTo(640, 360 * this.state.listVideoPicture.length);
-        cobj.lineTo(640, 0);
+        cobj.moveTo(640, 360 * this.state.listVideoPicture.length + baseStartHeight);
+        cobj.lineTo(640, 0 + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1266,8 +1261,8 @@ class Video extends Component {
 
         //上边框
         cobj.beginPath();
-        cobj.moveTo(0, 360 * this.state.listVideoPicture.length);
-        cobj.lineTo(640, 360 * this.state.listVideoPicture.length);
+        cobj.moveTo(0, 360 * this.state.listVideoPicture.length + baseStartHeight);
+        cobj.lineTo(640, 360 * this.state.listVideoPicture.length + baseStartHeight);
         cobj.closePath(); //闭合路径
         cobj.lineWidth = 5; //线的边框为10像素
         cobj.strokeStyle = '#d9363e';
@@ -1278,9 +1273,9 @@ class Video extends Component {
         var img = document.getElementById("icon_huatong");
         var img1 = document.getElementById("icon_huatong_close");
         if (this.state.listVideoPicture[i].mute) {
-          cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+          cobj.drawImage(img1, 10, 360 * (i + 1) - 60 + baseStartHeight, microphoneSize, microphoneSize);
         } else {
-          cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+          cobj.drawImage(img, 10, 360 * (i + 1) - 60 + baseStartHeight, microphoneSize, microphoneSize);
 
           // 绘制实时音量
           let sid = document.getElementById(this.state.listVideoPicture[i].name).name
@@ -1297,9 +1292,9 @@ class Video extends Component {
               // 以画布左上角为坐标原点
               let drawArea = {
                 x1: 28 / 50 * microphoneSize + 10, // 波动范围右下角的点坐标
-                y1: 25 / 50 * microphoneSize + 360 * (i + 1) - 60,
+                y1: 25 / 50 * microphoneSize + 360 * (i + 1) - 60 + baseStartHeight,
                 x2: 22 / 50 * microphoneSize + 10,  // 波动范围左上角的点坐标
-                y2: 10 / 50 * microphoneSize + 360 * (i + 1) - 60,
+                y2: 10 / 50 * microphoneSize + 360 * (i + 1) - 60 + baseStartHeight,
               }
 
 
@@ -1329,26 +1324,51 @@ class Video extends Component {
         }
 
       }
-
-      // 敏感词提示
-      let str = this.state.sensitiveTitle || ''
-      if (str)
-        cobj.fillStyle = 'red';
-        cobj.font = "normal lighter 32px sans-serif";
-        const textWidth = Math.min(cobj.measureText(str).width, 610)
-        cobj.fillRect(320 - textWidth/ 2, 24, textWidth, 32)
+      // 录制中状态
+      if (this.state.businessRecordId) {
+        let str = '· 录制中'
+        cobj.fillStyle = '#F8F2F3';
+        cobj.font = "normal lighter 30px sans-serif";
+        // cobj.fillRect(0, 0, 640, recordBoxHeight)
         cobj.textAlign = 'center';
-        cobj.strokeStyle = 'white';
+        cobj.strokeStyle = 'red';
         cobj.lineWidth = 2
-        for (let k = 0; k < str.length; k++) {
-          if (cobj.measureText(str.substring(0, k + 1)).width > 610) {
-            str = str.substring(0, k - 2)
-            str += '...'
-            break;
-          }
-        }
-        cobj.strokeText(str, 320, 50);
+        cobj.strokeText(str, 320, recordBoxHeight - 15);
         cobj.stroke();
+      }
+      // 消息提示
+      if (messageValue) {
+        let str = messageValue
+        cobj.fillStyle = '#F8F2F3';
+        cobj.font = "normal lighter 30px sans-serif";
+        // const textWidth = Math.min(cobj.measureText(str).width, 610)
+        cobj.fillRect(0, recordBoxHeight, 640, messageBoxHeight)
+        cobj.textAlign = 'center';
+        cobj.strokeStyle = 'black';
+        cobj.lineWidth = 2
+        cobj.strokeText(str, 320, recordBoxHeight + messageBoxHeight - 15);
+        cobj.stroke();
+      }
+
+      // 敏感词提示
+      // let str = this.state.sensitiveTitle || ''
+      // if (str)
+      //   cobj.fillStyle = 'red';
+      //   cobj.font = "normal lighter 32px sans-serif";
+      //   const textWidth = Math.min(cobj.measureText(str).width, 610)
+      //   cobj.fillRect(320 - textWidth/ 2, 24, textWidth, 32)
+      //   cobj.textAlign = 'center';
+      //   cobj.strokeStyle = 'white';
+      //   cobj.lineWidth = 2
+      //   for (let k = 0; k < str.length; k++) {
+      //     if (cobj.measureText(str.substring(0, k + 1)).width > 610) {
+      //       str = str.substring(0, k - 2)
+      //       str += '...'
+      //       break;
+      //     }
+      //   }
+      //   cobj.strokeText(str, 320, 50);
+      //   cobj.stroke();
     };
 
     const captureStream = canvas.captureStream();
@@ -1365,6 +1385,7 @@ class Video extends Component {
       pictureInPictureVideo.style.display = 'block';
       pictureInPictureVideo.play();
       this.state.isPictureInPicture = true
+      clearTimeout(this.loopPlay)
     });
 
     pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
@@ -1374,20 +1395,23 @@ class Video extends Component {
       this.state.listVideoPicture = []
       worker.postMessage(false);
       this.state.isPictureInPicture = false
-      
+
+      clearTimeout(this.loopPlay)
       // 画中画循环播放逻辑
-      this.setState({
-        isPictureConfirmModalVisible: true
-      })
-      const loopPlay = () => {
-        console.log('loopPlay status', this.state.isPictureInPicture);
-        if(!this.state.isPictureInPicture && document.getElementById("publish_video1")){
-          let audio = new Audio(PIPictureClosedAudio)
-          audio.play()
-          setTimeout(loopPlay, 3000);
+      if (document.hidden) {
+        this.setState({
+          isPictureConfirmModalVisible: true
+        })
+        this.loopPlay = () => {
+          console.log('loopPlay status', this.state.isPictureInPicture);
+          if(!this.state.isPictureInPicture && document.getElementById("publish_video1")){
+            let audio = new Audio(PIPictureClosedAudio)
+            audio.play()
+            setTimeout(this.loopPlay, 3000);
+          }
         }
+        setTimeout(this.loopPlay, 0);
       }
-      setTimeout(loopPlay, 0);
     });
 
   }
@@ -3580,6 +3604,10 @@ class Video extends Component {
     //   console.log('detectNetworkWeak')
     //   this.test_controller.detectNetworkWeak()        
     // }
+    // window.document.start = () => {
+    //   this.startFaceDetection();
+    //   this.startImageDetection();
+    // }
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -5918,6 +5946,14 @@ class Video extends Component {
       </div>
     )
 
+    const isEnvironmentOK = !this.state.loading && 
+                            this.state.envInfo.networkResult=='合格' &&
+                            this.state.envInfo.batteryResult=='合格' &&
+                            this.state.envInfo.memoryResult=='合格' &&
+                            this.state.envInfo.cameraResult=='合格' &&
+                            this.state.envInfo.microResult=='合格' &&
+                            this.state.envInfo.lightResult=='合格'
+
     const sectionStyle = this.state.tabTitles.length > 0 ? {
       zIndex: '-1',
       width: '100%',
@@ -6588,7 +6624,7 @@ class Video extends Component {
           <Modal title="环境检测" maskClosable={false} width={650} closable={false} centered={true} visible={this.state.isModalVisibleEnvironment} footer={[
             <div key='env'>
               {/* <Button className="modelButtonCancel" onClick={this.handleCancelEnvDetection}>取消</Button> */}
-              <Button className="modelButtonOk" type="primary" disabled={this.state.loading} danger onClick={this.handleOkEnvDetection}>确定</Button>
+              <Button className={isEnvironmentOK ?"modelButtonOk": "modelButtonNo"} type="primary" disabled={!isEnvironmentOK } danger onClick={this.handleOkEnvDetection}>确定</Button>
             </div>
           ]}>
              <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} ghost>