react_hsbc_teller 0.2.5 → 0.2.9

package/package.json

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

package/packages/pages/video/video.jsx

@@ -52,7 +52,7 @@ class Video extends Component {
     voiceStatue: false,
     voiceImg: voiceImgOpen,
     isBigVideo: 'video1',
-    isCustomer: true,
+    isCustomer: false,
     publishDevic: 1,
     isSharedScreen: false,
     isSuspend: false,
@@ -77,8 +77,8 @@ class Video extends Component {
   createRoom = async () => {
     try {
       let result = await API.createRoom({
-        tellerAccount: this.props.tellerAccount,
-        businessNumber: this.props.businessNumber,
+        staffId: this.props.tellerAccount,
+        activityId: this.props.businessNumber,
         callbackUrl: this.props.callbackUrl,
         roomId: this.state.channelId,
         mtoken: this.state.rtoken
@@ -90,8 +90,23 @@ class Video extends Component {
       });
       // eslint-disable-next-line no-undef
       joinRoom((this.props.tellerAccount + '@' + JSON.parse(window.sessionStorage.getItem('sigData')).hostname), this.state.imRoomId)
+      this.props.createRoomCallback({
+        type: 1,
+        errorManage: '',
+        data: {
+          mtoken: this.state.rtoken,
+          imRoomId: result.imRoomId,
+          sessionId: result.sessionId,
+          roomId: this.state.channelId
+        }
+      })
     } catch (err) {
       console.error(err);
+      this.props.createRoomCallback({
+        type: 2,
+        errorManage: '保存房间信息失败',
+        data: {}
+      })
     }
   };
   /**
@@ -115,6 +130,7 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
+      this.roomCallBack(2,'签名失败')
     }
   };
   handleEdit = () => {
@@ -438,7 +454,33 @@ class Video extends Component {
     //   })
     // });
     if (this.isFileSuccuse()) {
-      const width = 640;
+      const list = []
+      if(document.getElementById('video1').name) {
+        list.push('video1')
+      }
+      if(document.getElementById('publish_video1').name) {
+        list.push('publish_video1')
+      }
+      if(document.getElementById('video2').name) {
+        list.push('video2')
+      }
+      if(document.getElementById('video3').name) {
+        list.push('video3')
+      }
+      if(document.getElementById('video4').name) {
+        list.push('video4')
+      }
+      if(document.getElementById('video5').name) {
+        list.push('video5')
+      }
+      if(document.getElementById('video6').name) {
+        list.push('video6')
+      }
+      if(document.getElementById('video10').name) {
+        list.push('video10')
+      }
+      console.log(list)
+      const width = 320 * list.length;
       const height = 480;
       const canvas = document.createElement('canvas');
       const cobj = canvas.getContext('2d'); // 获取绘图环境
@@ -446,7 +488,9 @@ class Video extends Component {
       canvas.height = height;
       let interval = setInterval(() => {
         cobj.clearRect(0, 0, width, height);
-        let videoId = 'publish_video1';
+        for(let i=0;i<list.length;i++){
+          
+        let videoId = list[i];
         let videoDiv = document.getElementById(videoId);
         let videoWidth = videoDiv.videoWidth;
         let videoHeight = videoDiv.videoHeight;
@@ -457,20 +501,34 @@ class Video extends Component {
         } else {
           newVideoHeight = videoHeight * 320 / videoWidth;
         }
-        cobj.drawImage(videoDiv, 0, 480 - newVideoHeight, newVideoWidth, newVideoHeight);
-
-        let subscribeVideo = 'video1';
-        let subscribeVideoDiv = document.getElementById(subscribeVideo);
-        let subscribeVideoDivWidth = subscribeVideoDiv.videoWidth;
-        let subscribeVideoDivHeight = subscribeVideoDiv.videoHeight;
-        let newVideoWidth1 = 320;
-        let newVideoHeight1 = 480;
-        if (subscribeVideoDivHeight * 320 / subscribeVideoDivWidth > 480) {
-          newVideoWidth1 = subscribeVideoDivWidth * 480 / subscribeVideoDivHeight;
-        } else {
-          newVideoHeight1 = subscribeVideoDivHeight * 320 / subscribeVideoDivWidth;
+        cobj.drawImage(videoDiv, 320 * i, 480 - newVideoHeight, 320, newVideoHeight);
         }
-        cobj.drawImage(subscribeVideoDiv, 320, 480 - newVideoHeight1, newVideoWidth1, 80);
+        // cobj.clearRect(0, 0, width, height);
+        // let videoId = 'publish_video1';
+        // let videoDiv = document.getElementById(videoId);
+        // let videoWidth = videoDiv.videoWidth;
+        // let videoHeight = videoDiv.videoHeight;
+        // let newVideoWidth = 320;
+        // let newVideoHeight = 480;
+        // if (videoHeight * 320 / videoWidth > 480) {
+        //   newVideoWidth = videoWidth * 480 / videoHeight;
+        // } else {
+        //   newVideoHeight = videoHeight * 320 / videoWidth;
+        // }
+        // cobj.drawImage(videoDiv, 0, 480 - newVideoHeight, newVideoWidth, newVideoHeight);
+
+        // let subscribeVideo = 'video1';
+        // let subscribeVideoDiv = document.getElementById(subscribeVideo);
+        // let subscribeVideoDivWidth = subscribeVideoDiv.videoWidth;
+        // let subscribeVideoDivHeight = subscribeVideoDiv.videoHeight;
+        // let newVideoWidth1 = 320;
+        // let newVideoHeight1 = 480;
+        // if (subscribeVideoDivHeight * 320 / subscribeVideoDivWidth > 480) {
+        //   newVideoWidth1 = subscribeVideoDivWidth * 480 / subscribeVideoDivHeight;
+        // } else {
+        //   newVideoHeight1 = subscribeVideoDivHeight * 320 / subscribeVideoDivWidth;
+        // }
+        // cobj.drawImage(subscribeVideoDiv, 320, 480 - newVideoHeight1, newVideoWidth1, newVideoHeight1);
 
       }, 100);
       const captureStream = canvas.captureStream();
@@ -494,6 +552,21 @@ class Video extends Component {
       });
     }
   };
+  roomCallBack=(type,manege) =>{
+    if (this.state.sessionId) {
+      this.props.joinRoomCallback({
+        type: type,
+        errorManage: manege,
+        data: {}
+      })
+    }else {
+      this.props.createRoomCallback({
+        type: type,
+        errorManage: manege,
+        data: {}
+      })
+    }
+  }
   mountClick = () => {
     window.IMEvt = msg => {
       console.log(JSON.parse(msg));
@@ -619,6 +692,7 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
+      this.roomCallBack(2,'连接失败')
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -632,6 +706,7 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
+      this.roomCallBack(2,'初始化失败')
     };
     // 初始化成功回调
     this.test_controller.OnInitRoomConfigOK = () => {
@@ -657,6 +732,7 @@ class Video extends Component {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
+      this.roomCallBack(2,'创建失败')
     };
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
@@ -673,10 +749,12 @@ class Video extends Component {
     // 加入房间成功
     this.test_controller.OnJoinRoomSucc = () => {
       console.log('加入房间成功')
+      this.roomCallBack(1,'')
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
+      this.roomCallBack(2,'加入失败')
     };
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
@@ -1667,7 +1745,7 @@ class Video extends Component {
                 <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
                   {pdfChildren}
                 </div>
-                <div style={this.state.isPDF ? { display: 'none' } : {}}>
+                <div className="videoDiv"  style={this.state.isPDF ? { display: 'none' } : {}}>
                   <video
                     id="video10"
                     autoPlay
@@ -1889,7 +1967,7 @@ class Video extends Component {
               ></CanvasDraw>
             </div>
           </Modal>
-          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"
+          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="400" height="400"
             webkit-playsinline="true" playsInline={true} x5-playsinline="x5-playsinline"
             x-webkit-airplay="true"></video>
         </Spin>

package/packages/pages/video/video.less

@@ -5,6 +5,7 @@
 .mixedvideo{
   display: none;
   position:absolute;
+  object-fit: cover
 }
 .imgClass{
   width: 100%;