react_hsbc_teller 1.7.5 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.7.5",
+  "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

@@ -45,7 +45,7 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
-let isBackgroundBlur = false
+let isBackgroundBlur = true
 let isSuccuseHs = false
 let CanvasHome = styled.div`
   position: fixed;
@@ -97,24 +97,25 @@ function startBeauty(stream) {
 }
 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;
+  // var video_src = document.getElementById("publish_video1");
+  // video_src.srcObject = stream;
 
   await hsInit();
-  isSuccuseHs = true;
-  hsStart(stream, mode);
+
+  hsStart(stream, 'none');
   
 }
 
 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();
-}
+  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({
@@ -2198,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)
@@ -3640,9 +3658,9 @@ userType:'1'
       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",
+      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",
       
 
         
@@ -4239,9 +4257,9 @@ userType:'1'
       facialImg: ocrImage,
     },()=>{
       this.setState({
-        isModalVisibleFacial: true,
-      })
+      isModalVisibleFacial: true,
     })
+      })
   }
   }
   sgsinImage=()=>{
@@ -4906,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});
@@ -5565,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}>
@@ -5737,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: '--',