react_hsbc_teller 1.7.3 → 1.7.6

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -56,6 +56,9 @@ export default class foot extends Component {
     graffiti=()=>{
         this.props.graffiti()
     }
+    virtualization=()=>{
+        this.props.virtualization()
+    }
     render() {
         const {clickedOcr,clickedFacial,img,isWhiteboard,cameraImg,isTranscribing ,screenName,suspendName,customerList,menus,voiceName,beautyName} = this.props
         const content = (
@@ -81,8 +84,7 @@ export default class foot extends Component {
                           </div>
                       </div>
                       </div>
-                  } */}
-                  
+                  } */}        
                   {
                       menus.map((item,index)=>{
                           return <div key={index}className='footHover'>
@@ -95,6 +97,16 @@ export default class foot extends Component {
                           </div>
                       </div>
                       </div>
+                  }
+                  {
+                      item == 'BACK'&&<div className='footHover' onClick={this.virtualization.bind(this)}>
+                      <div className="one">
+                          <img className="imgClass" src={require("../../assets/img/beijing.png").default} alt="" />
+                          <div className="text">
+                          背景虚化
+                          </div>
+                      </div>
+                      </div>
                   }
                               {
                       item == 'BOARD'&&<div className='footHover' onClick={this.switchExternal.bind(this)}>

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 = true
+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;
@@ -91,6 +95,29 @@ function startBeauty(stream) {
   newStream = beautyDiv.stream;
   return newStream
 }
+async function startHs(stream) {
+  // var canvas =  document.getElementById('publish_video_canvas');
+  // var video_src = document.getElementById("publish_video1");
+  // video_src.srcObject = stream;
+
+  await hsInit();
+
+  hsStart(stream, 'none');
+  
+}
+
+async function stopHs() {
+  var stop_stream = true;//控制是否内部来进行关闭流
+    var stream = hsStop(stop_stream);
+    if (stream != null && stream != undefined) {
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+        stream = null;
+    }
+    isSuccuseHs = false
+
+}
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -126,6 +153,7 @@ class Video extends Component {
     linkData: '',
     roomCustomerList: [],
     facialImg: '',
+    isFaceImage: false,
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
@@ -397,11 +425,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 +522,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 +544,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 +634,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;
@@ -2163,42 +2199,59 @@ class Video extends Component {
     this.test_controller.OnSendTextMsgFailed  =(msgId, code, msg)=>{
       console.log('发送失败',msgId,code, msg)
     }
-    // this.test_controller.StreamFilterHandler = async function (publish_tag, stream, stream_type, publish_device, media_type) {
-    //   console.log(`stream processed by client, publish_device=${publish_device}, media_type=${media_type}, publish_tag=${publish_tag},stream_type=${stream_type}`);
-    //   if (stream_type == "subscribe") {
-    //     return stream
-    //   }
-    //   if (media_type == 2 || media_type == 4) {
-    //     return stream
-    //   }
-    //   if(publish_tag == 'tag1') {
-    //     let newStream = stream;
-    //   let beauty_strength = beautyNum;
-    //   if (beauty_strength != 0 && stream.getVideoTracks()[0]) {
-    //     newStream = new MediaStream([startBeauty(stream).getVideoTracks()[0]]);
-    //     // 清理原始流
-    //   newStream.oninactive = function () {
-    //     clearOriginStream(stream);
-    //   };
-    //   newStream.getVideoTracks()[0].onended = function () {
-    //     clearOriginStream(stream);
-    //   };
-    //   function clearOriginStream(stream) {
-    //     stream.getTracks().forEach((track) => {
-    //       track.stop();
-    //     });
-    //     stream = null;
-    //   }
-    //   };
-    //   if (stream.getAudioTracks()[0] && newStream.addTrack) {
-    //     newStream.addTrack(stream.getAudioTracks()[0])
-    //   }
-    //   return newStream
-    //   } else {
-    //     return stream
-    //   }
+    this.test_controller.StreamFilterHandler = async function (publish_tag, stream, stream_type, publish_device, media_type) {
+      console.log(`stream processed by client, publish_device=${publish_device}, media_type=${media_type}, publish_tag=${publish_tag},stream_type=${stream_type}`);
+      if (stream_type == "subscribe") {
+        return stream
+      }
+      if (media_type == 2 || media_type == 4) {
+        return stream
+      }
+      if(publish_tag == 'tag1') {
+        let newStream = stream;
+      let beauty_strength = beautyNum;
+      if (beauty_strength != 0 && stream.getVideoTracks()[0]) {
+        newStream = new MediaStream([startBeauty(stream).getVideoTracks()[0]]);
+        // 清理原始流
+      newStream.oninactive = function () {
+        clearOriginStream(stream);
+      };
+      newStream.getVideoTracks()[0].onended = function () {
+        clearOriginStream(stream);
+      };
+      function clearOriginStream(stream) {
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+        stream = null;
+      }
+      };
+      if (stream.getVideoTracks()[0]) {
+        await startHs(newStream);
+        newStream = hsCaptureStream();
+          // 清理原始流
+      newStream.oninactive = function () {
+        clearOriginStream(stream);
+      };
+      newStream.getVideoTracks()[0].onended = function () {
+        clearOriginStream(stream);
+      };
+      function clearOriginStream(stream) {
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+        stream = null;
+      }
+    }
+      if (stream.getAudioTracks()[0] && newStream.addTrack) {
+        newStream.addTrack(stream.getAudioTracks()[0])
+      }
+      return newStream
+      } else {
+        return stream
+      }
       
-    // }
+    }
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
@@ -3015,6 +3068,10 @@ class Video extends Component {
     };
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
+      if(isSuccuseHs) {
+        stopHs();
+      }
+      
       console.log('退出房间回调', leaveType);
     };
     // 推送“退出房间者”给与会者
@@ -3600,6 +3657,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",
       
 
         
@@ -3994,7 +4055,8 @@ userType:'1'
             idCardName: '',
             titleModal: '人脸识别',
             // clickedFacial: true,
-            facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+            facialImg: ocrImage,
+            isFaceImage: false
           })
         }
         
@@ -4191,26 +4253,27 @@ userType:'1'
     this.setState({
       clickedFacial: false,
       clickedOcr: false,
+      isFaceImage: false,
+      facialImg: ocrImage,
+    },()=>{
+      this.setState({
       isModalVisibleFacial: true,
-      facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
     })
-    setTimeout(() => {
-      this.setState({
-        facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
       })
-    },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) {
@@ -4861,6 +4924,20 @@ userType:'1'
       });
     },100)
     
+  }
+  virtualizationClick=async()=>{
+    if(!isSuccuseHs) {
+
+    hsSetMode('blur')
+    isSuccuseHs = true
+    } else {
+      hsSetMode('none')
+      isSuccuseHs = false
+    }
+  }
+  virtualization=()=>{
+    this.virtualizationClick()
+    
   }
   handleChangeIdCardName = (event) => {
     this.setState({idCardName: event.target.value});
@@ -5520,6 +5597,7 @@ userType:'1'
             inspection={this.inspection}
             beautyClick={this.beautyClick}
             graffiti={this.graffiti}
+            virtualization={this.virtualization}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
             onCancel={this.handleCancel}>
@@ -5541,8 +5619,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>
@@ -5686,7 +5770,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI','BACK'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',

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;