react_hsbc_teller 1.2.7 → 1.3.0

package/package.json

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

package/packages/pages/video/video.jsx

@@ -36,6 +36,8 @@ let mix_stream
 let worker
 let streamShare
 let muteJson = new Map()
+let dateTime = 0
+let messageValue = ''
 message.config({
   getContainer: ()=>document.getElementById('allHSBC')
 })
@@ -265,7 +267,7 @@ class Video extends Component {
       let result = await API.mpaasSig({ account: data.account, type: data.type });
       console.log(result);
       window.sessionStorage.setItem('alimpassSig', result.mpsSig);
-        this.state.workSpaceId = result.workSpaceId,
+        this.state.workSpaceId = result.workspaceId,
         this.state.appId = result.appId,
         this.state.bizName = result.bizName
       // const data1={
@@ -374,6 +376,7 @@ class Video extends Component {
     recordParam.startTimeout = 10;
     recordParam.splitType = 0;
     recordParam.endType = 1;
+    recordParam.crf = 30
     recordParam.overlaps = [
       {
         tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
@@ -386,30 +389,19 @@ class Video extends Component {
         fontSize: 16, // 字体⼤⼩
         url: '' // ⽔印图⽚ HTTP 地址
       },
-      {
-        tag: '', // 流 tag，如果不设置或为空，则为全局⽔印
-        type: 2, // 1 为时间戳⽔印；2 为⽂字⽔印；3 为图⽚⽔印
-        id: 2, // ⽔印 ID
-        enable: true,
-        xPosition: 10, // x 轴位置
-        yPosition: 50, // y 轴位置
-        text: this.state.contentDress, // ⽔印⽂字
-        fontSize: 16, // 字体⼤⼩
-        url: '' // ⽔印图⽚ HTTP 地址
-      }
     ];
   recordParam.tagPositions = [
     {
       tag: 'projectionWhiteboard',
       xPosition: 0,
-      yPosition: 540,
-      width: 960,
-      height: 540
+      yPosition: 270,
+      width: 1280,
+      height: 720
     },
     {
       tag: 'VIDEO_SOURCE_SCREEN',
-      xPosition: 0,
-      yPosition: 180,
+      xPosition: 1280,
+      yPosition: 630,
       width: 640,
       height: 360
     },
@@ -417,86 +409,86 @@ class Video extends Component {
       tag: 'tag1',
       xPosition: 0,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer1',
-      xPosition: 240,
+      xPosition: 320,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer2',
-      xPosition: 480,
+      xPosition: 640,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer3',
-      xPosition: 720,
+      xPosition: 960,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer4',
-      xPosition: 960,
+      xPosition: 1280,
       yPosition: 0,
-      width: 240,
+      width: 310,
       height: 180
     },
     {
       tag: 'customer5',
-      xPosition: 1200,
+      xPosition: 1600,
       yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer6',
-      xPosition: 1440,
-      yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer7',
-      xPosition: 1680,
-      yPosition: 0,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer8',
-      xPosition: 1680,
-      yPosition: 180,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer9',
-      xPosition: 1680,
-      yPosition: 360,
-      width: 240,
-      height: 180
-    },
-    {
-      tag: 'customer10',
-      xPosition: 1680,
-      yPosition: 540,
-      width: 240,
+      width: 310,
       height: 180
     },
-    {
-      tag: 'customer11',
-      xPosition: 1680,
-      yPosition: 720,
-      width: 240,
-      height: 180
-    }
+    // {
+    //   tag: 'customer6',
+    //   xPosition: 1440,
+    //   yPosition: 0,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer7',
+    //   xPosition: 1680,
+    //   yPosition: 0,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer8',
+    //   xPosition: 1680,
+    //   yPosition: 180,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer9',
+    //   xPosition: 1680,
+    //   yPosition: 360,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer10',
+    //   xPosition: 1680,
+    //   yPosition: 540,
+    //   width: 240,
+    //   height: 180
+    // },
+    // {
+    //   tag: 'customer11',
+    //   xPosition: 1680,
+    //   yPosition: 720,
+    //   width: 240,
+    //   height: 180
+    // }
   ]
     console.log('recordParam', recordParam);
     this.test_controller.StartRemoteRecord(filePath, recordParam, '')
@@ -796,23 +788,46 @@ class Video extends Component {
   }
   messageClick=(value,valueOne)=>{
     console.log(value,valueOne)
-    if(valueOne == 'error') {
-      message.error({
-        content: value,
-        icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
-        className: 'errorClassName',
-        top: 200,
-        duration: 10
-      })
-    } else if(valueOne == 'success') {
-      message.success({
-        content: value,
-        icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
-        className: 'successClassName',
-        top: 200,
-        duration: 10
-      })
-    }
+    if(messageValue != value){
+      messageValue = value
+      dateTime = new  Date().getTime()
+        if(valueOne == 'error') {
+          message.error({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
+            className: 'errorClassName',
+            top: 200,
+            duration: 10
+          })
+        } else if(valueOne == 'success') {
+          message.success({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+            className: 'successClassName',
+            top: 200,
+            duration: 10
+          })
+        }
+      } else if(((new  Date().getTime()) - dateTime) / 1000 > 30){
+        dateTime = new  Date().getTime()
+        if(valueOne == 'error') {
+          message.error({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips2_fail.png").default} alt="" ></img>,
+            className: 'errorClassName',
+            top: 200,
+            duration: 10
+          })
+        } else if(valueOne == 'success') {
+          message.success({
+            content: value,
+            icon: <img src={require("../../assets/img/tooltips1_pass.png").default} alt="" ></img>,
+            className: 'successClassName',
+            top: 200,
+            duration: 10
+          })
+        }
+      }
     
   }
   // 人脸识别
@@ -2118,6 +2133,7 @@ class Video extends Component {
     // 推送“房间与会者列表”给新加⼊者
     this.test_controller.OnRoomAttendanceList = (participants) => {
       console.log('房间与会者列表', participants)
+      setTimeout(() => {
       participants.map((item, index) => {
         if (item.uid != this.state.tellerAccount) {
           item.publish.map((itemOne, indexOne) => {
@@ -2146,6 +2162,21 @@ class Video extends Component {
                   name: '客户投屏'
                 }, 'add'
               )
+            } else if (itemOne.tag == 'projectionWhiteboard') {
+              config_param = {
+                subscribe_video_id: 'video20',
+                subscribe_audio_id: 'audio20',
+                subscribe_streamId_id: 'subscribe_streamId20',
+                feedId_id: 'feedId20',
+                feedId: itemOne.feedId
+              }
+
+              this.tabTitlesClick(
+                {
+                  value: 'staffScreen',
+                  name: 'internal staff 投屏'
+                }, 'add'
+              )
             } else {
               if (!document.getElementById('video1').name) {
                 config_param = {
@@ -2260,13 +2291,14 @@ class Video extends Component {
             if (config_param !== undefined) {
               config_param.need_volume_analyser = true
               console.log(config_param)
-              setTimeout(() => {
+              
                 this.test_controller.Subscribe(config_param)
-              }, 2000);
+              
             }
           })
         }
       })
+    }, 2000);
     };
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
@@ -2308,7 +2340,7 @@ class Video extends Component {
         }, function (code, message, data) {
           console.log(data)
         })
-      
+        setTimeout(() => {
       let array = this.state.roomCustomerList;
       let newArray = [...array];
       newArray.push({
@@ -2338,10 +2370,28 @@ class Video extends Component {
           if (config_param !== undefined) {
             config_param.need_volume_analyser = false
             console.log(config_param)
-            setTimeout(() => {
+              this.test_controller.Subscribe(config_param)
 
+          }
+        }  else if (feed.tag == 'projectionWhiteboard') {
+          config_param = {
+            subscribe_video_id: 'video20',
+            subscribe_audio_id: 'audio20',
+            subscribe_streamId_id: 'subscribe_streamId20',
+            feedId_id: 'feedId20',
+            feedId: feed.feedId
+          }
+
+          this.tabTitlesClick(
+            {
+              value: 'staffScreen',
+              name: 'internal staff 投屏'
+            }, 'add'
+          )
+          if (config_param !== undefined) {
+            config_param.need_volume_analyser = false
+            console.log(config_param)
               this.test_controller.Subscribe(config_param)
-            }, 1000)
 
           }
         } else {
@@ -2475,9 +2525,9 @@ class Video extends Component {
             config_param.need_volume_analyser = true
             console.log(config_param)
 
-            setTimeout(() => {
+            
               this.test_controller.Subscribe(config_param)
-            }, 2000);
+            
 
           }
           // })
@@ -2486,7 +2536,7 @@ class Video extends Component {
         }
 
       }
-
+    }, 2000);
     };
     // 推送“有新订阅”给与会者
     this.test_controller.OnNewSubscribe = (subscriber, feed) => {
@@ -2526,6 +2576,11 @@ class Video extends Component {
             this.tabTitlesClick('customerScreen', 'delect')
           }
         }
+        if (item.value == 'staffScreen') {
+          if (!document.getElementById("video20").name) {
+            this.tabTitlesClick('staffScreen', 'delect')
+          }
+        } 
       })
       if (!document.getElementById("video1").name) {
         this.state.isPIBIntranet[0].type = false
@@ -3394,64 +3449,71 @@ class Video extends Component {
     }
   };
   sharedScreen = () => {
-    console.log('投屏')
+    console.log('投屏', this.state.tabTitles.find(el=>el.value == 'staffScreen'))
     if (this.isFileSuccuse()) {
-      const publish_config = {};
-      if(streamShare) {
-        streamShare.getTracks().forEach(track => track.stop());
-      }
-      if (this.state.isSharedScreen) {
-        const publish_config = {}
-        publish_config.media_type = 1
-        publish_config.publish_device = 2
-        // publish_config.video_profile_type = 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.degradationType=2
-        publish_config.sid = document.getElementById('video20').name
-        this.test_controller.ChangeMediaStream(publish_config)
-        this.state.isScreenSwitching = true
-      } else {
-        if (document.getElementById('video20').name) {
-          publish_config.media_type = 1;
-          publish_config.publish_device = 2;
-          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.degradationType=2
-          publish_config.sid = document.getElementById('video20').name;
-          this.test_controller.ChangeMediaStream(publish_config);
-        } else {
+      if(!this.state.tabTitles.find(el=>el.value == 'staffScreen')) {
+        const publish_config = {};
+        if(streamShare) {
+          streamShare.getTracks().forEach(track => track.stop());
+        }
+        if (this.state.isSharedScreen) {
+          const publish_config = {}
           publish_config.media_type = 1
           publish_config.publish_device = 2
-          publish_config.need_volume_analyser = true
-          publish_config.video_profile_type=100
-          publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
+          publish_config.video_profile_type = 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.degradationType=2
-          publish_config.publish_video_id = 'video20'
-          publish_config.publish_streamId_id = 'subscribe_streamId20'
-          publish_config.publish_tag = 'projectionWhiteboard'
-          this.test_controller.Publish(publish_config)
-        }
-        // this.state.isSharedScreen = true
-        // this.state.isScreenSwitching = false
-        this.setState({
-          screenName: '切换共享',
-          isPDF: false
-        })
-        this.tabTitlesClick(
-          {
-            value: 'RMScreen',
-            name: '共享内容'
-          }, 'add'
-        )
-        if (!this.state.isPictureInPicture) {
-          this.pictureInPicture()
+          publish_config.sid = document.getElementById('video20').name
+          this.test_controller.ChangeMediaStream(publish_config)
+          this.state.isScreenSwitching = true
+        } else {
+          if (document.getElementById('video20').name) {
+            publish_config.media_type = 1;
+            publish_config.publish_device = 2;
+            publish_config.video_profile_type = 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.degradationType=2
+            publish_config.sid = document.getElementById('video20').name;
+            this.test_controller.ChangeMediaStream(publish_config);
+          } else {
+            publish_config.media_type = 1
+            publish_config.publish_device = 2
+            publish_config.need_volume_analyser = true
+            publish_config.video_profile_type = 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.degradationType=2
+            publish_config.publish_video_id = 'video20'
+            publish_config.publish_streamId_id = 'subscribe_streamId20'
+            publish_config.publish_tag = 'projectionWhiteboard'
+            this.test_controller.Publish(publish_config)
+          }
+          // this.state.isSharedScreen = true
+          // this.state.isScreenSwitching = false
+          this.setState({
+            screenName: '切换共享',
+            isPDF: false
+          })
+          this.tabTitlesClick(
+            {
+              value: 'RMScreen',
+              name: '共享内容'
+            }, 'add'
+          )
+          if (!this.state.isPictureInPicture) {
+            this.pictureInPicture()
+          }
+  
         }
-
+      } else {
+        this.messageClick('internal staff正在共享屏幕，请先关闭','error')
       }
+
     }
   };
   suspend = () => {
@@ -4022,6 +4084,7 @@ class Video extends Component {
   }
   switchExternal = () => {
     if (this.isFileSuccuse()) {
+      if(!this.state.tabTitles.find(el=>el.value == 'staffScreen')) {
     if (!this.state.isWhiteboard) {
       this.setState({
         isWhiteboard: true
@@ -4044,6 +4107,9 @@ class Video extends Component {
     }
     
     this.navigatorClick()
+  } else {
+    this.messageClick('internal staff正在共享屏幕，请先关闭','error')
+  }
   }
   }
   switchSelect = (value) => {
@@ -4347,7 +4413,7 @@ class Video extends Component {
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
             
-              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
+              <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
                     id="video20"

package/packages/pages/video/video.less

@@ -272,7 +272,7 @@
   // top: 0;
   // left: 0;
   .selectSee{
-    width: 92px;
+    max-width: 8rem;
     height: 32px;
     text-align: center;
     background: #303D46;
@@ -282,7 +282,7 @@
     font-size: 14px;
   }
   .noSelest{
-    width: 92px;
+    max-width: 8rem;
     height: 32px;
     text-align: center;
     background: #D7D8D6;