react_hsbc_teller 1.7.2 → 1.7.5

package/package.json

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

package/packages/demo/demo.js

@@ -5,11 +5,10 @@ import Pdf from './pdf.js'
 class Demo extends Component {
   state = {
     shareMask: false,
-    imRoomId: "AIByYlxRE@conference.openfire2.leimondata.cn",
-    sessionId: "AIByYlxRE",
-    mtoken: "101046e69f16",
-    roomId: "657007173551208",
-    
+    mtoken: "492948d0a7ec",
+roomId: "656467744508298",
+    imRoomId: "ACkhcdtat@conference.openfire2.leimondata.cn",
+    sessionId: "ACkhcdtat",
     // roomId: '',
     // mtoken: '',
     // imRoomId: '',

package/packages/pages/video/video.jsx

@@ -12,6 +12,7 @@ import voiceImgOpen from '../../assets/img/icon_Mute.png'
 import voiceImgCloe from '../../assets/img/icon_MuteOne.png'
 import cameraImgOpen from '../../assets/img/icon_camera.png'
 import cameraImgCloe from '../../assets/img/icon_cameraOne.png'
+import ocrImage from '../../assets/img/jietu.png'
 import autod from '../../assets/mp3/joinmeeting.mp3'
 import leftMetting from '../../assets/mp3/leftmeeting.mp3'
 import errorPng from '../../assets/img/tooltips2_fail.png'
@@ -44,6 +45,8 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
+let isBackgroundBlur = false
+let isSuccuseHs = false
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props=>props.zIndexNum};
@@ -71,6 +74,7 @@ const OpreateDiv = styled.div`
     cursor:pointer;
   }
 `;
+
   function clearStreamRemain() {
     if (!(beautyDiv.beauty_canvas == null || beautyDiv.beauty_canvas == undefined)) {
       beautyDiv.beauty_canvas = null;
@@ -90,6 +94,28 @@ function startBeauty(stream) {
   beautyDiv = meetingBeautifyStream(newStream, beautyNum);
   newStream = beautyDiv.stream;
   return newStream
+}
+async function startHs(stream) {
+  // var canvas =  document.getElementById('publish_video_canvas');
+  var video_src = document.getElementById("publish_video1");
+  var mode = 'blur';
+  video_src.srcObject = stream;
+
+  await hsInit();
+  isSuccuseHs = true;
+  hsStart(stream, mode);
+  
+}
+
+async function stopHs() {
+var video_src = document.getElementById("publish_video1");
+if(video_src) {
+  console.log('video_src',video_src)
+  video_src.srcObject = null;
+  isSuccuseHs = false
+  hsStop();
+}
+
 }
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
@@ -126,6 +152,7 @@ class Video extends Component {
     linkData: '',
     roomCustomerList: [],
     facialImg: '',
+    isFaceImage: false,
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
@@ -373,8 +400,8 @@ class Video extends Component {
   mpaasSig = async data => {
     console.log(data);
     try {
-      // 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});
+      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,
@@ -397,11 +424,11 @@ class Video extends Component {
   handleEdit = () => {
     console.log(JSON.parse(window.sessionStorage.getItem('sigData')));
     // eslint-disable-next-line no-undef
-    // initWebSocket('wss://im.uat.dsp.hsbcfts.com.cn:443/wealth/im/ws/')
+    initWebSocket('wss://im.uat.dsp.hsbcfts.com.cn:443/wealth/im/ws/')
     // initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + '15603' + '/ws/');
     if(!this.state.imStatus){
       this.state.manualClose = false
-      initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + JSON.parse(window.sessionStorage.getItem('sigData')).webPort + '/ws/');
+      // initWebSocket('wss://' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname + ':' + JSON.parse(window.sessionStorage.getItem('sigData')).webPort + '/ws/');
 
     }
     const config_param = {};
@@ -494,9 +521,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',
@@ -516,43 +543,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',
@@ -606,17 +633,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;
@@ -1817,6 +1852,72 @@ class Video extends Component {
         // 手机端停止投屏
         this.tabTitlesClick('customerScreen', 'delect')
         
+      } else if (Mival.typeId == 1401) {
+        if (Mival.sessionId == this.state.sessionId) {
+          if (Mival.userId == this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText).uid) {
+            this.setState({
+              videoOneName: Mival.name
+            })
+
+          }
+          if (Mival.userId == (document.getElementById("feedId2").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId2").innerText).uid : '')) {
+            this.setState({
+              videoTwoName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId3").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId3").innerText).uid : '')) {
+            this.setState({
+              videoThreeName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId4").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId4").innerText).uid : '')) {
+            this.setState({
+              videoFourName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId5").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId5").innerText).uid : '')) {
+            this.setState({
+              videoFiveName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId6").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId6").innerText).uid : '')) {
+            this.setState({
+              videoSixName: Mival.name
+            })
+          }
+
+          if (Mival.userId == (document.getElementById("feedId7").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId7").innerText).uid : '')) {
+            this.setState({
+              videoSevenName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId8").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId8").innerText).uid : '')) {
+            this.setState({
+              videoEightName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId9").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId9").innerText).uid : '')) {
+            this.setState({
+              videoNineName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId10").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId10").innerText).uid : '')) {
+            this.setState({
+              videoTenName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId11").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId11").innerText).uid : '')) {
+            this.setState({
+              videoElevenName: Mival.name
+            })
+          }
+          if (Mival.userId == (document.getElementById("feedId12").innerText ? this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).uid : '')) {
+            this.setState({
+              videoTwelveName: Mival.name
+            })
+          }
+
+        }
       }
     };
     window.IMOpenfire = msg =>{
@@ -2153,6 +2254,14 @@ class Video extends Component {
         }
       } 
       if(sid == document.getElementById('publish_video1').name) {
+        var box=document.getElementById("whiteboardDIV");
+       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
+        this.setState({
+          whiteboardTop: box.getBoundingClientRect().top * 1.08 - 40,
+          whiteboardLeft: box.getBoundingClientRect().left
+        })
+           console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
+       }
         this.setState({
 
           loading: false,
@@ -2941,6 +3050,10 @@ class Video extends Component {
     };
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
+      if(isSuccuseHs) {
+        stopHs();
+      }
+      
       console.log('退出房间回调', leaveType);
     };
     // 推送“退出房间者”给与会者
@@ -3526,6 +3639,10 @@ userType:'1'
       this.props.resourcePath + "/iconfont.js",
       this.props.resourcePath + "/html2canvas.js",
       this.props.resourcePath + "/dom-to-image.js",
+
+      // this.props.resourcePath + "/hs/hs_human_segmentation_wrapper.js",
+      // this.props.resourcePath + "/hs/hs_human_segmentation.js",
+      // this.props.resourcePath + "/hs/hs_human_segmentation.wasm",
       
 
         
@@ -3920,7 +4037,8 @@ userType:'1'
             idCardName: '',
             titleModal: '人脸识别',
             // clickedFacial: true,
-            facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+            facialImg: ocrImage,
+            isFaceImage: false
           })
         }
         
