react_hsbc_teller 2.0.4 → 2.0.5

package/package.json

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

package/packages/api/api.js

@@ -471,7 +471,24 @@ class API extends Server{
       throw err;
     }
   }
-
+  async addSensitiveRecord(params = {}){
+    try{
+      let result = await this.axios('post', '/sensitive/add', params); 
+      if (result && (result.data instanceof Object) && result.code === 200){
+        return result.data||[];
+      } else{
+        let err = {
+          tip: '服务异常',
+          response: result,
+          data: params,
+          // url: 'https://api.cangdu.org/shopro/data/products',
+        }
+        throw err;
+      }
+    }catch(err){
+      throw err;
+    }
+  }
   // /**
   //  *  用途：获取记录数据
   //  *  @url https://api.cangdu.org/shopro/data/record

package/packages/pages/foot/foot.jsx

@@ -47,6 +47,12 @@ export default class foot extends Component {
       inspection = ()=>{
           this.props.inspection()
       }
+      envDetection = () => {
+        this.props.envDetection()
+      }
+      toggleAsr = ()=>{
+        this.props.toggleAsr()
+    }
       switchExternal=()=>{
         this.props.switchExternal()
     }
@@ -199,6 +205,22 @@ export default class foot extends Component {
                         </div>
                     </div>
                     </div>
+                    <div className='footHover' onClick={this.envDetection.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/icon_env.png").default} alt="" />
+                        <div className="text">
+                            环境检测
+                        </div>
+                    </div>
+                    </div>
+                    <div className='footHover' onClick={this.toggleAsr.bind(this)}>
+                    <div className="one">
+                        <img className="imgClass" src={require("../../assets/img/icon_asr.png").default} alt="" />
+                        <div className="text">
+                            ASR检测
+                        </div>
+                    </div>
+                    </div>
                 </div>
                 {defaultList}
                 

package/packages/pages/foot/foot.less

@@ -25,6 +25,7 @@ width: 100%;
   }
   .footHover{
       margin: 0 5px;
+      cursor: pointer;
   }
   .footHover :hover{
       background: #F3F3F3;

package/packages/pages/video/video.jsx

@@ -17,6 +17,7 @@ import beautyImg from '../../assets/img/whiteningLut.jpg'
 import ocrImage from '../../assets/img/jietu.png'
 import faceImage from '../../assets/img/jietu_face.png'
 import autod from '../../assets/mp3/joinmeeting.mp3'
+import recordErrorAudio from '../../assets/mp3/record_error.mp3'
 import internalJoin from '../../assets/mp3/internalJoin.mp3'
 import internalLeft from '../../assets/mp3/internalLeft.mp3'
 import leftMetting from '../../assets/mp3/leftmeeting.mp3'
@@ -37,6 +38,9 @@ import 'antd/lib/radio/style'
 
 import Space from "antd/lib/space";
 import 'antd/lib/space/style'
+import { Collapse } from 'antd';
+import 'antd/lib/collapse/style'
+const { Panel } = Collapse;
 
 
 import styled from 'styled-components';
@@ -52,6 +56,7 @@ const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
   ROOM_DESTROYED: -1, // 房间异常
 }
+let media_status = 0
 let pictureInPictureVideo
 let mix_stream
 let worker
@@ -241,6 +246,8 @@ class Video extends Component {
     microphoneList: [],
     speakerList: [],
     isModalVisibleInspection: false,
+    envInfo: {},
+    isModalVisibleEnvironment: false,
     cameraValue: '',
     microphoneValue: '',
     imStatus: false,
@@ -296,7 +303,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.4&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=2.0.5&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -1183,6 +1190,25 @@ class Video extends Component {
         }
 
       }
+
+      // 敏感词提示
+      let str = this.state.sensitiveTitle || ''
+      if (str)
+        cobj.fillStyle = 'red';
+        const textWidth = Math.min(cobj.measureText(str).width, 610)
+        cobj.fillRect(320 - textWidth/ 2, 26, 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();
@@ -1473,6 +1499,11 @@ class Video extends Component {
             videoList: this.state.videoList
           })
         }
+      } else if (Mival.typeId == 10020) {
+        // 录制服务异常中断，请重试
+        this.messageClick('录制服务异常中断，请重试', 'error')
+        let audio = new Audio(recordErrorAudio)
+        audio.play()
       }
     };
     window.IMOpenfire = msg => {
@@ -1617,6 +1648,7 @@ class Video extends Component {
       if (!this.state.appId && !this.state.sessionType) {
         console.log('cameraValue', this.state.cameraValue)
         this.mpaasSig(data);
+        this.showEnvDetection()
       } else {
         console.log('cameraValue', this.state.cameraValue)
         this.setState({
@@ -1632,6 +1664,7 @@ class Video extends Component {
       this.state.sessionType = false
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头', 'error')
       this.roomCallBack(2, '获取设备失败', 1)
+      this.showEnvDetection()
     };
     // 建立连接成功
     this.test_controller.OnConnectOK = () => {
@@ -2714,6 +2747,135 @@ class Video extends Component {
 
 
     };
+
+    const that = this;
+    this.asr_controller.OnGetSign = function(bizName, subBiz, uid) {
+      return 'signature'
+    }
+    // 连接成功回调
+    this.asr_controller.OnAsrConnectOK = function() {
+      // 需要状态控制
+      if (media_status == 1) {
+        return
+      }
+
+      const config_param = {}
+      const biz_name = 'demo'
+      const sub_biz = 'default'
+      const uid = that.props.tellerAccount
+      const sampleRate = 16000
+      const procType = 8
+      config_param.bizName = biz_name
+      config_param.subBiz = sub_biz
+      config_param.uid = uid
+      config_param.sampleRate = sampleRate
+      config_param.procType = procType
+      config_param.mediaStreamType = 2 // 1:麦克风;2:传stream
+      // console.log(test_controller.GetMediaInfo(document.getElementById('publish_video1').name).audio_)
+      config_param.audio_ = that.test_controller.GetMediaInfo(document.getElementById('publish_video1').name).audio_
+      config_param.idleTime = 6 // 12s没有识别结果返回通知上层
+      config_param.tag = 'asr_tag0'
+      that.asr_sid = that.asr_controller.TurnOnMicrophone(config_param, config_param.audio_)
+    }
+    // 初始化成功
+    this.asr_controller.OnInitOk = function(sid, tag) {
+      console.log('OnInitOk:')
+      media_status = 1
+    }
+
+    // 初始化失败
+    this.asr_controller.OnInitError = function(sid, code, msg, tag) {
+      console.log('OnInitError:' + msg)
+      that.asr_sid = ''
+    }
+
+    // 识别结果
+    this.asr_controller.OnAsrMessage = function(msg, sid, tag, status) {
+      that.asr_controller.trace(`OnAsrMessage sid=${sid},status=${status},tag=${tag}`)
+      const parse = JSON.parse(msg)
+      const resultValue = parse.value
+      const sentence_id = parse.sentence_id
+      // sentence_id相同,取最后一个值
+      let text = resultValue || ''
+      const sensitiveArr = that.props.sensitiveWords
+      // const regex = new RegExp(sensitiveArr.join('|'), 'g') // /\#{(.+?)\}/g;
+      // text = text.replace(regex, function(r) { return '<span style="background: red;">' + r + '</span>' })
+      let matchArr = sensitiveArr.filter(el => text.includes(el));
+      if (matchArr.length>0) {
+        matchArr.forEach(el => {
+          that.messageClick('检测到敏感词:' + matchArr, 'error')
+          that.state.sensitiveTitle = '检测到敏感词:' + matchArr
+          clearTimeout(that.state.sensitiveTitleTimer)
+          that.state.sensitiveTitleTimer = setTimeout(() => {
+            that.state.sensitiveTitle = ''
+          }, 3000);
+          if (!that.state.sensitiveRecordMap[sentence_id] || !that.state.sensitiveRecordMap[sentence_id].includes(el)){
+            API.addSensitiveRecord({
+              tellerId: that.props.tellerAccount,
+              sessionId: that.state.sessionId,
+              sensitiveWord: el
+            });
+            if (!that.state.sensitiveRecordMap[sentence_id]) {
+              that.state.sensitiveRecordMap[sentence_id] = []
+            } 
+            that.state.sensitiveRecordMap[sentence_id].push(el)
+          }
+        })
+      }
+      // that.AsrResultText = text
+    }
+
+    // 停止录音回调
+    this.asr_controller.OnTurnOffMicrophoneOK = function(sid, tag) {
+      media_status = 0
+      that.asr_controller.Disconnect()
+    }
+    this.asr_controller.OnAsrMsgIdle = function(sid, tag) {
+      // that.AsrResultText = ''
+      that.asr_controller.trace('OnAsrMsgIdle')
+    }
+    this.asr_controller.OnAsrDisconnectOK = function() {
+      that.asr_controller.trace('Disconnect is  success')
+    }
+
+  }
+  startASR() {
+    // const publish_sid = document.getElementById('publish_video1').name
+
+    if (media_status == 1) {
+      return
+    }
+    this.asr_controller.Connect(this.props.asrServerUrl)
+    message.success({
+      content: '敏感词检测已开启',
+      icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+      className: 'successClassName',
+      top: 200,
+      // duration: 10
+    })
+    this.state.isAsrStart = true
+    this.state.sensitiveRecordMap = {}
+    // this.AsrResultText = ''
+  }
+  stopASR() {
+    this.state.isAsrStart = false
+    // this.AsrResultText = ''
+    // const { publish_sid } = this.getSidsInfo()
+    if (media_status == 0) {
+      return
+    }
+    this.asr_controller.TurnOffMicrophone(this.asr_sid)
+    // clearInterval(this.asrTimer)
+    // if (this.localRecordStatus && this.client_record_id) {
+    //   test_controller.StopRecord(this.client_record_id)
+    // }
+    message.success({
+      content: '敏感词检测已关闭',
+      icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+      className: 'successClassName',
+      top: 200,
+      // duration: 10
+    })
   }
   videoRecordCallback = async (type, status) => {
     try {
@@ -2799,6 +2961,10 @@ class Video extends Component {
         console.error(err)
       }
     }
+    if (this.state.isAsrStart){
+      this.stopASR()
+      this.asr_controller.Disconnect()
+    }
     if (this.state.imStatus) {
       console.log('disconnect断开连接')
       this.state.manualClose = true
@@ -2923,6 +3089,12 @@ class Video extends Component {
   }
   addToScriptClick = () => {
     const _dependScripts = [
+      // 'http://121.196.19.70/download/asr_api.js',
+      // 'http://121.196.19.70/download/reconnecting-websocket.min.js',
+      // 'http://121.196.19.70/download/resampler.js',
+      this.props.resourcePath + "/asr_api.js",
+      this.props.resourcePath + "/reconnecting-websocket.min.js",
+      this.props.resourcePath + "/resampler.js",
       this.props.resourcePath + "/beauty/beauty_frame_pkg.js",
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
@@ -2967,12 +3139,14 @@ class Video extends Component {
             script.onreadystatechange = () => {
               if (script.readyState == 'loaded' || script.readyState == 'complete') {
                 that.test_controller = new McuController();
+                that.asr_controller = new AsrController()
                 that.mountClick()
               }
             }
           } else {
             script.onload = () => {
               that.test_controller = new McuController();
+              that.asr_controller = new AsrController()
               that.mountClick()
             }
           }
@@ -2995,7 +3169,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '2.0.4')
+    console.log('hsbc_teller_sdk', '2.0.5')
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -4553,6 +4727,114 @@ class Video extends Component {
       this.test_controller.GetDevices()
     }
   }
+  toggleAsr = () => {
+    if (this.isFileSuccuse()) {
+      if (!this.state.isAsrStart){
+        this.startASR()
+      } else {
+        this.stopASR()
+      }
+    }
+  }
+  showEnvDetection = () => {
+    this.envDetection()
+    this.setState({
+      isModalVisibleEnvironment: true,
+    })
+  }
+  
+  envDetection = () => {
+    let self = this
+    let envInfo = {
+      batteryCharging: '未知', // 电池充电
+      batteryLevel: '未知', // 电池电量
+      networkStatus: '未知', // 网络状态 （已连接/未连接）
+      cameraResult: this.state.cameraList.length>0 ? '合格': '不合格', // 摄像头检测
+      microResult: this.state.microphoneList.length>0 ? '合格': '不合格', // 麦克风检测
+      jsHeapSizeLimit: '未知', // 上下文内可用堆的最大体积
+      totalJSHeapSize: '未知', // 已分配的堆体积
+      usedJSHeapSize: '未知', // 当前 JS 堆活跃段（segment）的体积
+    }
+     
+    if (navigator) {
+      // 电量检测
+      navigator.getBattery().then(function(battery) {
+        // console.log(battery)
+        // 是否正在充电，yes-充电
+        envInfo.batteryCharging = (battery.charging ? "正在充电" : "不在充电")
+        // 当前剩余电量
+        envInfo.batteryLevel =  battery.level * 100 + "%"
+        envInfo.batteryResult = (battery.charging )? '合格': '不合格'
+        self.setState({
+          envInfo: envInfo
+        })
+        battery.removeEventListener("chargingchange", self.envDetection);
+        battery.removeEventListener("levelchange", self.envDetection);
+        battery.addEventListener("chargingchange", self.envDetection);
+        battery.addEventListener("levelchange", self.envDetection);
+      });
+      
+      // 网络检测
+      envInfo.networkStatus = window.navigator.onLine? '已连接': '未连接'
+      envInfo.networkResult =  window.navigator.onLine? '合格': '不合格'
+      window.removeEventListener("offline", self.envDetection);
+      window.removeEventListener("online", self.envDetection);
+      window.addEventListener("offline", self.envDetection);
+      window.addEventListener("online", self.envDetection);
+      if (navigator.connection){
+        function setNetworkInfo() {
+          const { rtt, downlink, effectiveType, saveData } = navigator.connection;
+          // console.log(`有效网络连接类型: ${effectiveType}`);
+          // console.log(`估算的下行速度/带宽: ${downlink}Mb/s`);
+          // console.log(`估算的往返时间: ${rtt}ms`);
+          if (!window.navigator.onLine) {envInfo.networkInfo = ''} 
+          else envInfo.networkInfo = `等效网络类型：${effectiveType}；预估下行速度/带宽：${downlink}Mb/s；预估往返延时：${rtt}ms`
+        }
+        setNetworkInfo()
+        navigator.connection.removeEventListener('change', self.envDetection);
+        navigator.connection.addEventListener('change', self.envDetection);
+      }
+      
+    }
+    // 内存检测
+    if (performance.memory) {
+      const filterSize = (size) => {
+        if (!size) return ''
+        if (size < pow1024(1)) return size + ' B'
+        if (size < pow1024(2)) return (size / pow1024(1)).toFixed(2) + ' KB'
+        if (size < pow1024(3)) return (size / pow1024(2)).toFixed(2) + ' MB'
+        if (size < pow1024(4)) return (size / pow1024(3)).toFixed(2) + ' GB'
+        return (size / pow1024(4)).toFixed(2) + ' TB'
+      }
+    
+      function pow1024(num) {
+          return Math.pow(1024, num)
+      }
+      envInfo.jsHeapSizeLimit = filterSize(performance.memory.jsHeapSizeLimit)
+      envInfo.totalJSHeapSize = filterSize(performance.memory.totalJSHeapSize)
+      envInfo.usedJSHeapSize = filterSize(performance.memory.usedJSHeapSize)
+      // console.log('上下文内可用堆的最大体积', envInfo.jsHeapSizeLimit)
+      // console.log('已分配的堆体积', envInfo.totalJSHeapSize)
+      // console.log('当前 JS 堆活跃段（segment）的体积', envInfo.usedJSHeapSize)
+      envInfo.memoryResult = '合格'
+    }
+    
+
+    this.setState({
+      // isModalVisibleEnvironment: true,
+      envInfo: envInfo
+    })
+  }
+  handleOkEnvDetection = () => {
+    this.setState({
+      isModalVisibleEnvironment: false,
+    })
+  }
+  // handleCancelEnvDetection = () => {
+  //   this.setState({
+  //     isModalVisibleEnvironment: false
+  //   })
+  // }
   handleOkInspection = () => {
     this.setState({
       isModalVisibleInspection: false,
@@ -5424,6 +5706,8 @@ class Video extends Component {
             ocrClick={this.ocrClick}
             switchExternal={this.switchExternal}
             inspection={this.inspection}
+            toggleAsr={this.toggleAsr}
+            envDetection={this.showEnvDetection}
             beautyClick={this.beautyClick}
             graffiti={this.graffiti}
             virtualization={this.virtualization}
@@ -5785,6 +6069,51 @@ class Video extends Component {
 
             </div>
           </Modal>
+          <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" danger onClick={this.handleOkEnvDetection}>确定</Button>
+            </div>
+          ]}>
+             <Collapse defaultActiveKey={['1', '2', '3', '4', '5']} ghost>
+             
+              <Panel header={'网络检测 - ' +this.state.envInfo.networkResult} key="5" className={this.state.envInfo.networkResult=='不合格'? 'panel-error':''} >
+                <p className='envClass'>网络状态：{this.state.envInfo.networkStatus}</p>
+                {this.state.envInfo.networkInfo?<p className='envClass'>{this.state.envInfo.networkInfo}</p>:null}
+              </Panel>
+              <Panel header={'设备电量 - ' +this.state.envInfo.batteryResult} key="2" className={this.state.envInfo.batteryResult=='不合格'? 'panel-error':''}>
+                <p className='envClass'>电量：{this.state.envInfo.batteryLevel}（{this.state.envInfo.batteryCharging}）</p>
+              </Panel>
+              <Panel header={'内存检测 - ' +this.state.envInfo.memoryResult} key="1" className={this.state.envInfo.memoryResult=='不合格'? 'panel-error':''}>
+                <p className='envClass'>最大可用内存：{this.state.envInfo.jsHeapSizeLimit} ；当前已使用：{this.state.envInfo.usedJSHeapSize} </p>
+              </Panel>
+              <Panel header={'摄像头设备 - ' +this.state.envInfo.cameraResult} key="3" className={this.state.envInfo.cameraResult=='不合格'? 'panel-error':''}>
+                <div >
+                  {
+                    this.state.cameraList.map((item, index) => {
+                      return <div key={index} className="envClass">
+                          {/* <input type="radio" name="camere" value={item.actionid} style={{ float: 'left' }} checked={this.state.cameraValue == item.actionid} readOnly disabled /><i></i> */}
+                          {item.actionname}{this.state.cameraValue == item.actionid ? '（当前设备）' : ''}
+                      </div>
+                    })
+                  }
+                  {this.state.cameraList.length == 0 ? <p className="envClass">获取不到摄像头设备，请检查</p> : null}
+                </div>
+              </Panel>
+              <Panel header={'麦克风设备 - ' +this.state.envInfo.microResult} key="4" className={this.state.envInfo.microResult=='不合格'? 'panel-error':''}>
+                <div>
+                  {
+                    this.state.microphoneList.map((item, index) => {
+                      return <div key={index} className="envClass">
+                          {item.actionname}{this.state.microphoneValue == item.actionid ? '（当前设备）' : ''}
+                      </div>
+                    })
+                  }
+                  {this.state.cameraList.length == 0 ? <p className="envClass">获取不到麦克风设备，请检查</p> : null}
+                </div>
+              </Panel>
+            </Collapse>
+          </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>
           <video className="mixedvideo" id="manedvideo" autoPlay width="0" height="0"></video>
           <video className="mixedvideo" id="video30" autoPlay width="0" height="0"></video>
@@ -5806,7 +6135,7 @@ Video.defaultProps = {
   callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
   // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws', 
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
-
+  asrServerUrl: 'wss://ismis.alipay.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   // resourcePath: 'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
   prohbiitPrompt: '当前无客户',
@@ -5818,6 +6147,7 @@ Video.defaultProps = {
   fontFamily: 'auto',
   menus: ['BOARD', 'SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY', 'GRAFFITI', 'BACKGROUND'],
   customLeaveRoom: '客户离开房间',
+  sensitiveWords: ['保本保息', '无风险'],
   meetingInfo: {
     title: '--',
     host: '--',

package/packages/pages/video/video.less

@@ -328,6 +328,16 @@
     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: red;
+}
 .voiceClass{
   width: 25Px;
   height: 25.3Px;