react_hsbc_teller 0.2.4 → 0.2.8

package/package.json

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

package/packages/common/websocket.js

@@ -183,7 +183,7 @@ function bind() {
 function auth(val) {
   // Base64编码
   console.log('www');
-  const token = window.btoa(`${JSON.parse(window.sessionStorage.getItem('sigData')).account}@${JSON.parse(window.sessionStorage.getItem('sigData')).hostname}\0` + '111111');
+  const token = window.btoa(`${JSON.parse(window.sessionStorage.getItem('sigData')).account}@${JSON.parse(window.sessionStorage.getItem('sigData')).hostname}\0` + `${JSON.parse(window.sessionStorage.getItem('sigData')).openfireToken}`);
   const message = {
     auth: {
       '-xmlns': 'urn:ietf:params:xml:ns:xmpp-sasl',

package/packages/pages/foot/foot.jsx

@@ -59,7 +59,7 @@ export default class foot extends Component {
             <div>
               {customerList.map((item)=>{
                   return  <div className="customer" onClick={this.customerFaceClick.bind(this,item)}>
-                      <img alt="" src={require("../../assets/img/youke.png").default} />
+                      <img className="imgClass" alt="" src={require("../../assets/img/youke.png").default} />
                       <li className="listLi" key={item.customerId}>{item.name}</li>
                       </div>
               }
@@ -71,49 +71,49 @@ export default class foot extends Component {
             <div className="foot">
                 <div className="total">
                     <div className="one" onClick={this.voice.bind(this)}>
-                        <img src={img} alt="" />
+                        <img className="imgClass" src={img} alt="" />
                         <div className="text">
                             静音
                         </div>
                     </div>
                     <div className="one" onClick={this.cameraClick.bind(this)}>
-                        <img src={cameraImg} alt="" />
+                        <img className="imgClass" src={cameraImg} alt="" />
                         <div className="text">
                             摄像头
                         </div>
                     </div>
                 </div>
                 <div className="total totalTwo">
-                <div className="one" onClick={this.switchExternal.bind(this)}>
+                {/* <div className="one" onClick={this.switchExternal.bind(this)}>
                         <img src={require("../../assets/img/huazhonghua.png").default} alt="" />
                         <div className="text">
                             切换到RM白板
                         </div>
-                    </div>
+                    </div> */}
                 {
                         isTranscribing &&
                         <div className="one" onClick={this.transcribingClick.bind(this)}>
-                        <img src={require("../../assets/img/icon_copy.png").default} alt="" />
+                        <img className="imgClass"src={require("../../assets/img/icon_copy.png").default} alt="" />
                         <div className="text">
                             签字
                         </div>
                     </div>
                     }
                     <div className="one" onClick={this.sharedScreen.bind(this)}>
-                        <img src={require("../../assets/img/Projection_screen.png").default} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/Projection_screen.png").default} alt="" />
                         <div className="text">
                             {screenName}
                         </div>
                     </div>
                     <div className="one" onClick={this.suspend.bind(this)}>
-                        <img src={require("../../assets/img/icon_suspend.png").default} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/icon_suspend.png").default} alt="" />
                         <div className="text">
                             {suspendName}
                         </div>
                     </div>
                     <Popover content={content} trigger="click" visible={this.state.clicked}>
                     <div className="one" onClick={this.facialRecognition.bind(this)}>
-                        <img src={require("../../assets/img/Face_recognition.png").default} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/Face_recognition.png").default} alt="" />
                         <div className="text">
                             人脸识别
                         </div>
@@ -121,14 +121,14 @@ export default class foot extends Component {
                     </Popover>
                     
                     <div className="one" onClick={this.invitationClick.bind(this)}>
-                        <img src={require("../../assets/img/icon_invitation.png").default} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/icon_invitation.png").default} alt="" />
                         <div className="text">
                             邀请
                         </div>
                     </div>
                     <Popover content={content} trigger="click" visible={this.state.clickedOcr}>
                     <div className="one"  onClick={this.ocrClick.bind(this)}>
-                        <img src={require("../../assets/img/icon_ocr.png").default} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/icon_ocr.png").default} alt="" />
                         <div className="text">
                             OCR识别
                         </div>
@@ -136,7 +136,7 @@ export default class foot extends Component {
                     </Popover>
                     
                     <div className="one" onClick={this.pictureInPicture.bind(this)}>
-                        <img src={require("../../assets/img/huazhonghua.png").default} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/huazhonghua.png").default} alt="" />
                         <div className="text">
                             画中画
                         </div>

package/packages/pages/foot/foot.less

@@ -48,7 +48,7 @@ border: 1px #DB0011 solid;
     font-size: 16px;
 color: #FFFFFF;
 }
-img{
+.imgClass{
     width: 30px;
     height: 30px;
 }

package/packages/pages/header/header.less

@@ -45,8 +45,8 @@
       }
     }
   }
-  img {
-    pointer-events: none;
-    width: 17px;
-    margin-top: 2px;
-  }
+  // img {
+  //   pointer-events: none;
+  //   width: 17px;
+  //   margin-top: 2px;
+  // }

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,16 @@ 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: ''
+      })
     } catch (err) {
       console.error(err);
+      this.props.createRoomCallback({
+        type: 2,
+        errorManage: '保存房间信息失败'
+      })
     }
   };
   /**
@@ -115,6 +123,7 @@ class Video extends Component {
       }
     } catch (err) {
       console.error(err);
+      this.roomCallBack(2,'签名失败')
     }
   };
   handleEdit = () => {
@@ -438,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'); // 获取绘图环境
@@ -446,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;
@@ -457,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, 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 +545,19 @@ class Video extends Component {
       });
     }
   };
+  roomCallBack=(type,manege) =>{
+    if (this.state.sessionId) {
+      this.props.joinRoomCallback({
+        type: type,
+        errorManage: manege
+      })
+    }else {
+      this.props.createRoomCallback({
+        type: type,
+        errorManage: manege
+      })
+    }
+  }
   mountClick = () => {
     window.IMEvt = msg => {
       console.log(JSON.parse(msg));
@@ -523,6 +587,28 @@ class Video extends Component {
         if (Mival.sessionId == this.state.sessionId) {
           this.props.signatureCallback()
         }
+      } else if (Mival.typeId == 1218) {
+        if (Mival.sessionId == this.state.sessionId) {
+          // 1-开启，2-关闭
+          if(Mival.type == 1) {
+            this.switchExternal()
+          } else if(Mival.type == 2) {
+            if(this.state.isSharedScreen) {
+              this.setState({
+                isWhiteboard: false,
+              })
+            }else {
+              this.test_controller.UnPublish(document.getElementById('video10').name)
+              this.setState({
+                isPDF: false,
+                isSelect: 'video',
+                isWhiteboard: false,
+              })
+            }
+          }
+          
+        }
+        
       }
     };
 
@@ -597,6 +683,7 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
+      this.roomCallBack(2,'连接失败')
     };
     // 断开连接回调
     this.test_controller.OnConnectClose = (code, msg) => {
@@ -610,6 +697,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 = () => {
@@ -635,6 +723,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) => {
@@ -651,10 +740,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) => {
@@ -1097,37 +1188,23 @@ class Video extends Component {
     this.setState({
       loading: true,
     })
-    console.log(this.props.resourcePath + "/log4b.js")
     const _dependScripts = [
       // https://counter-web.leimondata.cn:7199
-      this.props.resourcePath + "/log4b.js",
-      this.props.resourcePath + "/meeting_api_util.js",
+      this.props.resourcePath + "/adapter.js",
+      this.props.resourcePath + "/getMediaInfo.js",
+      this.props.resourcePath + "/pdf.js",
+      this.props.resourcePath + "/EBML.js",
       this.props.resourcePath + "/mcu.js",
-      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/meeting_desk_stream.js",
+      this.props.resourcePath + "/meeting_html_stream.js",
+      this.props.resourcePath + "/meeting_file_stream.js",
+      this.props.resourcePath + "/meeting_im.js",
       this.props.resourcePath + "/meeting_vod.js",
-      this.props.resourcePath + "/remote_record.js",
       this.props.resourcePath + "/meeting_invite.js",
-      this.props.resourcePath + "/meeting_im.js",
+      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/remote_record.js",
       this.props.resourcePath + "/meeting_camera_stream.js",
-      this.props.resourcePath + "/meeting_file_stream.js",
-      this.props.resourcePath + "/meeting_desk_stream.js",
-      this.props.resourcePath + "/meeting_html_stream.js",
-      this.props.resourcePath + "/meeting_beautify_stream.js",
-      this.props.resourcePath + "/stream.js",
-      this.props.resourcePath + "/room.js",
-      this.props.resourcePath + "/backgroundBlur.js",
       this.props.resourcePath + "/meeting_api.js",
-      this.props.resourcePath + "/html2image.js",
-      this.props.resourcePath + "/reconnecting-websocket.min.js",
-      this.props.resourcePath + "/mtc_api.js",
-      this.props.resourcePath + "/BandwidthHandler.js",
-      this.props.resourcePath + "/RecordRTC.min.js",
-      // "https://gw.alipayobjects.com/os/lib/recordrtc/5.5.9/RecordRTC.min.js",
-      this.props.resourcePath + "/pdf.js",
-      this.props.resourcePath + "/EBML.js",
-      this.props.resourcePath + "/adapter.js",
-      this.props.resourcePath + "/beauty.js",
-      this.props.resourcePath + "/getMediaInfo.js",
     ]
     const that = this
     let i = 0
@@ -1659,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
@@ -1697,7 +1774,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView1" width="70" height="70"></canvas>
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView1" width="20" height="50"></canvas>
                 </div>
               </div>
               <div
@@ -1736,7 +1813,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="70" height="70"></canvas>
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="20" height="50"></canvas>
                 </div>
 
               </div>
@@ -1751,7 +1828,7 @@ class Video extends Component {
                   />
                   <audio id="audio2" autoPlay />
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
-                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView2" width="70" height="70"></canvas>
+                  <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView2" width="20" height="50"></canvas>
                 </div>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
@@ -1764,7 +1841,7 @@ class Video extends Component {
                 />
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView3" width="70" height="70"></canvas>
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView3" width="20" height="50"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
@@ -1776,7 +1853,7 @@ class Video extends Component {
                 />
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView4" width="70" height="70"></canvas>
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView4" width="20" height="50"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
@@ -1788,7 +1865,7 @@ class Video extends Component {
                 />
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView5" width="70" height="70"></canvas>
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView5" width="20" height="50"></canvas>
               </div>
               <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
                 {/* <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
@@ -1803,7 +1880,7 @@ class Video extends Component {
                 />
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
-                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="70" height="70"></canvas>
+                <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="20" height="50"></canvas>
                 {/* </div> */}
 
               </div>
@@ -1881,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%;
@@ -70,6 +71,7 @@
 .video{
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 .video1Div{
   width: 100%;
@@ -90,6 +92,7 @@
 .publishVideoClass{
   height: 100%;
   width: 100%;
+  object-fit: cover;
 }
 .publishVideoDiv{
   height: 100%;