@@ -4117,26 +4235,27 @@ userType:'1'
     this.setState({
       clickedFacial: false,
       clickedOcr: false,
-      isModalVisibleFacial: true,
-      facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
-    })
-    setTimeout(() => {
+      isFaceImage: false,
+      facialImg: ocrImage,
+    },()=>{
       this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
+        isModalVisibleFacial: true,
       })
-    },1000)
+    })
   }
   }
   sgsinImage=()=>{
     this.setState({
-      facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+      facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
+      isFaceImage: true
     })
   }
   handleChangeOcr =(val)=> {
     console.log(val)
     this.setState({
       defaultValue: 1,
-      facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+      facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png'),
+      isFaceImage: true
     })
   }
   componentWillReceiveProps(props) {
@@ -4652,7 +4771,7 @@ userType:'1'
             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)
+           console.log('whiteboardDIV', this.state.whiteboardHeight,this.state.whiteboardWidth,this.state.whiteboardTop,this.state.whiteboardLeft)
        }
   }
   muteOpposite = (value) => {
@@ -5467,8 +5586,14 @@ userType:'1'
           <Modal title={this.state.titleModal}  closable={false} centered={true} visible={this.state.isModalVisibleFacial} footer={[
             !this.state.idCardName && <div key='facial'>
             <Button className="modelButtonCancel" onClick={this.handleCancelFacial}>取消</Button>
-            <Button className="modelButtonCancel" onClick={this.sgsinImage}>重新截图</Button>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>确定</Button>
+            <Button className="modelButtonCancel" onClick={this.sgsinImage}>截图</Button>
+            {
+              this.state.isFaceImage && <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>确定</Button>
+            }
+            {
+              !this.state.isFaceImage && <Button className="modelButtonNo" type="primary" danger>确定</Button>
+            }
+            
             </div>,
             this.state.idCardName && <div key='facial'>
               <Button className="modelButtonFaceOk" danger onClick={(e)=>this.confirmCallback('face')}>完成并发起人脸识别</Button>

package/packages/pages/video/video.less

@@ -378,6 +378,15 @@
   background: #DB0011!important;
   border-spacing: 20px!important;
 }
+.modelButtonNo{
+  width: 100px!important;
+  height: 40px!important;
+  font-size: 16px!important;
+  color: #5C5C5C!important;
+  border: 1px #5C5C5C solid!important;
+  background: #d9d9d9!important;
+  border-spacing: 20px!important;
+}
 .modelButtonFaceOk{
   width: 170px!important;
   height: 40px!important;