react_hsbc_teller 1.7.6 → 1.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "1.7.6",
+  "version": "1.7.9",
   "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/video/video.jsx

@@ -47,6 +47,8 @@ let rateList = []
 let beautyDiv = {};
 let isBackgroundBlur = true
 let isSuccuseHs = false
+let isGraffiti = false
+let strokeColor = '#333'
 let CanvasHome = styled.div`
   position: fixed;
   z-index: ${props=>props.zIndexNum};
@@ -94,6 +96,13 @@ 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');
@@ -117,6 +126,18 @@ async function stopHs() {
     }
     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({
   getContainer: ()=>document.getElementById('allHSBC')
@@ -135,8 +156,10 @@ class Video extends Component {
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
+    widthVideo: '',
     whiteboardTop: '',
     whiteboardLeft: '',
+    leftVideo: '',
     laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
@@ -425,11 +448,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 = {};
@@ -2199,7 +2222,7 @@ 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) {
+    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
@@ -2207,7 +2230,11 @@ class Video extends Component {
       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]) {
@@ -2247,6 +2274,43 @@ class Video extends Component {
         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
       }
@@ -2272,14 +2336,7 @@ 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,
@@ -2317,6 +2374,18 @@ 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)
+       }
       }
     };
     // 发布媒体流失败
@@ -3071,6 +3140,9 @@ class Video extends Component {
       if(isSuccuseHs) {
         stopHs();
       }
+      if(isGraffiti) {
+        mixStopClick()
+      }
       
       console.log('退出房间回调', leaveType);
     };
@@ -3662,7 +3734,8 @@ userType:'1'
       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
@@ -4539,6 +4612,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() {
@@ -4580,6 +4661,7 @@ userType:'1'
     navigator.mediaDevices.getDisplayMedia({
       video: true,
       preferCurrentTab:true,
+      audio: true
       // video: {
       //   width: document.body.clientWidth,
       //   height: document.body.clientHeight
@@ -4599,6 +4681,7 @@ userType:'1'
       })
     
     streamShare = stream
+    
     stream.getVideoTracks()[0].onended = async ()=>{
       //单击停止共享按钮后，触发这个事件
       streamShare = ''
@@ -4643,7 +4726,7 @@ userType:'1'
   openCanvas(drawCanvas) {
     if (!this.boardOperate) {
       this.boardOperate = new BoardOperate(drawCanvas, {
-        drawColor: "#000000",
+        drawColor: strokeColor,
         drawType: "pen",
         lineWidth: 5,
         fillStyle: '', // 初始背景色，若为空则透明背景 
@@ -4663,8 +4746,23 @@ 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]();
   }
@@ -4682,13 +4780,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)
+      
     }
 
   }
@@ -4697,6 +4812,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 })
@@ -4708,6 +4830,10 @@ userType:'1'
       setTimeout(() => {
         this.openCanvas(canvas)
       }, 0);
+      this.graffitiClick()
+      this.setState({
+        selectSpan: 'pen'
+      })
     } else {
       // this.downCanvas()
       this.closeCanvas();
@@ -4784,11 +4910,15 @@ 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.whiteboardTop = box.getBoundingClientRect().top * 1.08 - 40
+            this.state.widthVideo = this.state.whiteboardHeight * 1280 / 720
+            this.state.whiteboardTop = box.getBoundingClientRect().top - height
             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)
        }
   }
@@ -5092,10 +5222,11 @@ 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>
+              <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>
@@ -5106,11 +5237,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
                   />