react_hsbc_teller 2.0.3 → 2.0.4-6.1

package/packages/pages/video/video.less

@@ -276,6 +276,7 @@
   font-size: 22px;
     color: #222222;
     font-weight: 600;
+    transform: translateX(-100px);
   ul{
     li{ 
       list-style: none;
@@ -328,6 +329,27 @@
     padding: 6px 13px;
   }
 }
+.envClass {
+  margin-bottom: 0;
+  padding-left: 1.25rem;
+}
+.ant-collapse > .ant-collapse-item > .ant-collapse-header{
+  font-weight: bold;
+}
+.ant-collapse > .ant-collapse-item.panel-error > .ant-collapse-header{
+  color: #DA0110;
+}
+.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box{
+  padding-top: 0 !important;
+}
+.ant-collapse-header{
+  img{
+    width: 16px;
+    height: 16px;
+    margin-left: 10px;
+    margin-bottom: 1px;
+  }
+}
 .voiceClass{
   width: 25Px;
   height: 25.3Px;
@@ -419,7 +441,7 @@
   border-spacing: 20px!important;
 }
 .modelButtonFaceOkColorFile{
-  width: 170px!important;
+  min-width: 170px!important;
   height: 40px!important;
   font-size: 16px!important;
   color: #5C5C5C!important;
@@ -432,6 +454,22 @@
     padding: 56px 30px 0px 30px;
     color: #333333;
 }
