react_hsbc_teller 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "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: false,
+    isCustomer: true,
     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
@@ -447,7 +447,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'); // 获取绘图环境
@@ -455,7 +481,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;
@@ -466,20 +494,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, newVideoHeight);
+        // 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();
@@ -1694,7 +1736,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
@@ -1916,7 +1958,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

@@ -3,8 +3,9 @@
   height: 100px
 }
 .mixedvideo{
-  display: none;
+  // display: none;
   position:absolute;
+  object-fit: cover
 }
 .imgClass{
   width: 100%;