react_hsbc_teller 1.1.4 → 1.1.7

package/package.json

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

package/packages/common/websocket.js

@@ -47,7 +47,9 @@ function websocketonopen() { // 连接建立之后执行send方法发送数据
   websocketsend(json2xml(steam));
 }
 function websocketonerror() { // 连接建立失败重连
-  window.IMOpenfire('false');
+  window.IMOpenfire({
+    status: 'error'
+  });
   console.log('失败');
   // initWebSocket()
 }
@@ -99,11 +101,15 @@ function websocketonmessage(e) {
   } else if (undefined != jsondata.failure) {
     islogin = false;
     console.log('登录失败，用户名或者密码错误');
-    window.IMOpenfire('false');
+    window.IMOpenfire({
+      status: 'error'
+    });
   } else if (undefined != jsondata.success) {
     islogin = true;
     console.log('登录成功！');
-    window.IMOpenfire('true');
+    window.IMOpenfire({
+      status: 'success'
+    });
     // 发起新的流
     newopen();
   } else if (undefined != jsondata.iq) {
@@ -203,7 +209,10 @@ function websocketsend(Data) { // 数据发送
 }
 function websocketclose(e) { // 关闭
   console.log('断开连接', e);
-  // window.IMOpenfire('false')
+  islogin = false;
+  window.IMOpenfire({
+    status: 'close'
+  })
 }
 // 发消息
 // // 发送消息  to---接收者id，from---发送者id，type---消息类型（chat--单聊，groupchat--群聊）。message--发送的消息

package/packages/demo/demo.js

@@ -14,7 +14,7 @@ class Demo extends Component {
     sessionId: '',
     isVideo: false,
     tellerAccount: '00000000',
-    callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+    callbackUrl: 'http://182.92.184.31:8720/hsbc/callback',
     businessNumber: '',
     lang: 'zh',
     roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',

package/packages/pages/video/video.jsx

@@ -127,6 +127,7 @@ class Video extends Component {
     imJoinRoom: false,
     analyserData: new Map(),
     analyserHeight: new Map(),
+    OnVolumeAnalyserMap: new Map(),
     noVideoOne: false,
     noVideoTwo: false,
     noVideoThree: false,
@@ -139,6 +140,7 @@ class Video extends Component {
     noVideoTen: false,
     noVideoEleven: false,
     noVideoTwelve: false,
+    manualClose: false,
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -163,7 +165,9 @@ class Video extends Component {
       publish_config.media_type = 1
       publish_config.publish_device = 1
       publish_config.need_volume_analyser = true
-      publish_config.video_profile_type = 3
+      // publish_config.video_profile_type = 3
+      publish_config.video_profile_type=100
+      publish_config.video_profile_diy={width:640, height:360, frameRate:15, bitrate:400}
       publish_config.publish_video_id = 'publish_video1'
       publish_config.publish_streamId_id = 'publish_streamId1'
       publish_config.publish_tag = 'tag1'
@@ -255,6 +259,7 @@ class Video extends Component {
   };
   // 初始化视频
   ConnectMRTC = () => {
+    this.test_controller.SetLocalCodecType("H264")
     const config_param = {};
     config_param.auto_publish_subscribe = 4;
     config_param.media_type = 1;
@@ -725,6 +730,7 @@ class Video extends Component {
   workerClick=()=>{
     const canvas = document.createElement('canvas');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
+    let microTimerMap = new Map()
     let blob = new Blob([
       `
       let timer;
@@ -840,7 +846,9 @@ class Video extends Component {
         let analyser = this.state.analyserData.get(sid)
         aou(analyser)
         function aou(analyser){
+          cancelAnimationFrame(microTimerMap.get(sid))
           if(analyser) {
+        
             let dataArray = new Uint8Array(analyser.frequencyBinCount);
             analyser.getByteFrequencyData(dataArray);
             let step = Math.round(dataArray.length / 60); //采样步长
@@ -864,11 +872,12 @@ class Video extends Component {
               let startY =  y1 - height  // 绘制起始点y
               cobj.fillRect(startX, startY, width, height )
             }
-            requestAnimationFrame(aou.bind(this, analyser));
+          }
+            microTimerMap.set(sid,requestAnimationFrame(aou.bind(this, analyser)) ) 
           }
 
 
-        }
+        
         }
         
       }
@@ -1153,6 +1162,9 @@ class Video extends Component {
           if (Mival.type == 1) {
             this.switchExternal()
           } else if (Mival.type == 2) {
+            if(streamShare) {
+              streamShare.getTracks().forEach(track => track.stop());
+            }
             this.tabTitlesClick('RMWhiteboard', 'delect')
             if (this.state.isSharedScreen) {
               this.setState({
@@ -1346,10 +1358,10 @@ class Video extends Component {
     };
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
-      if(!msg) {
+      if(msg.status == 'error') {
         this.state.sessionType = false
         this.roomCallBack(2, 'im建立连接失败',5)
-      } else {
+      } else if (msg.status == 'success') {
         this.state.imStatus = msg
         setTimeout(() => {
           if(this.state.imRoomId && !this.state.imJoinRoom) {
@@ -1358,6 +1370,15 @@ class Video extends Component {
             console.log('IMOpenfire 加入im房间')
           }
         }, 200);
+      } else if (msg.status == 'close') {
+        if(!this.state.manualClose) {
+          this.timer && clearInterval(this.timer);
+          this.state.sessionType = false
+          console.log('IMOpenfireclose')
+          this.roomCallBack(2, '账号重复登录',9)
+          
+        }
+        
       }
 
     }
@@ -1533,8 +1554,8 @@ class Video extends Component {
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
       console.log(code, sid)
-      if(code == 5004 || code == 5007) {
-        this.roomCallBack(2, '媒体链路连接异常/超时',8)
+      if(code == 5003 || code == 5004 || code == 5005|| code == 5007|| code == 5009|| code == 5010 || code == 5011|| code == 5012) {
+        this.roomCallBack(2, '音视频异常关闭',8)
       }
     };
     // 加入房间成功
@@ -1544,7 +1565,9 @@ class Video extends Component {
       publish_config.media_type = 1
       publish_config.publish_device = 1
       publish_config.need_volume_analyser = true
-      publish_config.video_profile_type = 3
+      // publish_config.video_profile_type = 3
+      publish_config.video_profile_type=100
+      publish_config.video_profile_diy={width:640, height:360, frameRate:15, bitrate:400}
       publish_config.publish_video_id = 'publish_video1'
       publish_config.publish_streamId_id = 'publish_streamId1'
       publish_config.publish_tag = 'tag1'
@@ -1586,6 +1609,10 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         });
+        if(this.state.screenName == '取消共享') {
+          this.state.isSharedScreen = true
+        this.state.isScreenSwitching = false
+        }
       } 
       if(sid == document.getElementById('publish_video1').name) {
         this.setState({
@@ -1787,26 +1814,11 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
-      // this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
           this.state.isCustomer= true
     };
     // 推送“有新发布”给与会者
     this.test_controller.OnNewPublish = (feed) => {
       console.log('有新发布者', feed);
-      // callNimIM('sendChatMsg', {
-      //   customId: feed.uid,
-      //   content: JSON.stringify({
-      //     'typeId': 1014,
-      //     'sessionId': this.state.sessionId,
-      //     'meetingInfo': {
-      //       'title': this.props.meetingInfo.title,
-      //       'host': this.props.meetingInfo.host,
-      //       'customers': this.props.meetingInfo.customers
-      //     }
-
-      //   })
-      // }, function (code, message, data) {
-      // })
       
       callNimIM('sendCustomCmdMsg', {
         customId: this.state.imRoomId,
@@ -2149,14 +2161,9 @@ class Video extends Component {
     this.test_controller.OnUnSubscribe = (unsubscriber, feed) => {
       console.log('取消订阅者', unsubscriber, feed)
     };
-    // ⾳视频关闭通知
-    this.test_controller.OnMediaClose = (code, sid) => {
-      console.log('⾳视频关闭通知', code, sid)
-    };
     // 退出房间回调
     this.test_controller.OnLeaveRoom = (leaveType) => {
       console.log('退出房间回调', leaveType);
-      
     };
     // 推送“退出房间者”给与会者
     this.test_controller.OnParticipantLeaveRoom = (
@@ -2327,7 +2334,12 @@ class Video extends Component {
             loading: false
         })
       }
-      
+      if (sid == document.getElementById('video20').name) {
+        if(this.state.screenName == '取消共享') {
+          this.state.isSharedScreen = true
+        this.state.isScreenSwitching = false
+        }
+      }
     };
     // 切流失败通知
     this.test_controller.OnChangeMediaStreamFailed = (
@@ -2351,6 +2363,7 @@ class Video extends Component {
       console.log('服务端录制初始化成功', record_id, record_third_id)
     };
     this.test_controller.OnVolumeAnalyser = (sid, analyser) => {
+      cancelAnimationFrame(this.state.OnVolumeAnalyserMap.get(sid))
       let publish_sid = document.getElementById('publish_video1').name || document.getElementById('publish_streamId1').name;
       let subscribe_sid1 = document.getElementById('video1').name || document.getElementById('audio1').name;
       let subscribe_sid2 = document.getElementById('video2').name || document.getElementById('audio2').name;
@@ -2446,7 +2459,8 @@ class Video extends Component {
         }
 
       }
-      requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
+      this.state.OnVolumeAnalyserMap.set(sid,requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser)))
+      this.state.OnVolumeAnalyserMap = this.state.OnVolumeAnalyserMap
       
       this.state.analyserData.set(sid, analyser)
         this.state.analyserData = this.state.analyserData
@@ -2519,16 +2533,11 @@ class Video extends Component {
     }
     if(this.state.imStatus) {
       console.log('disconnect断开连接')
+      this.state.manualClose = true
       disconnect();
     }
     
   }
-  clearData=()=>{
-    this.setState = (state, callback) => {
-      return
-    }
-    this.cancel = ''
-  }
   finishSessionClick= async () => {
     try {
       let result = await API.finishSession({
@@ -2709,6 +2718,7 @@ class Video extends Component {
   }
 
   voice = () => {
+    if (this.isFileSuccuse()) {
     if (!this.state.voiceStatue) {
       // 静音本地
       this.setState({
@@ -2763,10 +2773,11 @@ class Video extends Component {
         console.log(data)
       })
     }
+  }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId || this.state.isSuspend) {
-      this.messageClick(this.props.prohibitPrompt,'error')
+    if (!this.state.sessionId || this.state.isSuspend || !this.state.sessionType) {
+      this.messageClick('当前程序异常请先退出重开','error')
       return false
     } else {
       return true
@@ -2829,7 +2840,9 @@ class Video extends Component {
         const publish_config = {}
         publish_config.media_type = 1
         publish_config.publish_device = 2
-        publish_config.video_profile_type = 1
+        // 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
@@ -2873,7 +2886,8 @@ class Video extends Component {
         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;
@@ -2882,7 +2896,8 @@ class Video extends Component {
           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'
@@ -2890,8 +2905,8 @@ class Video extends Component {
           publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
-        this.state.isSharedScreen = true
-        this.state.isScreenSwitching = false
+        // this.state.isSharedScreen = true
+        // this.state.isScreenSwitching = false
         this.setState({
           screenName: '取消共享',
           isPDF: false
@@ -3034,6 +3049,7 @@ class Video extends Component {
   transcribingClick = () => {
   };
   invitationClick = () => {
+    if (this.isFileSuccuse()) {
     this.state.linkData = ''
     this.setState({
       isModalVisibleInvitation: true,
@@ -3042,7 +3058,7 @@ class Video extends Component {
       employeeError: '',
       
     })
-
+  }
   }
   handleOkInvitation = async () => {
     if(!this.state.employeeName || this.state.employeeError) {
@@ -3280,7 +3296,6 @@ class Video extends Component {
     )
   }
   switchExternalAge = ()=>{
-    const that = this
     if(this.state.isSharedScreen) {
       this.state.isSharedScreen = false
       this.setState({
@@ -3293,26 +3308,30 @@ class Video extends Component {
       }
     }
 
+    this.navigatorClick()
+
+  }
+  navigatorClick=()=>{
+    const that = this
     const publish_config = {};
     const canvas = document.createElement('canvas');
     const videoMedia = document.getElementById('manedvideo');
     const cobj = canvas.getContext('2d'); // 获取绘图环境
     const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
-    const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
     const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
-    const bottom = document.getElementById("whiteboardDIV").getBoundingClientRect().bottom
-    const width = right - left + 10
-    const height = bottom - top - 33
+    const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
+    const width =  left > 21 ? right : right + left
+    const height = document.getElementById("whiteboardDIV").getBoundingClientRect().height
     canvas.width = width;
     canvas.height = height;
-  videoMedia.addEventListener('play', (event) =>{
+    videoMedia.addEventListener('play', (event) =>{
       var $this = this; //cache
       console.log('addEventListener',!$this.paused,!$this.ended)
       loop()
       function loop() {
           if (!$this.paused && !$this.ended) {
-            cobj.drawImage(videoMedia, left-10, top, width, height, 0, 0,width, height,);
-            setTimeout(loop, 1000 / 10); // drawing at 30fps
+            cobj.drawImage(videoMedia, 0, top, width, height, 0, 0,width, height);
+              setTimeout(loop, 1000 / 10); // drawing at 30fps
           }
       }
       
@@ -3323,14 +3342,16 @@ class Video extends Component {
         publish_config.degradationType=2
         publish_config.sid = document.getElementById('video20').name
         publish_config.stream = canvas.captureStream(10)
-        publish_config.video_profile_type = 9
+        publish_config.video_profile_type=100
+        publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
         this.test_controller.ChangeMediaStream(publish_config);
       } else {
 
         publish_config.media_type = 1
         publish_config.publish_device = 5
         publish_config.need_volume_analyser = true
-        publish_config.video_profile_type = 9
+        publish_config.video_profile_type=100
+        publish_config.video_profile_diy={width:1280, height:720, frameRate:8, bitrate:1500}
         publish_config.degradationType=2
         publish_config.stream = canvas.captureStream(10)
         publish_config.publish_video_id = 'video20'
@@ -3345,10 +3366,14 @@ class Video extends Component {
   })
   .then((stream) => {
     videoMedia.srcObject = stream;
+    stream.getVideoTracks()[0].applyConstraints({
+      width: document.body.offsetWidth,
+      height: document.body.offsetHeight
+    })
     streamShare = stream
     stream.getVideoTracks()[0].onended = async ()=>{
       //单击停止共享按钮后，触发这个事件
-      if(document.getElementById('video20').name && !this.state.isSharedScreen) {
+      if(document.getElementById('video20').name&&!this.state.isSharedScreen) {
         that.test_controller.UnPublish(document.getElementById('video20').name)
       }
       }
@@ -3357,9 +3382,8 @@ class Video extends Component {
   });
   }
   switchExternal = () => {
-    const that = this
+    if (this.isFileSuccuse()) {
     if (!this.state.isWhiteboard) {
-      const publish_config = {};
       this.setState({
         isWhiteboard: true
       })
@@ -3378,73 +3402,13 @@ class Video extends Component {
           document.exitPictureInPicture()
         }
       }
-      const canvas = document.createElement('canvas');
-      const videoMedia = document.getElementById('manedvideo');
-      const cobj = canvas.getContext('2d'); // 获取绘图环境
-      const left = document.getElementById("whiteboardDIV").getBoundingClientRect().left;
-      const right = document.getElementById("whiteboardDIV").getBoundingClientRect().right
-      const top = document.getElementById("whiteboardDIV").getBoundingClientRect().top
-      const bottom = document.getElementById("whiteboardDIV").getBoundingClientRect().bottom
-      const width = right - left + 10
-      const height = bottom - top - 33
-      canvas.width = width;
-      canvas.height = height;
-      videoMedia.addEventListener('play', (event) =>{
-        var $this = this; //cache
-        console.log('addEventListener',!$this.paused,!$this.ended)
-        loop()
-        function loop() {
-            if (!$this.paused && !$this.ended) {
-              cobj.drawImage(videoMedia, left-10, top, width, height, 0, 0,width, height,);
-                setTimeout(loop, 1000 / 10); // drawing at 30fps
-            }
-        }
-        
-        if (document.getElementById('video20').name) {
-          // 代表已经有了进行切流
-          publish_config.publish_device = 5
-          publish_config.media_type = 1
-          publish_config.degradationType=2
-          publish_config.sid = document.getElementById('video20').name
-          publish_config.stream = canvas.captureStream(10)
-          publish_config.video_profile_type = 9
-          this.test_controller.ChangeMediaStream(publish_config);
-        } else {
-  
-          publish_config.media_type = 1
-          publish_config.publish_device = 5
-          publish_config.need_volume_analyser = true
-          publish_config.video_profile_type = 9
-          publish_config.degradationType=2
-          publish_config.stream = canvas.captureStream(10)
-          publish_config.publish_video_id = 'video20'
-          publish_config.publish_streamId_id = 'subscribe_streamId10'
-          publish_config.publish_tag = 'projectionWhiteboard'
-          this.test_controller.Publish(publish_config)
-        }
-    }, 0);
-      navigator.mediaDevices.getDisplayMedia({
-        video: true,
-        preferCurrentTab:true,
-    })
-    .then((stream) => {
-      videoMedia.srcObject = stream;
-      streamShare = stream
-      stream.getVideoTracks()[0].onended = async ()=>{
-        //单击停止共享按钮后，触发这个事件
-        if(document.getElementById('video20').name&&!this.state.isSharedScreen) {
-          that.test_controller.UnPublish(document.getElementById('video20').name)
-        }
-        }
-    }, error => {
-        console.log("Unable to acquire screen capture", error);
-    });
+      this.navigatorClick()
     } else {
       this.messageClick('当前已经切换RM白板','success')
 
     }
 
-
+  }
   }
   switchSelect = (value) => {
     this.setState({
@@ -3466,7 +3430,9 @@ class Video extends Component {
     }
   }
   inspection = () => {
+    if (this.isFileSuccuse()) {
     this.test_controller.GetDevices()
+    }
   }
   handleOkInspection = () => {
     this.setState({
@@ -3626,7 +3592,7 @@ class Video extends Component {
             <div className="projection"  style={{background: this.state.tabTitles.length > 0 ? '#f0f0f0' : '#ffffff'}}>
             {tabTitleList}
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
-            <div id="whiteboardDIV" style={{height: this.state.tabTitles.length > 0 ? 'calc(100% - 33px)' : '100%'}}>
+            <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
             
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen') ? '' : 'none', }}>
                 <div className="videoDiv">

package/packages/pages/video/video.less

@@ -79,7 +79,7 @@
   height: 100%;
 }
 .health{
-  padding: 20px;
+  padding: 20Px;
   background: #f0f0f0;
 }
 .healthVideo{