react_hsbc_teller 1.7.4 → 1.7.7

package/package.json

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

package/packages/demo/demo.js

@@ -15,16 +15,16 @@ roomId: "656467744508298",
     // sessionId: '',
     isVideo: false,
     tellerAccount: '00000000',
-    callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
-    // callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
+    // callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
+    callbackUrl: 'https://aag.wealth-platform.uat.ali.cloud.cn.hsbc/nosaml/api/appointment/wealth/api/v1/appointment/ali/createMeetingRoom',
     businessNumber: '',
     lang: 'zh',
-    roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
-    baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
-    resourcePath: 'https://counter-web.leimondata.cn:7199',
-    // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws',
-    // baseURL:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
-    // resourcePath:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
+    // roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+    // baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
+    // resourcePath: 'https://counter-web.leimondata.cn:7199',
+    roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws',
+    baseURL:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
+    resourcePath:'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
     prohibitPrompt: '无客户',
   titleBackground: '#40a9ff',
   titleColor: '#faad14',

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,8 +45,9 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
-let isBackgroundBlur = false
+let isBackgroundBlur = true
 let isSuccuseHs = false
+let isGraffiti = false
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props=>props.zIndexNum};
@@ -94,27 +95,47 @@ function startBeauty(stream) {
   beautyDiv = meetingBeautifyStream(newStream, beautyNum);
   newStream = beautyDiv.stream;
   return newStream
+}
+async function startMix(stream,onState) {
+  var drawCanvas = document.getElementById('canvas');
+  await mixInit(drawCanvas);
+  mixStart(stream,onState);
+  
+  
 }
 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
+
 }
+async function mixStopClick() {
+  var stop_stream = true;//控制是否内部来进行关闭流
+    var stream = mixStop(stop_stream);
+    if (stream != null && stream != undefined) {
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+        stream = null;
+    }
+    isGraffiti = false
 
 }
 message.config({
@@ -134,8 +155,10 @@ class Video extends Component {
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
+    widthVideo: '',
     whiteboardTop: '',
     whiteboardLeft: '',
+    leftVideo: '',
     laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
@@ -152,6 +175,7 @@ class Video extends Component {
     linkData: '',
     roomCustomerList: [],
     facialImg: '',
+    isFaceImage: false,
     isModalVisibleFacial: false,
     isModalVisibleEnd: false,
     isModalVisible: false,
@@ -520,9 +544,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',
@@ -542,43 +566,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',
@@ -632,17 +656,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;
@@ -2189,42 +2221,100 @@ 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 (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_device != 2) {
+      //   return stream
+      // }
+      if(publish_tag == 'tag1') {
+        console.log('tag1',stream)
+        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
+      } 
+      
+      if(publish_tag == 'projectionWhiteboard' && publish_device == 2) {
+        // this.graffiti()
+        console.log('projectionWhiteboard',stream)
+        let newStream1 = stream;
+        if (stream.getVideoTracks()[0]) {
+          if(this.state.operateShow) {
+            await startMix(newStream1,'mix');
+            
+            isGraffiti = true
+            this.setState({
+              zIndexNum: 999
+            })
+            const canvas = document.getElementById('canvas');
+            canvas.width = this.state.widthVideo
+          } else {
+            await startMix(newStream1,'none');
+          }
+          
+          newStream1 = mixCaptureStream();
+          console.log('projectionWhiteboard1',newStream1)
+           // 清理原始流
+           newStream1.oninactive = function () {
+        clearOriginStream(stream);
+      };
+      newStream1.getVideoTracks()[0].onended = function () {
+        clearOriginStream(stream);
+      };
+      function clearOriginStream(stream) {
+        stream.getTracks().forEach((track) => {
+          track.stop();
+        });
+        stream = null;
+      }
+        }
+        return newStream1
+      } else {
+        return stream
+      }
       
-    // }
+    }
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
@@ -2249,7 +2339,8 @@ class Video extends Component {
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
         this.setState({
           whiteboardTop: box.getBoundingClientRect().top * 1.08 - 40,
-          whiteboardLeft: box.getBoundingClientRect().left
+          whiteboardLeft: box.getBoundingClientRect().left,
+          leftVideo: (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
         })
            console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
        }
@@ -3044,6 +3135,9 @@ class Video extends Component {
       if(isSuccuseHs) {
         stopHs();
       }
+      if(isGraffiti) {
+        mixStopClick()
+      }
       
       console.log('退出房间回调', leaveType);
     };
@@ -3631,11 +3725,12 @@ 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",
       
-
+      this.props.resourcePath + "/mix/mix_frame.js",
+      this.props.resourcePath + "/mix/pageBoard.js"
         
     ]
     const that = this
@@ -4028,7 +4123,8 @@ userType:'1'
             idCardName: '',
             titleModal: '人脸识别',
             // clickedFacial: true,
-            facialImg: this.test_controller.TakePicture(1, undefined, undefined, this.state.customOcrSid, 'png')
+            facialImg: ocrImage,
+            isFaceImage: false
           })
         }
         
@@ -4225,24 +4321,27 @@ userType:'1'
     this.setState({
       clickedFacial: false,
       clickedOcr: false,
+      isFaceImage: false,
       facialImg: ocrImage,
     },()=>{
       this.setState({
-        isModalVisibleFacial: true,
-      })
+      isModalVisibleFacial: true,
     })
+      })
   }
   }
   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) {
@@ -4508,6 +4607,14 @@ userType:'1'
 
     videoMedia.addEventListener('play', (event) =>{
       var $this = this; //cache
+      if($this.state.operateShow) {
+        isGraffiti = false
+        this.setState({
+          zIndexNum: 999
+        })
+        const canvas = document.getElementById('canvas');
+        canvas.width = this.state.whiteboardWidth
+      }
       console.log('addEventListener',!$this.paused,!$this.ended,x, y, width, height)
       loop()
       function loop() {
@@ -4568,6 +4675,7 @@ userType:'1'
       })
     
     streamShare = stream
+    
     stream.getVideoTracks()[0].onended = async ()=>{
       //单击停止共享按钮后，触发这个事件
       streamShare = ''
@@ -4651,13 +4759,30 @@ userType:'1'
     img.src = base64;
     document.body.appendChild(img);
 
+  }
+  graffitiClick=async()=>{
+    if(!isGraffiti) {
+      if (this.state.tabTitles.find(el=>el.value == 'RMScreen')) {
+        // await startMix(document.getElementById('video20').srcObject);
+        // document.getElementById('video20').srcObject = mixCaptureStream();
+        
+        mixSetMode('mix')
+        isGraffiti = true
+        console.log('isGraffiti',isGraffiti)
+        const canvas = document.getElementById('canvas');
+        canvas.width = this.state.widthVideo
+      }
+    }
+    
   }
   graffiti=()=>{
+    
     if(!this.state.operateShow) {
       this.setState({
         zIndexNum: 999
       })
       this.change(true)
+      
     }
 
   }
@@ -4666,6 +4791,13 @@ userType:'1'
       zIndexNum: -1
     })
     this.change(false)
