react_hsbc_teller 1.7.9 → 1.7.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.7.9",
+  "version": "1.7.51",
   "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,9 +56,6 @@ 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 = (
@@ -84,7 +81,8 @@ export default class foot extends Component {
                           </div>
                       </div>
                       </div>
-                  } */}        
+                  } */}
+                  
                   {
                       menus.map((item,index)=>{
                           return <div key={index}className='footHover'>
@@ -97,16 +95,6 @@ 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,10 +45,8 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
-let isBackgroundBlur = true
+let isBackgroundBlur = false
 let isSuccuseHs = false
-let isGraffiti = false
-let strokeColor = '#333'
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props=>props.zIndexNum};
@@ -96,47 +94,27 @@ 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");
-  // video_src.srcObject = stream;
+  var video_src = document.getElementById("publish_video1");
+  var mode = 'blur';
+  video_src.srcObject = stream;
 
   await hsInit();
-
-  hsStart(stream, 'none');
+  isSuccuseHs = true;
+  hsStart(stream, mode);
   
 }
 
 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
-
+var video_src = document.getElementById("publish_video1");
+if(video_src) {
+  console.log('video_src',video_src)
+  video_src.srcObject = null;
+  isSuccuseHs = false
+  hsStop();
 }
-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({
@@ -156,10 +134,8 @@ class Video extends Component {
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
-    widthVideo: '',
     whiteboardTop: '',
     whiteboardLeft: '',
-    leftVideo: '',
     laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
@@ -2222,100 +2198,42 @@ class Video extends Component {
     this.test_controller.OnSendTextMsgFailed  =(msgId, code, msg)=>{
       console.log('发送失败',msgId,code, msg)
     }
-    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.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.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
@@ -2336,7 +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,
@@ -2374,18 +2299,6 @@ class Video extends Component {
           },
           1000
         );
-      } else {
-        var box=document.getElementById("whiteboardDIV");
-        var box1 = document.getElementById("operate")
-        var height = box1 ? box1.offsetHeight : 40
-       if(box){ //此处在加一层判断，更加严密，如果box存在的情况下获取
-        this.setState({
-          whiteboardTop: box.getBoundingClientRect().top - height,
-          whiteboardLeft: box.getBoundingClientRect().left,
-          leftVideo: (box.offsetWidth - this.state.widthVideo)/2 + box.getBoundingClientRect().left
-        })
-           console.log('whiteboardDIV',this.state.whiteboardTop,this.state.whiteboardLeft)
-       }
       }
     };
     // 发布媒体流失败
@@ -3140,9 +3053,6 @@ class Video extends Component {
       if(isSuccuseHs) {
         stopHs();
       }
-      if(isGraffiti) {
-        mixStopClick()
-      }
       
       console.log('退出房间回调', leaveType);
     };
@@ -3730,12 +3640,11 @@ 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
@@ -4330,9 +4239,9 @@ userType:'1'
       facialImg: ocrImage,
     },()=>{
       this.setState({
-      isModalVisibleFacial: true,
-    })
+        isModalVisibleFacial: true,
       })
+    })
   }
   }
   sgsinImage=()=>{
@@ -4612,14 +4521,6 @@ 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() {
@@ -4661,7 +4562,6 @@ userType:'1'
     navigator.mediaDevices.getDisplayMedia({
       video: true,
       preferCurrentTab:true,
-      audio: true
       // video: {
       //   width: document.body.clientWidth,
       //   height: document.body.clientHeight
@@ -4681,7 +4581,6 @@ userType:'1'
       })
     
     streamShare = stream
-    
     stream.getVideoTracks()[0].onended = async ()=>{
       //单击停止共享按钮后，触发这个事件
       streamShare = ''
@@ -4726,7 +4625,7 @@ userType:'1'
   openCanvas(drawCanvas) {
     if (!this.boardOperate) {
       this.boardOperate = new BoardOperate(drawCanvas, {
-        drawColor: strokeColor,
+        drawColor: "#000000",
         drawType: "pen",
         lineWidth: 5,
         fillStyle: '', // 初始背景色，若为空则透明背景 
@@ -4746,23 +4645,8 @@ userType:'1'
     });
 
     this.setState({ drawConfig,selectSpan: type });
-    this.boardOperate.drawColor = '#333'
   }
-  setStrokeColor() {
-    console.log(this.boardOperate)
-    const { drawConfig } = this.state;
-    const type = 'pen'
-    drawConfig.curryControl = type;
-    this.boardOperate.changeWay({
-      type
-    });
 
-    this.setState({ drawConfig,selectSpan: type });
-    this.boardOperate.drawColor = '#ff4d4f'
-    this.setState({
-      selectSpan: 'redPen'
-    })
-  }
   setOpreate(type) {
     this.boardOperate[type]();
   }
@@ -4780,30 +4664,13 @@ 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)
-      
     }
 
   }
@@ -4812,13 +4679,6 @@ 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 })
@@ -4830,10 +4690,6 @@ userType:'1'
       setTimeout(() => {
         this.openCanvas(canvas)
       }, 0);
-      this.graffitiClick()
-      this.setState({
-        selectSpan: 'pen'
-      })
     } else {
       // this.downCanvas()
       this.closeCanvas();
@@ -4910,15 +4766,11 @@ userType:'1'
   }
   componentDidMount() {
     var box=document.getElementById("whiteboardDIV");
-    var box1 = document.getElementById("operate")
-    var height = box1 ? box1.offsetHeight : 40
        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 - height
+            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)
        }
   }
@@ -5054,20 +4906,6 @@ 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});
@@ -5222,11 +5060,10 @@ 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: 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'}}>
+            <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>
-              <span style={{color: this.state.selectSpan == 'redPen' ?  '#1890ff' : '#333'}} onClick={() => this.setStrokeColor()}>红笔</span>
               <span style={{color: this.state.selectSpan == 'eraser' ?  '#1890ff' : '#333'}} onClick={() =>  this.setTool('eraser')}>橡皮</span>
               <span onClick={() => this.setOpreate('undo')}>撤销</span>
               <span onClick={() => this.setOpreate('redo')}>恢复</span>
@@ -5237,12 +5074,11 @@ 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" style={{'text-align': 'center'}}>
+                <div className="videoDiv">
                   <video
                     id="video20"
                     autoPlay
                     muted={true}
-                    style={{ height: this.state.whiteboardHeight + 'px',width: this.state.widthVideo + 'px'}}
                     className="videoTab"
                     disablePictureInPicture
                   />
@@ -5729,7 +5565,6 @@ 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}>
@@ -5902,7 +5737,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI','BACK'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',