react_hsbc_teller 1.6.9 → 1.7.2

package/package.json

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

package/packages/demo/demo.js

@@ -5,10 +5,11 @@ import Pdf from './pdf.js'
 class Demo extends Component {
   state = {
     shareMask: false,
-    mtoken: "492948d0a7ec",
-roomId: "656467744508298",
-    imRoomId: "ACkhcdtat@conference.openfire2.leimondata.cn",
-    sessionId: "ACkhcdtat",
+    imRoomId: "AIByYlxRE@conference.openfire2.leimondata.cn",
+    sessionId: "AIByYlxRE",
+    mtoken: "101046e69f16",
+    roomId: "657007173551208",
+    
     // roomId: '',
     // mtoken: '',
     // imRoomId: '',

package/packages/demo/pdf.js

@@ -55,8 +55,9 @@ handleResourcePath = (event) => {
 }
 
   render() {
+    console.log('22',this.props)
     return (
-      <div className="test">
+      <div className="test" style={{width: this.props.width,height:this.props.height}}>
                 {
                         <div>
                             坐席账号：<input placeholder="请输入坐席账号" value={this.state.tellerAccount} onChange={e => this.handleChangeTeller(e)}></input>

package/packages/pages/video/video.jsx

@@ -44,16 +44,13 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
-const CanvasHome = styled.div`
+let CanvasHome = styled.div`
   position: fixed;
-  width: 76vw;
-  height: 74vh;
-  top: 3vh;
-  left: 1.5vw;
-  z-index:999;
+  z-index: ${props=>props.zIndexNum};
 
   .canvas{
     width:100%;
+    
     height:100%;
     box-shadow: 0 0 5px 0 #06a;
     display:none;
@@ -63,8 +60,8 @@ const OpreateDiv = styled.div`
   display: inline-block;
   margin-left: 10vw;
   padding: 0 6px;
-  height: 4vh;
-  line-height: 4vh;
+  height: 40px;
+  line-height: 40px;
   border-radius: 5px;
   background: #fff;
   font-size: 16px;
@@ -111,6 +108,8 @@ class Video extends Component {
     isScreenSwitching: false,
     whiteboardWidth: '',
     whiteboardHeight: '',
+    whiteboardTop: '',
+    whiteboardLeft: '',
     laveRoomSharedScreen: false,
     isJoinRoom: false,
     sessionType: false,
@@ -250,11 +249,14 @@ class Video extends Component {
     operateShow: false,
     drawConfig: {
       curryControl: 'pen', // 工具类型
-    }
+    },
+    zIndexNum: -1,
+    selectSpan: 'pen'
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
   
+  
   /**
    * 创建房间成功后回调后台
    * @param  {JSON} data 数据类型
@@ -492,9 +494,9 @@ class Video extends Component {
         {
           tag: 'projectionWhiteboard',
           xPosition: 0,
-          yPosition: 175,
-          width: 960,
-          height: 540
+          yPosition: 270,
+          width: 1280,
+          height: 720
         },
         // {
         //   tag: 'VIDEO_SOURCE_SCREEN_ONE',
@@ -514,43 +516,43 @@ class Video extends Component {
           tag: 'tag1',
           xPosition: 0,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer1',
-          xPosition: 213,
+          xPosition: 320,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer2',
-          xPosition: 426,
+          xPosition: 640,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer3',
-          xPosition: 639,
+          xPosition: 960,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer4',
-          xPosition: 852,
+          xPosition: 1280,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         {
           tag: 'customer5',
-          xPosition: 1065,
+          xPosition: 1600,
           yPosition: 0,
-          width: 213,
-          height: 175
+          width: 310,
+          height: 180
         },
         // {
         //   tag: 'customer6',
@@ -604,25 +606,17 @@ class Video extends Component {
           width: item.width,
           height: item.height
         })
-      }) : 
-      list.push({
+      }) : list.push({
         tag: 'VIDEO_SOURCE_SCREEN',
-          xPosition: 960,
-          yPosition: 535,
-          width: 320,
-          height: 180
+          xPosition: 1290,
+          yPosition: 640,
+          width: 630,
+          height: 350
       })
-      // 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 = 1280;
-      recordParam.height = 720;
+      recordParam.width = 1920;
+      recordParam.height = 1080;
       recordParam.recordTotalStream = 0;
       recordParam.startTimeout = 10;
       recordParam.splitType = 0;
@@ -3334,7 +3328,7 @@ userType:'1'
       let result = await API.videoRecordCallback({
         activityId: this.props.businessNumber,
         sessionId: this.state.sessionId,
-        roomId: this.state.channelId,
+        roomId: this.state.channelId + '',
         type: type,
         status: status
       });
@@ -3530,7 +3524,8 @@ userType:'1'
 
       this.props.resourcePath + "/eruda.js",
       this.props.resourcePath + "/iconfont.js",
-      this.props.resourcePath + "/dialogue.css",
+      this.props.resourcePath + "/html2canvas.js",
+      this.props.resourcePath + "/dom-to-image.js",
       
 
         
@@ -3721,7 +3716,7 @@ userType:'1'
           // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
           publish_config.enableDesktopAudio=true
           publish_config.degradationType=2
-          publish_config.desktopStreamToCanvas=true
+          publish_config.desktopStreamToCanvas=false
           publish_config.sid = document.getElementById('video20').name
           this.test_controller.ChangeMediaStream(publish_config)
           this.state.isScreenSwitching = true
@@ -3733,7 +3728,7 @@ userType:'1'
             // publish_config.video_profile_type=100
             // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
             publish_config.enableDesktopAudio=true
-            publish_config.desktopStreamToCanvas=true
+            publish_config.desktopStreamToCanvas=false
             publish_config.degradationType=2
             publish_config.sid = document.getElementById('video20').name;
             this.test_controller.ChangeMediaStream(publish_config);
@@ -3742,7 +3737,7 @@ userType:'1'
             publish_config.publish_device = 2
             publish_config.need_volume_analyser = true
             publish_config.video_profile_type = 1
-            publish_config.desktopStreamToCanvas=true
+            publish_config.desktopStreamToCanvas=false
             // publish_config.video_profile_type=100
             // publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
             publish_config.enableDesktopAudio=true
@@ -3767,8 +3762,22 @@ userType:'1'
           if (!this.state.isPictureInPicture) {
             this.pictureInPicture()
           }
-  
+
+          
         }
+        // const publish_config1 = {};
+        //   publish_config1.publish_device = 4;
+        //   publish_config1.media_type = 1;
+        //   publish_config1.part_of_screen_id = 'whiteboardDIV';
+        //   publish_config1.video_profile_type = 2;
+        //   publish_config1.degradationType=2
+        //   publish_config1.publish_video_id = 'video30';
+        //   publish_config1.publish_tag = 'projectionWhiteboard';
+        //   publish_config1.capture_interval = 200
+        //   publish_config1.capture_mode = 2
+        //   publish_config.capture_lib =  'dom2image'
+        //   publish_config1.listen_events = ['keyup', 'scroll', 'click','touchstart','touchend','touchmove','mousemove']
+        //   this.test_controller.Publish(publish_config1)
       } else {
         this.messageClick('internal staff正在共享屏幕，请先关闭','error')
       }
@@ -4516,7 +4525,7 @@ userType:'1'
       type
     });
 
-    this.setState({ drawConfig });
+    this.setState({ drawConfig,selectSpan: type });
   }
 
   setOpreate(type) {
@@ -4539,11 +4548,17 @@ userType:'1'
   }
   graffiti=()=>{
     if(!this.state.operateShow) {
+      this.setState({
+        zIndexNum: 999
+      })
       this.change(true)
     }
 
   }
   closeGraffiti=()=>{
+    this.setState({
+      zIndexNum: -1
+    })
     this.change(false)
   }
   change(val) {
@@ -4635,6 +4650,8 @@ userType:'1'
        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.whiteboardLeft = box.getBoundingClientRect().left
            console.log('whiteboardDIV', this.state.whiteboardHeight,box.clientHeight,this.state.whiteboardWidth)
        }
   }
@@ -4924,11 +4941,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>
+            <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 onClick={() => this.setTool('pen')}>铅笔</span>
-              <span onClick={() => this.setTool('eraser')}>橡皮</span>
+              <span style={{color: this.state.selectSpan == 'pen' ?  '#1890ff' : '#333'}} onClick={() => this.setTool('pen')}>铅笔</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>
               <span onClick={() => this.setOpreate('clear')}>清除</span>
@@ -5568,6 +5585,8 @@ userType:'1'
           </Modal>
           <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>
           <video className="mixedvideo" id="manedvideo" autoPlay width="0" height="0"></video>
+          <video className="mixedvideo" id="video30" autoPlay width="0" height="0"></video>
+          
 
         </Spin>
       </div>);