react_hsbc_teller 1.7.1 → 1.7.4

package/package.json

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

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,12 +45,10 @@ 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;
-  width: 76vw;
-  height: 74vh;
-  top: 3vh;
-  left: 1.5vw;
   z-index: ${props=>props.zIndexNum};
 
   .canvas{
@@ -75,6 +74,7 @@ const OpreateDiv = styled.div`
     cursor:pointer;
   }
 `;
+
   function clearStreamRemain() {
     if (!(beautyDiv.beauty_canvas == null || beautyDiv.beauty_canvas == undefined)) {
       beautyDiv.beauty_canvas = null;
@@ -94,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')
@@ -377,8 +399,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,
@@ -498,9 +520,9 @@ class Video extends Component {
         {
           tag: 'projectionWhiteboard',
           xPosition: 0,
-          yPosition: 175,
-          width: 960,
-          height: 540
+          yPosition: 270,
+          width: 1280,
+          height: 720
         },
         // {
         //   tag: 'VIDEO_SOURCE_SCREEN_ONE',
@@ -520,43 +542,43 @@ class Video extends Component {
           tag: 'tag1',
           xPosition: 0,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer1',
-          xPosition: 213,
+          xPosition: 320,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer2',
-          xPosition: 426,
+          xPosition: 640,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer3',
-          xPosition: 639,
+          xPosition: 960,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer4',
-          xPosition: 852,
+          xPosition: 1280,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer5',
-          xPosition: 1065,
+          xPosition: 1600,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         // {
         //   tag: 'customer6',
@@ -610,25 +632,17 @@ class Video extends Component {
           width: item.width,
           height: item.height
         })
-      }) : 
-      list.push({
+      }) : list.push({
         tag: 'VIDEO_SOURCE_SCREEN',
-          xPosition: 960,
-          yPosition: 535,
-          width: 320,
-          height: 180
+          xPosition: 1290,
+          yPosition: 640,
+          width: 630,
+          height: 350
       })
-      // 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 = 1280;
-      recordParam.height = 720;
+      recordParam.width = 1920;
+      recordParam.height = 1080;
       recordParam.recordTotalStream = 0;
       recordParam.startTimeout = 10;
       recordParam.splitType = 0;
@@ -1829,6 +1843,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 =>{
@@ -2165,6 +2245,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,
@@ -2953,6 +3041,10 @@ class Video extends Component {
     };
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
+      if(isSuccuseHs) {
+        stopHs();
+      }
+      
       console.log('退出房间回调', leaveType);
     };
     // 推送“退出房间者”给与会者
@@ -3536,6 +3628,12 @@ userType:'1'
 
       this.props.resourcePath + "/eruda.js",
       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",
       
 
         
@@ -3772,8 +3870,22 @@ userType:'1'
           if (!this.state.isPictureInPicture) {
             this.pictureInPicture()
           }
-  
+
+          
         }
+        // const publish_config1 = {};
+        //   publish_config1.publish_device = 4;
+        //   publish_config1.media_type = 1;
+        //   publish_config1.part_of_screen_id = 'whiteboardDIV';
+        //   publish_config1.video_profile_type = 2;
+        //   publish_config1.degradationType=2
+        //   publish_config1.publish_video_id = 'video30';
+        //   publish_config1.publish_tag = 'projectionWhiteboard';
+        //   publish_config1.capture_interval = 200
+        //   publish_config1.capture_mode = 2
+        //   publish_config.capture_lib =  'dom2image'
+        //   publish_config1.listen_events = ['keyup', 'scroll', 'click','touchstart','touchend','touchmove','mousemove']
+        //   this.test_controller.Publish(publish_config1)
       } else {
         this.messageClick('internal staff正在共享屏幕，请先关闭','error')
       }
@@ -4113,14 +4225,12 @@ userType:'1'
     this.setState({
       clickedFacial: false,
       clickedOcr: false,
-      isModalVisibleFacial: true,
-      facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
-    })
-    setTimeout(() => {
+      facialImg: ocrImage,
+    },()=>{
       this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
+        isModalVisibleFacial: true,
       })
-    },1000)
+    })
   }
   }
   sgsinImage=()=>{
@@ -4648,7 +4758,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) => {
@@ -4937,7 +5047,7 @@ 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}}>
+            <CanvasHome zIndexNum={this.state.zIndexNum} style={{width: this.state.whiteboardWidth + 'Px',height: this.state.whiteboardHeight + 'Px',top: this.state.whiteboardTop + 'Px',left:this.state.whiteboardLeft + 'Px'}}>
           {this.state.operateShow &&
             <OpreateDiv id="operate">
               <span style={{color: this.state.selectSpan == 'pen' ?  '#1890ff' : '#333'}} onClick={() => this.setTool('pen')}>铅笔</span>
@@ -5463,7 +5573,7 @@ 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="modelButtonCancel" onClick={this.sgsinImage}>截图</Button>
             <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkFacial}>确定</Button>
             </div>,
             this.state.idCardName && <div key='facial'>
@@ -5581,6 +5691,8 @@ userType:'1'
           </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>
+          
 
         </Spin>
       </div>);