react_hsbc_teller 1.6.6 → 1.7.0

package/packages/pages/video/video.jsx

@@ -4,6 +4,7 @@
 import React, { Component, useState } from 'react';
 import API from '../../api/api';
 import { initWebSocket, joinRoom, disconnect } from '../../common/websocket';
+import { BoardOperate } from '../../common/index.esm.js';
 import './video.less'
 import Header from '../header/header.jsx'
 import Foot from '../foot/foot.jsx'
@@ -23,10 +24,11 @@ import Spin from "antd/lib/spin";
 import 'antd/lib/spin/style'
 import Select  from "antd/lib/select";
 import 'antd/lib/select/style'
-
+import styled from 'styled-components';
 import { Button } from '../../../node_modules/antd/lib/index';
 import SignMy from '../sign/signMy.jsx'
 import axios from 'axios';
+import CryptoJS from "crypto-js";
 const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
@@ -42,6 +44,37 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
+let CanvasHome = styled.div`
+  position: fixed;
+  width: 76vw;
+  height: 74vh;
+  top: 3vh;
+  left: 1.5vw;
+  z-index: ${props=>props.zIndexNum};
+
+  .canvas{
+    width:100%;
+    
+    height:100%;
+    box-shadow: 0 0 5px 0 #06a;
+    display:none;
+  }
+`;
+const OpreateDiv = styled.div`
+  display: inline-block;
+  margin-left: 10vw;
+  padding: 0 6px;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 16px;
+  border: #333 1px solid;
+  span{
+    margin-right:10px;
+    cursor:pointer;
+  }
+`;
   function clearStreamRemain() {
     if (!(beautyDiv.beauty_canvas == null || beautyDiv.beauty_canvas == undefined)) {
       beautyDiv.beauty_canvas = null;
@@ -69,6 +102,7 @@ message.config({
 class Video extends Component {
   constructor(props) {
     super(props)
+    this.boardOperate = null;
 	}
   cancel = axios.CancelToken.source()
   state = {
@@ -213,10 +247,18 @@ class Video extends Component {
     ],
     shareMaskState: false,
     idCardName: '',
-    idCardNumber: ''
+    idCardNumber: '',
+    operateShow: false,
+    drawConfig: {
+      curryControl: 'pen', // 工具类型
+    },
+    zIndexNum: -1,
+    selectSpan: 'pen'
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
+  
+  
   /**
    * 创建房间成功后回调后台
    * @param  {JSON} data 数据类型
@@ -297,6 +339,35 @@ class Video extends Component {
       
     }
   };
+  decrypt(data) {
+    let keyStr = "le&&If?()*^%$#hA"
+    let iv = CryptoJS.enc.Utf8.parse("jwe232DEE?^%$eq3")
+    let encryptedHexStr = CryptoJS.enc.Hex.parse(data);
+    let content = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    let key = CryptoJS.enc.Utf8.parse(keyStr);
+    let decrypt = CryptoJS.AES.decrypt(content, key, {
+      iv: iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+  }
+  encrypt(data) {
+    let keyStr = "le&&If?()*^%$#hA"
+    let iv = CryptoJS.enc.Utf8.parse("jwe232DEE?^%$eq3")
+    let dataString = data;
+    if (typeof data !== "string") {
+      dataString = JSON.stringify(data);
+    }
+    const key = CryptoJS.enc.Utf8.parse(keyStr);
+    let sc = CryptoJS.enc.Utf8.parse(dataString);
+    let encrypted = CryptoJS.AES.encrypt(sc, key, {
+      iv: iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString();
+  }
   /**
    * 初始化获取数据
    * @param  {JSON} data 数据类型
@@ -304,18 +375,13 @@ class Video extends Component {
   mpaasSig = async data => {
     console.log(data);
     try {
-      let result = await API.mpaasSig({ account: data.account, type: data.type });
-      console.log(result);
+      // let result = JSON.parse(this.decrypt(await API.mpaasSig({ ciphertext: this.encrypt({account: data.account, type: data.type})})));
+      let result = await API.mpaasSig({account: data.account, type: data.type});
+      console.log('mpaasSig',result,result.mpsSig);
       window.sessionStorage.setItem('alimpassSig', result.mpsSig);
         this.state.workSpaceId = result.workspaceId,
         this.state.appId = result.appId,
         this.state.bizName = result.bizName
-      // const data1={
-      //   hostname: 'im.uat.dsp.hsbcfts.com.cn',
-      //   webPort: '443',
-      //   account: 'web',
-      //   openfireToken: '123'
-      // }
       window.sessionStorage.setItem('sigData', JSON.stringify(result));
       if (data.sigType == 1) {
         this.handleEdit()
@@ -430,9 +496,9 @@ class Video extends Component {
         {
           tag: 'projectionWhiteboard',
           xPosition: 0,
-          yPosition: 270,
-          width: 1280,
-          height: 720
+          yPosition: 175,
+          width: 960,
+          height: 540
         },
         // {
         //   tag: 'VIDEO_SOURCE_SCREEN_ONE',
@@ -452,43 +518,43 @@ class Video extends Component {
           tag: 'tag1',
           xPosition: 0,
           yPosition: 0,
-          width: 310,
-          height: 180
+          width: 213,
+          height: 175
         },
         {
           tag: 'customer1',
-          xPosition: 320,
+          xPosition: 213,
           yPosition: 0,
-          width: 310,
-          height: 180
+          width: 213,
+          height: 175
         },
         {
           tag: 'customer2',
-          xPosition: 640,
+          xPosition: 426,
           yPosition: 0,
-          width: 310,
-          height: 180
+          width: 213,
+          height: 175
         },
         {
           tag: 'customer3',
-          xPosition: 960,
+          xPosition: 639,
           yPosition: 0,
-          width: 310,
-          height: 180
+          width: 213,
+          height: 175
         },
         {
           tag: 'customer4',
-          xPosition: 1280,
+          xPosition: 852,
           yPosition: 0,
-          width: 310,
-          height: 180
+          width: 213,
+          height: 175
         },
         {
           tag: 'customer5',
-          xPosition: 1600,
+          xPosition: 1065,
           yPosition: 0,
-          width: 310,
-          height: 180
+          width: 213,
+          height: 175
         },
         // {
         //   tag: 'customer6',
@@ -542,17 +608,25 @@ class Video extends Component {
           width: item.width,
           height: item.height
         })
-      }) : list.push({
+      }) : 
+      list.push({
         tag: 'VIDEO_SOURCE_SCREEN',
-          xPosition: 1290,
-          yPosition: 640,
-          width: 630,
-          height: 350
+          xPosition: 960,
+          yPosition: 535,
+          width: 320,
+          height: 180
       })
+      // list.push({
+      //   tag: 'VIDEO_SOURCE_SCREEN_19_9',
+      //     xPosition: 960,
+      //     yPosition: 573,
+      //     width: 304,
+      //     height: 144
+      // })
       const filePath = 'recordId_' + new Date().valueOf();
       const recordParam = {};
-      recordParam.width = 1920;
-      recordParam.height = 1080;
+      recordParam.width = 1280;
+      recordParam.height = 720;
       recordParam.recordTotalStream = 0;
       recordParam.startTimeout = 10;
       recordParam.splitType = 0;
@@ -564,7 +638,7 @@ class Video extends Component {
           type: 1, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
           id: 1, // ⽔印 ID
           enable: true,
-          xPosition: 10, // x 轴位置
+          xPosition: 1000, // x 轴位置
           yPosition: 10, // y 轴位置
           text: '', // ⽔印⽂字
           fontSize: 16, // 字体⼤⼩
@@ -2492,6 +2566,12 @@ class Video extends Component {
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
           this.state.isCustomer= true
+          if(this.props.isOpenSound) {
+            let src = autod
+          let audio = new Audio(src)
+          audio.play()
+          }
+
           // let src = autod
           // let audio = new Audio(src)
           // audio.play()
@@ -2879,9 +2959,13 @@ class Video extends Component {
       exitType
     ) => {
       console.log('退出房间者', participant, exitType)
-      // let src = leftMetting
-      // let audio = new Audio(src)
-      // audio.play()
+      if(this.props.isOpenSound) {
+      let src = leftMetting
+      let audio = new Audio(src)
+      audio.play()
+      }
+
+
       this.appGetUsernameClick(participant).then((res)=>{
         console.log('退出房间者',res)
 let data = res? res.username ? res.username : '客户' : '客户'
@@ -3207,7 +3291,6 @@ userType:'1'
             this.state.analyserHeight = this.state.analyserHeight
         }
       }
-      
       this.state.OnVolumeAnalyserMap.set(sid,setInterval(
         this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser),
       300
@@ -3255,6 +3338,7 @@ userType:'1'
       let result = await API.videoRecordCallback({
         activityId: this.props.businessNumber,
         sessionId: this.state.sessionId,
+        roomId: this.state.channelId + '',
         type: type,
         status: status
       });
@@ -3450,7 +3534,6 @@ userType:'1'
 
       this.props.resourcePath + "/eruda.js",
       this.props.resourcePath + "/iconfont.js",
-      this.props.resourcePath + "/dialogue.css",
       
 
         
@@ -3804,7 +3887,7 @@ userType:'1'
       isModalVisibleEnd: false
     })
   };
-  confirmCallback=async()=>{
+  confirmCallback=async(data)=>{
     try {
       let result = await API.confirmCallback({
         idCardName: this.state.idCardName,
@@ -3814,16 +3897,33 @@ userType:'1'
         idCardNumber: this.state.idCardNumber,
         sessionId: this.state.sessionId,
       });
+      console.log('confirmCallback',result)
       if (result.code == 200) {
-        this.setState({
-          isModalVisibleFacial: false,
-          idCardNumber: '',
-          idCardName: ''
-        })
+        console.log(data)
+        if(data == 'noFace') {
+          this.setState({
+            isModalVisibleFacial: false,
+            idCardNumber: '',
+            idCardName: ''
+          })
+        } else {
+          console.log('data')
+          this.state.faceCustomerType = 1
+          this.setState({
+            idCardNumber: '',
+            idCardName: '',
+            titleModal: '人脸识别',
+            // clickedFacial: true,
+            facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+          })
+        }
+        
       } else {
+        console.log('1')
         this.messageClick('保持信息失败','error')
       }
     } catch (err) {
+      console.log('2')
       this.messageClick('保持信息失败','error')
     }
   }
@@ -4390,13 +4490,87 @@ userType:'1'
         // }
       }
     }
-    
     this.navigatorClick()
+    
   } else {
     this.messageClick('internal staff正在共享屏幕，请先关闭','error')
   }
   }
   }
+  openCanvas(drawCanvas) {
+    if (!this.boardOperate) {
+      this.boardOperate = new BoardOperate(drawCanvas, {
+        drawColor: "#000000",
+        drawType: "pen",
+        lineWidth: 5,
+        fillStyle: '', // 初始背景色，若为空则透明背景 
+      });
+    }
+  }
+  closeCanvas() {
+    this.boardOperate.destroy();
+    this.boardOperate = null;
+  }
+
+  setTool(type) {
+    const { drawConfig } = this.state;
+    drawConfig.curryControl = type;
+    this.boardOperate.changeWay({
+      type
+    });
+
+    this.setState({ drawConfig,selectSpan: type });
+  }
+
+  setOpreate(type) {
+    this.boardOperate[type]();
+  }
+  downCanvas() {
+    const canvas = document.getElementById('canvas');
+    const base64 = canvas.toDataURL();
+
+
+    let img = document.createElement('img');
+    img.style.position = 'fixed';
+    img.style.width = '90vw';
+    img.style.height = '95vh';
+    img.style.top = '9vh';
+    img.style.left = '5vw';
+    img.src = base64;
+    document.body.appendChild(img);
+
+  }
+  graffiti=()=>{
+    if(!this.state.operateShow) {
+      this.setState({
+        zIndexNum: 999
+      })
+      this.change(true)
+    }
+
+  }
+  closeGraffiti=()=>{
+    this.setState({
+      zIndexNum: -1
+    })
+    this.change(false)
+  }
+  change(val) {
+    this.setState({ operateShow: val })
+    const canvas = document.getElementById('canvas');
+    if (val) {
+      canvas.style.display = 'block';
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
+      setTimeout(() => {
+        this.openCanvas(canvas)
+      }, 0);
+    } else {
+      // this.downCanvas()
+      this.closeCanvas();
+      canvas.style.display = 'none';
+    }
+  }
   switchSelect = (value) => {
     this.setState({
       isSelect: value,
@@ -4759,7 +4933,19 @@ userType:'1'
             {tabTitleList}
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
-            
+            <CanvasHome zIndexNum={this.state.zIndexNum} style={{width: this.state.whiteboardWidth,height: this.state.whiteboardHeight}}>
+          {this.state.operateShow &&
+            <OpreateDiv id="operate">
+              <span style={{color: this.state.selectSpan == 'pen' ?  '#1890ff' : '#333'}} onClick={() => this.setTool('pen')}>铅笔</span>
+              <span style={{color: this.state.selectSpan == 'eraser' ?  '#1890ff' : '#333'}} onClick={() =>  this.setTool('eraser')}>橡皮</span>
+              <span onClick={() => this.setOpreate('undo')}>撤销</span>
+              <span onClick={() => this.setOpreate('redo')}>恢复</span>
+              <span onClick={() => this.setOpreate('clear')}>清除</span>
+              <span onClick={() => this.closeGraffiti()}>关闭</span>
+            </OpreateDiv>
+          }
+          <canvas id="canvas" className="canvas"></canvas>
+        </CanvasHome>
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
@@ -5251,6 +5437,7 @@ userType:'1'
             switchExternal={this.switchExternal}
             inspection={this.inspection}
             beautyClick={this.beautyClick}
+            graffiti={this.graffiti}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
             onCancel={this.handleCancel}>
@@ -5276,7 +5463,8 @@ userType:'1'
             <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>确定</Button>
             </div>,
             this.state.idCardName && <div key='facial'>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.confirmCallback}>确认</Button>
+              <Button className="modelButtonFaceOk" danger onClick={(e)=>this.confirmCallback('face')}>完成并发起人脸识别</Button>
+            <Button className="modelButtonOk" type="primary" danger onClick={(e)=>this.confirmCallback('noFace')}>完成</Button>
             </div>
           ]}>
             <div className="faceBody">
@@ -5414,7 +5602,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',
@@ -5424,6 +5612,7 @@ sessionId: "",
   },
   isTranscribing: false,
   shareMask: false,
+  isOpenSound: false, // true开启进出音效   false不开启
   internalUrl: 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting'
 }
 export default Video

package/packages/pages/video/video.less

@@ -378,6 +378,15 @@
   background: #DB0011!important;
   border-spacing: 20px!important;
 }
+.modelButtonFaceOk{
+  width: 170px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #333!important;
+  border: 1px #333 solid!important;
+  background: #fff!important;
+  border-spacing: 20px!important;
+}
 .endModal{
   font-size: 16px;
     padding: 56px 30px 0px 30px;