react_hsbc_teller 1.6.7 → 1.7.1

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 = {
@@ -78,6 +112,8 @@ class Video extends Component {
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
+    whiteboardTop: '',
+    whiteboardLeft: '',
     laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
@@ -213,10 +249,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 +341,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 +377,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()
@@ -2500,6 +2568,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()
@@ -2887,9 +2961,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 : '客户' : '客户'
@@ -3262,6 +3340,7 @@ userType:'1'
       let result = await API.videoRecordCallback({
         activityId: this.props.businessNumber,
         sessionId: this.state.sessionId,
+        roomId: this.state.channelId + '',
         type: type,
         status: status
       });
@@ -3457,7 +3536,6 @@ userType:'1'
 
       this.props.resourcePath + "/eruda.js",
       this.props.resourcePath + "/iconfont.js",
-      this.props.resourcePath + "/dialogue.css",
       
 
         
@@ -3648,7 +3726,7 @@ userType:'1'
           // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
           publish_config.enableDesktopAudio=true
           publish_config.degradationType=2
-          publish_config.desktopStreamToCanvas=true
+          publish_config.desktopStreamToCanvas=false
           publish_config.sid = document.getElementById('video20').name
           this.test_controller.ChangeMediaStream(publish_config)
           this.state.isScreenSwitching = true
@@ -3660,7 +3738,7 @@ userType:'1'
             // publish_config.video_profile_type=100
             // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
             publish_config.enableDesktopAudio=true
-            publish_config.desktopStreamToCanvas=true
+            publish_config.desktopStreamToCanvas=false
             publish_config.degradationType=2
             publish_config.sid = document.getElementById('video20').name;
             this.test_controller.ChangeMediaStream(publish_config);
@@ -3669,7 +3747,7 @@ userType:'1'
             publish_config.publish_device = 2
             publish_config.need_volume_analyser = true
             publish_config.video_profile_type = 1
-            publish_config.desktopStreamToCanvas=true
+            publish_config.desktopStreamToCanvas=false
             // publish_config.video_profile_type=100
             // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
             publish_config.enableDesktopAudio=true
@@ -4414,13 +4492,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,
@@ -4494,6 +4646,8 @@ userType:'1'
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
             this.state.whiteboardWidth = box.offsetWidth,
             this.state.whiteboardHeight = box.offsetHeight  * 0.92,
+            this.state.whiteboardTop = box.getBoundingClientRect().top * 1.08 - 40
+            this.state.whiteboardLeft = box.getBoundingClientRect().left
            console.log('whiteboardDIV', this.state.whiteboardHeight,box.clientHeight,this.state.whiteboardWidth)
        }
   }
@@ -4783,7 +4937,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,top: this.state.whiteboardTop,left:this.state.whiteboardLeft}}>
+          {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
@@ -5275,6 +5441,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}>
@@ -5439,7 +5606,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: '--',
@@ -5449,6 +5616,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