+.ipadModal{
+  font-size: 16px;
+  padding: 36px 30px 0px 30px;
+  color: #333333;
+}
+.ipadModal .ant-modal-body{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.ipadCode{
+  margin-top: 16px;
+  margin-bottom: 16px;
+  margin-left: 30px;
+  position: relative;
+}
 .inspection{
   font-size: 16px;
   margin: 20px 50px;
@@ -622,4 +660,56 @@ display: inline-flex;
 .imgDIV{
   margin: 0 !important;
   text-align:center;
-}
+}
+.QRCode{
+  position: absolute;
+  right: -200px;
+  top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .num{
+    background: #DB0011;
+    border-radius: 20px;
+    padding: 0 15px;
+    text-align: center;
+    line-height: 40px;
+    height: 40px;
+    color: white;
+    margin-top: 5px;
+  }
+  .sessionDiv{
+    display: flex;
+    flex-direction: column;
+    span{
+      margin-bottom: 3px;
+      font-size: 16px;
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+  &.flex{
+    position: initial;
+    flex-direction: row;
+    .sessionDiv{
+      margin-left: 20px;
+    }
+    .num{
+      margin-top: 0px;
+      font-weight: 500;
+      font-size: 1rem;
+    }
+  }
+  &.center{
+    position: initial;
+    .ipadCode{
+      margin-left: 0px;
+    }
+    .num{
+      margin-top: 0px;
+      font-weight: 500;
+      font-size: 1rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+}

package/packages/utils/asrController.js

@@ -0,0 +1,246 @@
+// import Recorder from "recorder-js"; 
+// import Recorder from "js-audio-recorder"; 
+// import Recorder from "./recorder"; 
+
+
+// console.log(Recorder)
+//生成32位随机数UUID
+function getRandomStrNum(){
+  var s = [];
+  var hexDigits = "0123456789abcdef";
+  for (var i = 0; i < 32; i++) {
+    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+  }
+  s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
+  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
+  s[8] = s[13] = s[18] = s[23];
+
+  var uuid = s.join("");
+  return uuid;
+}
+
+
+//获取ali的token
+let token = 'a07198021d434d1288cd4ab3178712cb';
+let appkey = 'E6DAPlpMun5L2dJ7';
+
+
+//定义ws的相关参数
+let websocket = null; //websocket实例
+let timer_websocket = null; //websocket定时器, 用于实时获取语音转文本的结果
+let websocket_task_id = null; //websocket任务id 整个实时语音识别的会话ID，整个请求中需要保持一致，32位唯一ID。
+let websocket_audio2txt_time = 0; //websocket 语音转文本  一句话收集完毕的时间，用于判断间隔 
+let websocket_audio2txt_result_msg = null; //websocket实例 音频转文字的结果
+let websocket_audio2txt_result_msg_temp = null; //websocket实例 音频转文字的结果
+let websocket_audio2txt_complete_b = false; //websocket 语音转文本  是否完成   true:完毕  false:未完毕
+let websocket_audio2txt_complete_time_end = 100;  //websocket 语音转文本 判断文本是否收集完毕的阈值  单位毫秒 
+
+export default class MyAsrController {
+  constructor(headers) {
+    console.log('MyAsrController', headers, headers.appKey)
+    this.token = headers.token || 'default';
+    this.appKey = headers.appKey;
+    this.url = headers.url;
+
+    //初始化录音实例
+    // this.recorderInstance = new Recorder({
+    //   sampleBits: 16,                 // 采样位数，，默认是16
+    //   sampleRate: 16000,              //音频采样率，默认是16000Hz，
+    //   numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
+    //   compiling: true                 // 是否边录边转换，默认是false
+    // });
+    this.recorderInstance = headers.recorder
+    // console.log(this.recorderInstance)
+
+  }
+  onAsrMessage(data) {
+    console.log('onAsrMessage: ', data.result)
+  }
+  onSentenceEnd(data) {
+    console.log('onSentenceEnd: ', data)
+  }
+  onSentenceBegin(data) {
+    console.log('检测到了一句话的开始');
+  }
+  onConnectOK() {
+    console.log('连接成功');
+  }
+  onConnectError(data) {
+    console.log('连接错误');
+  }
+
+  initWebSocket() {
+    console.log("初始化weosocket");
+
+    //初始化参数
+    websocket_audio2txt_complete_b = false;
+    websocket_audio2txt_time = 0;
+
+    //检测如果未关闭、则先关闭在重连
+    if (this.websocket){
+      this.websocket.close();
+      this.websocket = null;
+    }
+    try{
+      console.log(`${this.url}?token=${this.token}`);
+      this.websocket = new WebSocket(`${this.url}?token=${this.token}`);
+      // this.websocket.debug = true;
+      
+      this.websocket.onmessage = this.websocketOnMessage.bind(this);
+      this.websocket.onopen = this.websocketOnOpen.bind(this);
+      this.websocket.onerror = this.websocketOnError.bind(this);
+      this.websocket.onclose = this.websocketClose.bind(this);
+    }catch(err) {
+      console.error(err)
+      this.onConnectError()
+    }
+
+  }
+  
+  Disconnect() {
+    try { 
+      this.recorderInstance.stop();
+    } catch(err){
+      console.log(err)
+    }
+    clearInterval(this.interval);
+    this.websocketStopTranscription()
+  }
+
+  websocketOnOpen() { // 连接建立之后执行send方法发送数据
+    //生成新的任务id
+    websocket_task_id = getRandomStrNum();
+    //生成ali的请求参数message_id
+    let message_id = getRandomStrNum();
+    const appKey = this.appKey;
+
+    let actions = {
+      "header":{
+        "namespace":"SpeechTranscriber",    //固定值  
+        "name": "StartTranscription",       //发送请求的名称，固定值
+        "appkey": appKey,                   //appkey
+        "message_id": message_id,           //消息id
+        "task_id": websocket_task_id,       //任务id  
+      },
+      "payload":{
+        "format": "PCM",//音频编码格式，默认是PCM（无压缩的PCM文件或WAV文件），16bit采样位数的单声道。
+        "sample_rate": 16000, //需要与录音采样率一致、默认是16000，单位是Hz。
+        "enable_intermediate_result": true, //是否返回中间识别结果，默认是false。
+        "enable_punctuation_prediction": true, //是否在后处理中添加标点，默认是false。
+        "enable_inverse_text_normalization": true, //是否在后处理中执行数字转写，默认是false。
+        "max_sentence_silence":300,//	语音断句检测阈值，静音时长超过该阈值会被认为断句，参数范围200ms～2000ms，默认值800ms。
+      }
+    }
+
+   //发送请求
+   this.websocketSend(JSON.stringify(actions));
+  }
+
+  websocketStopTranscription() {
+    //生成ali的请求参数message_id
+    let message_id = getRandomStrNum();
+    const appKey = this.appKey;
+
+    let actions = {
+      "header":{
+        "namespace":"SpeechTranscriber",    //固定值  
+        "name": "StopTranscription",       //发送请求的名称，固定值
+        "appkey": appKey,                   //appkey
+        "message_id": message_id,           //消息id
+        "task_id": websocket_task_id,       //任务id  
+      },
+    }
+
+   //发送请求
+   this.websocketSend(JSON.stringify(actions));
+  }
+
+  websocketOnError() {
+    console.log("连接建立失败");
+    this.onConnectError()
+    this.Disconnect()
+  }
+
+  websocketOnMessage(e) {
+    //接受ali 语音返回的数据
+    const ret = JSON.parse(e.data);
+    //判断返回的数据类型
+    if (ret.header.name === 'TranscriptionResultChanged'){
+      //数据在收集中 一句话的中间结果
+      // console.log('数据在收集中');
+      //实时获取语音转文本的结果
+      this.onAsrMessage({
+        result: ret.payload.result,
+        index: ret.payload.index,
+        words: ret.payload.words,
+      })
+      // ingText(ret.payload.result);
+    } else if (ret.header.name === 'SentenceBegin') {
+      //一句话开始后，就可以启动录音了
+      this.onSentenceBegin({
+        index: ret.payload.index,
+      })
+    } else if (ret.header.name === 'TranscriptionStarted') {
+      console.log("服务端已经准备好了进行识别，客户端可以发送音频数据了");
+      this.onConnectOK();
+      //获取音频信息，定时获取并发送
+      this.interval = setInterval(() => {
+        this.getPCMAndSend();
+      }, 100)
+    } else if (ret.header.name === 'SentenceEnd') {
+      // console.log('数据接收结束', ret);
+      this.onSentenceEnd({
+        result: ret.payload.result,
+        index: ret.payload.index,
+      })
+    } else if ( ret.header.name === 'TranscriptionCompleted') {
+      console.log('服务端已停止了语音转写', ret);
+    } 
+  }
+
+  websocketSend(Data) { // 数据发送
+    //console.log('websocket 数据发送',data);
+    //判断是否连接成功,连接成功再发送数据过去
+    if (this.websocket.readyState===1){
+      this.websocket.send(Data);
+    } else {
+      console.log('websock未连接-------------------');
+    }
+  }
+
+  websocketClose(e) { // 关闭
+    console.log('断开连接', e);
+    // window.IMOpenfire('false')
+  }
+
+  //获取音频信息，并发送
+getPCMAndSend() {
+  //获取音频信息
+  let NextData = this.recorderInstance.getNextData();
+  let blob = new Blob(NextData)
+  let blob_size = blob.size;
+  // console.log("获取音频信息，并发送,blob_size:"+blob_size , blob);
+
+
+  //ali最大支持3200字节的音频
+  let max_blob_size = 3200;//支持1600 或3200
+  let my_num = blob_size/max_blob_size;
+  my_num = my_num + 1;
+
+  //切分音频发送
+  for (let i = 0; i < my_num; i++) {
+      var end_index_blob = max_blob_size*(i+1);
+      //判断结束时候的分界
+      if(end_index_blob > blob_size){
+          end_index_blob = blob_size;
+      }
+      //切分音频
+      var blob2 = blob.slice(i*max_blob_size,end_index_blob);
+      //生成新的blob
+      const newbolb = new Blob([blob2], {type: 'audio/pcm'})
+      //发送
+      this.websocketSend(newbolb);
+  }
+}
+
+}

package/packages/utils/utils.js

@@ -0,0 +1,122 @@
+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); //必须通过回调函数返回，否则无法及时拿到该值
+  }
+}
+function debounce(fn, delay = 500) {
+  // 是闭包中的
+  let timer
+  
+  // input事件调用的函数，相当于obj调用函数 this指向Input
+  return function() {
+     // 这个if 判断不做也没关系，判断了（除第一次非空的情况）也就是执行从第二次开始，在延迟时间内多次触发才会走该判断
+     if(timer) {clearTimeout(timer)}
+     // 此时的箭头函数的this 和 arguments 都是从外部函数继承而来
+     // 如果用普通函数就要用词法作用域 var tshat = this var arg = arguments
+     timer = setTimeout(() =>{
+        // 使得传入的回调函数的this 指向Input这个元素对象
+        // arguments是该事件的详情，可以获得该函数被调用时的所有参数,是一个event 对象（所有Dom事件都会传event对象进入）
+        // 直接使用 fn() 问题也不大
+        fn.apply(this,arguments) 
+        timer = null
+     },delay)
+ }
+}
+function isLight(src, sensitivity = 1) {
+  let gray = new cv.Mat() 
+  cv.cvtColor(src, gray, cv.COLOR_BGR2GRAY)
+  let sum = 0;
+  let avg = 0;
+  let scalar = new cv.Scalar() 
+  let ls = new Array();
+  let size = gray.rows * gray.cols;
+  for (let i = 0; i < 256; i++)
+      ls[i] = 0;
+
+  for (let i = 0; i < gray.rows; i++)
+  {
+      for (let j = 0; j < gray.cols; j++)
+      {
+          scalar = gray.ucharPtr(i, j);
+          sum += (scalar[0] - 128);
+          let x = scalar[0];
+          ls[x]++;
+      }
+  }
+  avg = sum / size;
+  let total = 0;
+  let mean = 0;
+  for (let i = 0; i < 256; i++)
+  {
+      total +=  Math.abs((i - 128) - avg) * ls[i];
+  }
+  mean = total / size;
+  let cast = Math.abs(avg / mean);
+
+  // 调用delete释放堆的内存
+  gray.delete();
+
+  console.log('亮度值:', cast)
+  if (typeof sensitivity == 'number') {
+    console.log('灵敏系数:', sensitivity)
+    console.log('计算值(<1正常):', cast * sensitivity)
+  } else {
+    console.error('sensitivity param should be type of number')
+    sensitivity = 1
+  }
+
+  //std::cout <<  "亮度异常值:" << cast << std::endl;
+  if (cast * sensitivity > 1)
+  {
+      if (avg > 0)
+      {
+        console.log('亮度异常 过亮:')
+          //std::cout << "亮度异常 过亮" << avg << std::endl;
+          return 1;
+      }
+      else {
+        console.log('亮度异常 过暗')
+          //std::cout << "亮度异常 过暗" << avg << std::endl;
+          return -1;
+      }
+  }
+  else
+  {
+    console.log('亮度正常')
+      //std::cout << "normal" << std::endl;
+      return 0;
+  }
+  
+}
+export {
+  compressImage,
+  debounce,
+  isLight
+}

package/packages/common/JKL.js

@@ -1,61 +0,0 @@
-const JKL = {};
-
-JKL.Dumper = function () {
-  return this;
-};
-
-//  Dump the data into JSON format
-
-JKL.Dumper.prototype.dump = function (data, offset) {
-  if (typeof (offset) === 'undefined') offset = '';
-  const nextoff = `${offset}  `;
-  switch (typeof (data)) {
-    case 'string':
-      return `"${this.escapeString(data)}"`;
-      break;
-    case 'number':
-      return data;
-      break;
-    case 'boolean':
-      return data ? 'true' : 'false';
-      break;
-    case 'undefined':
-      return 'null';
-      break;
-    case 'object':
-      if (data == null) {
-        return 'null';
-      } if (data.constructor == Array) {
-        var array = [];
-        for (let i = 0; i < data.length; i++) {
-          array[i] = this.dump(data[i], nextoff);
-        }
-        return `[\n${nextoff}${array.join(`,\n${nextoff}`)}\n${offset}]`;
-      }
-      var array = [];
-      for (let key in data) {
-        const val = this.dump(data[key], nextoff);
-        //              if ( key.match( /[^A-Za-z0-9_]/ )) {
-        key = `"${this.escapeString(key)}"`;
-        //              }
-        array[array.length] = `${key}: ${val}`;
-      }
-      if (array.length == 1 && !array[0].match(/[\n\{\[]/)) {
-        return `{ ${array[0]} }`;
-      }
-      return `{\n${nextoff}${array.join(`,\n${nextoff}`)}\n${offset}}`;
-
-      break;
-    default:
-      return data;
-      // unsupported data type
-      break;
-  }
-};
-
-//  escape '\' and '"'
-
-JKL.Dumper.prototype.escapeString = function (str) {
-  return str.replace(/\\/g, '\\\\').replace(/\"/g, '\\"');
-};
-export default JKL;