react_hsbc_teller 2.0.6 → 2.0.8-5.1

package/packages/utils/asrController.js

@@ -0,0 +1,259 @@
+// 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('连接错误');
+  }
+  onAsrError(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);
+    } 
+
+    if (ret.header.status != 20000000) {
+      this.onAsrError({
+        status: ret.header.status,
+        message: ret.header.status_text,
+        taskId: ret.header.task_id,
+      });
+    } else {
+      // console.log('status返回正常')
+    }
+  }
+
+  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/asyncComponent.jsx

@@ -1,27 +1,27 @@
-import React, { Component } from "react";
-
-export default function asyncComponent(importComponent) {
-  class AsyncComponent extends Component {
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        component: null
-      };
-    }
-
-    async componentDidMount() {
-      const { default: component } = await importComponent();
-
-      this.setState({component});
-    }
-
-    render() {
-      const C = this.state.component;
-
-      return C ? <C {...this.props} /> : null;
-    }
-  }
-
-  return AsyncComponent;
+import React, { Component } from "react";
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        component: null
+      };
+    }
+
+    async componentDidMount() {
+      const { default: component } = await importComponent();
+
+      this.setState({component});
+    }
+
+    render() {
+      const C = this.state.component;
+
+      return C ? <C {...this.props} /> : null;
+    }
+  }
+
+  return AsyncComponent;
 }

package/packages/utils/mixin.js

@@ -1,27 +1,27 @@
-export default methods => {
-  return target => {
-    Object.assign(target.prototype, methods);
-  }
-}
-
-/**
- * 字符串填充函数
- * @param  {string} value      目标字符串
- * @param  {array} position 需要填充的位置
- * @param  {string} padstr   填充字符串
- * @return {string}          返回目标字符串
- */
-export const padStr = (value, position, padstr, inputElement) => {
-  position.forEach((item, index) => {
-    if (value.length > item + index) {
-      value = value.substring(0, item + index) + padstr + value.substring(item + index)
-    }
-  })
-  value = value.trim();
-  // 解决安卓部分浏览器插入空格后光标错位问题
-  requestAnimationFrame(() => {
-    inputElement.setSelectionRange(value.length, value.length); 
-  })
-  return value;
-}
-
+export default methods => {
+  return target => {
+    Object.assign(target.prototype, methods);
+  }
+}
+
+/**
+ * 字符串填充函数
+ * @param  {string} value      目标字符串
+ * @param  {array} position 需要填充的位置
+ * @param  {string} padstr   填充字符串
+ * @return {string}          返回目标字符串
+ */
+export const padStr = (value, position, padstr, inputElement) => {
+  position.forEach((item, index) => {
+    if (value.length > item + index) {
+      value = value.substring(0, item + index) + padstr + value.substring(item + index)
+    }
+  })
+  value = value.trim();
+  // 解决安卓部分浏览器插入空格后光标错位问题
+  requestAnimationFrame(() => {
+    inputElement.setSelectionRange(value.length, value.length); 
+  })
+  return value;
+}
+

package/packages/utils/setRem.js

@@ -1,11 +1,11 @@
-(function(psdw){
-  var dpr=0 , rem=0 , scale=0;
-  var htmlDOM=document.documentElement;
-  dpr=window.devicePixelRatio;
-  var currentWidth=htmlDOM.clientWidth;
-  scale=currentWidth/psdw;
-  rem=psdw/14;
-  rem=rem*scale;
-  htmlDOM.style.fontSize=rem+'px';
-  htmlDOM.setAttribute('data-dpr',dpr)
+(function(psdw){
+  var dpr=0 , rem=0 , scale=0;
+  var htmlDOM=document.documentElement;
+  dpr=window.devicePixelRatio;
+  var currentWidth=htmlDOM.clientWidth;
+  scale=currentWidth/psdw;
+  rem=psdw/14;
+  rem=rem*scale;
+  htmlDOM.style.fontSize=rem+'px';
+  htmlDOM.setAttribute('data-dpr',dpr)
 })(1920)

package/packages/utils/utils.js

@@ -0,0 +1,210 @@
+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;
+  }
+
+}
+
+function combineBase64Images(image1, image2, callback) {
+  // console.log(image1, image2)
+  // 创建Canvas元素
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // 加载第一张图片
+  var img1 = new Image();
+  img1.onload = function () {
+
+    // 加载第二张图片
+    var img2 = new Image();
+    img2.onload = function () {
+
+      // 设置Canvas的宽度和高度
+      const imageWidth = 1280;
+      const imageHeight = 720;
+      canvas.width = imageWidth; // 不压缩的话是 1280 x 720 
+      canvas.height = imageHeight * 2;
+
+      console.log(img1.width, img1.height)
+      console.log(img2.width, img2.height)
+
+      // 绘制第一张图片
+      ctx.drawImage(img1, 0, 0, imageWidth, imageHeight);
+      // 绘制第二张图片在第一张图片下方
+      ctx.drawImage(img2, 0, imageHeight, imageWidth, imageHeight);
+
+
+      // 导出拼接后的图片为base64
+      var combinedImageData = canvas.toDataURL('image/png');
+
+      // 执行回调函数，返回base64字符串
+      callback(combinedImageData);
+      console.log(combinedImageData)
+
+    };
+    img2.src = image2;
+  };
+  img1.src = image1;
+
+}
+
+function saveBase64Image(base64Data, fileName) {
+  // 将base64字符串转换为Blob对象
+  let arr = base64Data.split(',');
+  let mime = arr[0].match(/:(.*?);/)[1];
+  let bstr = atob(arr[1]);
+  let n = bstr.length;
+  let u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  let blob = new Blob([u8arr], { type: mime });
+
+  // 创建一个指向Blob对象的URL
+  let url = URL.createObjectURL(blob);
+
+  // 创建一个a标签用于下载
+  let link = document.createElement('a');
+  link.href = url;
+  link.download = fileName + '.jpg';
+  document.body.appendChild(link);
+
+  // 触发下载
+  link.click();
+
+  // 清理并移除元素和对象URL
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+function dateTime() {
+  // 创建一个Date对象
+  const now = new Date();
+
+  // 获取年月日时分秒
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1，并且可能需要补0
+  const day = String(now.getDate()).padStart(2, '0'); // 日期补0
+  const hours = String(now.getHours()).padStart(2, '0'); // 小时补0
+  const minutes = String(now.getMinutes()).padStart(2, '0'); // 分钟补0
+  const seconds = String(now.getSeconds()).padStart(2, '0'); // 秒数补0
+
+  // 格式化输出
+  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  console.log(formattedDate);
+  return formattedDate;
+}
+export {
+  compressImage,
+  debounce,
+  isLight,
+  combineBase64Images,
+  saveBase64Image,
+  dateTime
+}