react_hsbc_teller 1.9.34 → 1.9.36

package/package.json

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

package/packages/pages/video/video.jsx

@@ -47,7 +47,7 @@ import Step from '../components/step/step.jsx'
 import axios from 'axios';
 import CryptoJS from "crypto-js";
 
-const SDK_VERISON = '1.9.34'
+const SDK_VERISON = '1.9.36'
 const IDtypeFront = '请客户在其设备后置摄像头下展示证件正面（如：身份证照片页面）'
 const IDtypeBack = '请在后置摄像头下展示证件反面（如：身份证国徽页）'
 const { Option } = Select;
@@ -72,6 +72,8 @@ let isSuccuseHs = false
 let isGraffiti = false
 let strokeColor = '#333'
 let clearTime
+let beautyMode = 'none'
+let hsMode = 'none'
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props => props.zIndexNum};
@@ -117,7 +119,7 @@ function clearStreamRemain() {
 };
 async function startBeauty(stream) {
   await beautyInit();
-  beautyStart(stream, "none");
+  beautyStart(stream, beautyMode);
 }
 async function startMix(stream, onState) {
   var drawCanvas = document.getElementById('canvas');
@@ -133,21 +135,25 @@ async function startHs(stream) {
 
   await hsInit();
 
-  hsStart(stream, 'none');
+  hsStart(stream, hsMode);
 
 }
 
 async function stopHs() {
-  var stop_stream = true;//控制是否内部来进行关闭流
-  var stream = hsStop(stop_stream);
-  if (stream != null && stream != undefined) {
-    stream.getTracks().forEach((track) => {
-      track.stop();
-    });
-    stream = null;
+  try {
+    var stop_stream = true;//控制是否内部来进行关闭流
+    var stream = hsStop(stop_stream);
+    if (stream != null && stream != undefined) {
+      stream.getTracks().forEach((track) => {
+        track.stop();
+      });
+      stream = null;
+    }
+    isSuccuseHs = false
+  } catch (err) {
+    console.log('stopHs Error')
+    console.log(err)
   }
-  isSuccuseHs = false
-
 }
 async function mixStopClick() {
   var stop_stream = true;//控制是否内部来进行关闭流
@@ -965,6 +971,100 @@ class Video extends Component {
       this.selectCustomer('facial')
     }
   };
+  generateMediaInfo = (sid) => {
+    let that = this
+    console.log(that.test_controller, sid)
+    console.log(that.test_controller.GetMediaInfo(sid))
+    let originalMediaInfo = that.test_controller.GetMediaInfo(sid);
+    let mediaInfo = {
+      peer_connection_: originalMediaInfo.peer_connection_,
+      local_video_width: originalMediaInfo.local_video_width,
+      local_video_height: originalMediaInfo.local_video_height,
+      local_video_frame: originalMediaInfo.local_video_frame,
+      local_video_bitrate: originalMediaInfo.local_video_bitrate,
+      stream_type: originalMediaInfo.stream_type,
+      stat_interval_: 3,
+      video_send_packets_base_: 0,
+      video_recv_packets_base_: 0,
+      video_send_lost_pack_base_: 0,
+      video_recv_lost_pack_base_: 0,
+      audio_send_packets_base_: 0,
+      audio_recv_packets_base_: 0,
+      audio_send_lost_pack_base_: 0,
+      audio_recv_lost_pack_base_: 0,
+      video_send_qpsum_base: 0,
+      video_send_frame_encoded_base: 0,
+      video_recv_qpsum_base: 0,
+      video_recv_frame_decoded_base: 0,
+      video_send_bitrate_base_: 0,
+      video_recv_bitrate_base_: 0,
+      audio_send_bitrate_base_: 0,
+      audio_recv_bitrate_base_: 0,
+    };
+    return mediaInfo;
+  }
+  detectNetworkWeak = () => {
+    return new Promise((resolve, reject) => {
+      let detectionsNumber = 3
+    let finalResult = true
+    let setTimer = () => {
+      setTimeout(() => {
+        this.test_controller.GetStats(this.mediaInfo).then(media_stat => {
+          if (detectionsNumber>2) {
+            // 不考虑第一次的评估结果，重新计算码率
+            detectionsNumber--;
+            setTimer()
+            return
+          }
+          console.log('media_stat:')
+          console.log(media_stat)
+          // 分辨率、帧率
+          let googAvailableSendBandwidth = (media_stat["VideoBwe"]["googAvailableSendBandwidth"] / 1000).toFixed(2);
+          let googTransmitBitrate = (media_stat["VideoBwe"]["googTransmitBitrate"] / 1000).toFixed(2);
+          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_str = "网络正常";
+          if (googAvailableSendBandwidth < weak_googAvailableSendBandwidth) {
+            weak_str = "当前网络不佳";
+          }
+          let bpsSend = (media_stat.ssrcVideoSend["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" + "; "
+            + "视频丢包率:" + (ssrcVideoSendLostRate == undefined ? "none" : ssrcVideoSendLostRate + "%") + "; "
+            + "音频丢包率:" + (ssrcAudioSendLostRate == undefined ? "none" : ssrcAudioSendLostRate + "%") + "; "
+            + weak_str + "; "
+            + "当前编码格式:" + media_stat["ssrcVideoSend"].googCodecName + "; "
+            + "分辨率:" + media_stat["ssrcVideoSend"].resolution + "; "
+            + "帧率:" + media_stat["ssrcVideoSend"].googFrameRateSent;
+            console.log('弱网', str)
+          // document.getElementById("publish_media_stat1").innerText = str;
+          let result =  (bpsSend < 200 ) && googAvailableSendBandwidth < weak_googAvailableSendBandwidth
+          if (result) {
+            console.log('[!]弱网单次评估' + result);
+          } else {
+            finalResult = false
+            console.log('弱网单次评估' + result);
+          }
+          if (detectionsNumber > 0 && finalResult) {
+            detectionsNumber -= 1
+            setTimer();
+          } else {
+            console.log('弱网综合检测结果：' + finalResult)
+            resolve(finalResult)
+          }
+        });
+        
+      }, 3000) 
+    } 
+    setTimer()
+    })
+  }
   ocrClick = () => {
     if (this.isFileSuccuse()) {
       this.state.faceCustomerType = 2
@@ -1779,10 +1879,12 @@ class Video extends Component {
         console.log('tag1', stream)
         let newStream = stream;
         if (stream.getVideoTracks()[0]) {
-          await startBeauty(newStream);
-          newStream = beautyCaptureStream();
-          await startHs(newStream);
-          newStream = hsCaptureStream();
+          if (this.state.beautyType || isSuccuseHs){
+            await startBeauty(newStream);
+            newStream = beautyCaptureStream();
+            await startHs(newStream);
+            newStream = hsCaptureStream();
+          }
           // 清理原始流
           newStream.oninactive = function () {
             clearOriginStream(stream);
@@ -1915,6 +2017,8 @@ class Video extends Component {
           },
           1000
         );
+        this.mediaInfo = this.generateMediaInfo(document.getElementById("publish_video1").name);
+
       } else {
         var box = document.getElementById("whiteboardDIV");
         var box1 = document.getElementById("operate")
@@ -2342,21 +2446,26 @@ class Video extends Component {
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
       if (sid == document.getElementById('publish_video1').name) {
-        this.messageClick('当前网络环境较差', 'error')
-        this.saveLog('mrtc OnNetworkWeak')
-
-        if (this.props.isWeakSound && this.state.ablePlayNetweakAudio) {
-          this.state.ablePlayNetweakAudio = false;
-          let src = networkWeakAudio
-          let audio = new Audio(src)
-          audio.play()
-          setTimeout(() => {
-            this.state.ablePlayNetweakAudio = true;
-          }, 30000);
-        }
-        if (this.props.OnNetworkWeak) {
-          this.props.OnNetworkWeak(bpsSend, bpsRecv, sid)
-        }
+        
+        this.detectNetworkWeak().then((isWeak) => {
+          console.log('弱网结果：' + isWeak)
+          if (isWeak) {
+            this.messageClick('当前网络环境较差', 'error')
+            this.saveLog('mrtc OnNetworkWeak')
+            if (this.props.isWeakSound && this.state.ablePlayNetweakAudio) {
+              this.state.ablePlayNetweakAudio = false;
+              let src = networkWeakAudio
+              let audio = new Audio(src)
+              audio.play()
+              setTimeout(() => {
+                this.state.ablePlayNetweakAudio = true;
+              }, 30000);
+            }
+            if (this.props.OnNetworkWeak) {
+              this.props.OnNetworkWeak(bpsSend, bpsRecv, sid)
+            }
+          }
+        })
         
       }
     };
@@ -4633,16 +4742,39 @@ class Video extends Component {
       this.setState({
         beautyName: '开启美颜'
       })
+      beautyMode = 'none'
       beautySetMode('none')
+      beautyStop()
+      if(!isSuccuseHs) {
+        stopHs()
+      }
     } else {
       this.state.beautyType = true
+      beautyMode = 'beauty'
       beautySetMode('beauty')
       this.setState({
         beautyName: '关闭美颜'
       })
     }
+    this.changeMediaStream();
 
   }
+  changeMediaStream = () => {
+    let publish_config = {}
+      publish_config.sid = document.getElementById('publish_video1').name
+      publish_config.media_type = 1
+      publish_config.publish_device = 1
+      // publish_config.videoSource = this.state.cameraValue
+      // publish_config.audioSource = this.state.microphoneValue
+      publish_config.need_volume_analyser = true
+      publish_config.video_profile_type = 100
+      publish_config.video_profile_diy = { width: 640, height: 360, frameRate: 15, bitrate: 400 }
+      // publish_config.publish_video_id = 'publish_video1'
+      // publish_config.publish_streamId_id = 'publish_streamId1'
+      // publish_config.publish_tag = 'tag1'
+      this.test_controller.ChangeMediaStream(publish_config)
+  }
+
   componentDidMount() {
     var box = document.getElementById("whiteboardDIV");
     var box1 = document.getElementById("operate")
@@ -4794,11 +4926,18 @@ class Video extends Component {
     if (!isSuccuseHs) {
 
       hsSetMode('blur')
+      hsMode = 'blur'
       isSuccuseHs = true
     } else {
       hsSetMode('none')
+      hsMode = 'none'
       isSuccuseHs = false
+      stopHs()
+      if(!this.state.beautyType) {
+        beautyStop()
+      }
     }
+    this.changeMediaStream();
   }
   virtualization = () => {
     this.virtualizationClick()

package/packages/pages/video/video.less

@@ -419,7 +419,7 @@
   border-spacing: 20px!important;
 }
 .modelButtonFaceOkColorFile{
-  width: 170px!important;
+  min-width: 170px!important;
   height: 40px!important;
   font-size: 16px!important;
   color: #5C5C5C!important;