+    if(isGraffiti) {
+      isGraffiti = false
+      mixSetMode('none')
+      console.log('isGraffiti',isGraffiti)
+      // var stream = mixStop(false);
+      // document.getElementById('video20').srcObject = stream
+    }
   }
   change(val) {
     this.setState({ operateShow: val })
@@ -4677,6 +4809,7 @@ userType:'1'
       setTimeout(() => {
         this.openCanvas(canvas)
       }, 0);
+      this.graffitiClick()
     } else {
       // this.downCanvas()
       this.closeCanvas();
@@ -4756,8 +4889,10 @@ userType:'1'
        if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
             this.state.whiteboardWidth = box.offsetWidth,
             this.state.whiteboardHeight = box.offsetHeight  * 0.92,
+            this.state.widthVideo = this.state.whiteboardHeight * 1280 / 720
             this.state.whiteboardTop = box.getBoundingClientRect().top * 1.08 - 40
             this.state.whiteboardLeft = box.getBoundingClientRect().left
+            this.state.leftVideo = (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
            console.log('whiteboardDIV', this.state.whiteboardHeight,this.state.whiteboardWidth,this.state.whiteboardTop,this.state.whiteboardLeft)
        }
   }
@@ -4893,6 +5028,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});
@@ -5047,7 +5196,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 + 'Px',height: this.state.whiteboardHeight + 'Px',top: this.state.whiteboardTop + 'Px',left:this.state.whiteboardLeft + 'Px'}}>
+            <CanvasHome zIndexNum={this.state.zIndexNum} style={{width: isGraffiti ? this.state.widthVideo + 'px' : this.state.whiteboardWidth + 'Px',height: this.state.whiteboardHeight + 'Px',top: this.state.whiteboardTop + 'Px',left: isGraffiti ? this.state.leftVideo + 'px' :this.state.whiteboardLeft + 'Px'}}>
           {this.state.operateShow &&
             <OpreateDiv id="operate">
               <span style={{color: this.state.selectSpan == 'pen' ?  '#1890ff' : '#333'}} onClick={() => this.setTool('pen')}>铅笔</span>
@@ -5061,11 +5210,12 @@ userType:'1'
           <canvas id="canvas" className="canvas"></canvas>
         </CanvasHome>
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
-                <div className="videoDiv">
+                <div className="videoDiv" style={{'text-align': 'center'}}>
                   <video
                     id="video20"
                     autoPlay
                     muted={true}
+                    style={{ height: this.state.whiteboardHeight + 'px',width: this.state.widthVideo + 'px'}}
                     className="videoTab"
                     disablePictureInPicture
                   />
@@ -5552,6 +5702,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}>
@@ -5574,7 +5725,13 @@ userType:'1'
             !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>
+            {
+              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>
@@ -5718,7 +5875,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;