react_hsbc_teller 0.3.3 → 0.3.7

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -3,10 +3,6 @@ import './foot.less'
 import Popover from "antd/lib/popover";
 import 'antd/lib/popover/style'
 export default class foot extends Component {
-    state = {
-        clicked: false,
-        clickedOcr: false
-    }
     voice = () => {
         this.props.voice()
     }
@@ -26,15 +22,9 @@ export default class foot extends Component {
         this.props.endSession()
     }
     facialRecognition=()=>{
-        this.setState({
-            clicked: true
-        })
         this.props.facialRecognition()
     }
     ocrClick=()=>{
-        this.setState({
-            clickedOcr: true
-        })
         this.props.ocrClick()
     }
     pictureInPicture=()=>{
@@ -44,17 +34,21 @@ export default class foot extends Component {
         this.props.invitationClick()
     }
     customerFaceClick=(item)=>{
-        this.setState({
-            clicked: false,
-            clickedOcr: false
-        })
         this.props.customerFaceClick(item)
     }
     switchExternal=()=>{
         this.props.switchExternal()
     }
+    facialHandleVisibleChange = visible => {
+        console.log(visible)
+        this.props.facialHandleVisibleChange(visible)
+      };
+      ocrHandleVisibleChange = visible => {
+        console.log(visible)
+        this.props.ocrHandleVisibleChange(visible)
+      };
     render() {
-        const {isTranscribing,img,cameraImg,screenName,suspendName,customerList} = this.props
+        const {clickedOcr,clickedFacial,isTranscribing,img,cameraImg,screenName,suspendName,customerList} = this.props
         const content = (
             <div>
               {customerList.map((item)=>{
@@ -111,7 +105,7 @@ export default class foot extends Component {
                             {suspendName}
                         </div>
                     </div> */}
-                    <Popover content={content} trigger="click" visible={this.state.clicked}>
+                    <Popover content={content} trigger="click" visible={clickedFacial} onVisibleChange={this.facialHandleVisibleChange}>
                     <div className="one" onClick={this.facialRecognition.bind(this)}>
                         <img className="imgClass" src={require("../../assets/img/Face_recognition.png").default} alt="" />
                         <div className="text">
@@ -126,7 +120,7 @@ export default class foot extends Component {
                             邀请
                         </div>
                     </div>
-                    <Popover content={content} trigger="click" visible={this.state.clickedOcr}>
+                    <Popover content={content} trigger="click" visible={clickedOcr} onVisibleChange={this.ocrHandleVisibleChange}>
                     <div className="one"  onClick={this.ocrClick.bind(this)}>
                         <img className="imgClass" src={require("../../assets/img/icon_ocr.png").default} alt="" />
                         <div className="text">

package/packages/pages/foot/foot.less

@@ -1,11 +1,11 @@
 .foot{
     background: #fff;
-height: 80px;
+height: 78px;
 display: inline-flex;
 width: 100%;
-position: absolute;
-    bottom: 0;
-    left: 0;
+// position: absolute;
+//     bottom: 0;
+//     left: 0;
 }
 .total{
     display: inline-flex;

package/packages/pages/video/video.jsx

@@ -69,6 +69,8 @@ class Video extends Component {
     sessionId: this.props.sessionId,
     imRoomId: this.props.imRoomId,
     isPictureInPicture: false,
+    clickedFacial: false,
+    clickedOcr: false
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -143,8 +145,8 @@ class Video extends Component {
     config_param.workspaceId = this.state.workSpaceId;
     config_param.uid = this.props.tellerAccount;
     config_param.biz_name = this.state.bizName; // 'demo'
-    config_param.appId = this.state.appId;
-
+    config_param.sub_biz = this.state.appId;
+    config_param.sign = window.sessionStorage.getItem('alimpassSig')
     config_param.room_server_url = this.props.roomServerUrl;
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
@@ -156,7 +158,7 @@ class Video extends Component {
     config_param.auto_publish_subscribe = 3;
     config_param.media_type = 1;
     config_param.publish_device = 1;
-    config_param.video_profile_type = '5';
+    config_param.video_profile_type = '3';
     config_param.need_volume_analyser = true;
     // config_param.audioSource = that.microphone[0].actionid
     // config_param.videoSource = that.checkOne[0]
@@ -324,7 +326,7 @@ class Video extends Component {
     }
   }
   // 获取人员客户列表
-  selectCustomer = () => {
+  selectCustomer = (val) => {
     const list = []
     if (document.getElementById('video1').name) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText))
@@ -380,24 +382,41 @@ class Video extends Component {
         name: '客户6'
       })
     }
+    if(list.length > 0) {
+      if(val == 'ocr') {
+        this.setState({
+          clickedOcr: true
+        })
+      } else if(val == 'facial'){
+        this.setState({
+          clickedFacial: true
+        })
+      }
+    } else {
+      message.success('当前暂无客户')
+    }
     this.setState({
       customerList: list
     })
   }
   // 人脸识别
   facialRecognition = () => {
+    if (this.isFileSuccuse()) {
     this.setState({
       faceCustomerType: 1,
       titleModal: '人脸识别'
     })
-    this.selectCustomer()
+    this.selectCustomer('facial')
+  }
   };
   ocrClick = () => {
+    if (this.isFileSuccuse()) {
     this.setState({
       faceCustomerType: 2,
       titleModal: 'OCR识别'
     })
-    this.selectCustomer()
+    this.selectCustomer('ocr')
+  }
   };
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
@@ -409,7 +428,7 @@ class Video extends Component {
         this.setState({ isBigVideo: 'video1' })
       }
     } else if (val == 'isLangPublishVideo1') {
-      if (document.getElementById('publish_video1').name) {
+      if (document.getElementById('publish_video1').name && this.state.isCustomer) {
         this.setState({ isBigVideo: 'publish_video1' })
       }
     } else if (val == 'isLangVideo2') {
@@ -763,6 +782,7 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
+      this.test_controller.ChangeStreamSize(document.getElementById('publish_video1').name, 5)
       this.setState(
         {
           isCustomer: true
@@ -1040,6 +1060,8 @@ class Video extends Component {
         return;
       }
       let canvas = document.getElementById(volumeView);
+      canvas.width = this.props.microphoneSize
+      canvas.height = this.props.microphoneSize
       let ctx = canvas.getContext("2d");
 
       let outcanvas = document.createElement("canvas");
@@ -1048,44 +1070,100 @@ class Video extends Component {
       ctx.strokeStyle = "#db0011";
       ctx.lineWidth = 2;
       ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
+      // ctx.fillStyle ='rgba(0, 0, 0, 0.2)';
+      // ctx.fillRect(0, 0, canvas.width, canvas.height, )
       let dataArray = new Uint8Array(analyser.frequencyBinCount);
       analyser.getByteFrequencyData(dataArray);
       let step = Math.round(dataArray.length / 60); //采样步长
+      var img = document.getElementById("icon_huatong");
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      // 以画布左上角为坐标原点
+      let drawArea = {
+        x1: 28/50*canvas.width, // 波动范围右下角的点坐标
+        y1: 25/50*canvas.height, 
+        x2: 22/50*canvas.width,  // 波动范围左上角的点坐标
+        y2: 10/50*canvas.height,
+      }
+
       for (var i = 0; i < 40; i++) {
         let energy = (dataArray[step * i] / 256.0) * 80;
-        for (var j = 0; j < energy; j++) {
-          ctx.beginPath();
-          ctx.moveTo(20 * i + 2, 200 + 4 * j);
-          ctx.lineTo(20 * (i + 1) - 2, 200 + 4 * j);
-          ctx.stroke();
-          ctx.beginPath();
-          ctx.moveTo(20 * i + 2, 200 - 4 * j);
-          ctx.lineTo(20 * (i + 1) - 2, 200 - 4 * j);
-          ctx.stroke();
-        }
         ctx.beginPath();
-        ctx.moveTo(20 * i + 2, 200);
-        ctx.lineTo(20 * (i + 1) - 2, 200);
-        ctx.stroke();
+        ctx.fillStyle = this.props.voiceColor;
+        const { x1,y1,x2,y2} = drawArea
+        let width = x1-x2;
+        let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
+        let startX =  x2 // 绘制起始点x
+        let startY =  y1 - height  // 绘制起始点y
+        ctx.fillRect(startX, startY, width, height )
       }
 
       //制造半透明投影
       function draw() {
-        ctx.drawImage(outcanvas, 0, 0);
-        ctx.save();
-        ctx.translate(canvas.width / 4, canvas.height / 2);
-        ctx.rotate(Math.PI);
-        ctx.scale(-1, 1);
-        ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
-        ctx.restore();
-        ctx.fillStyle = 'rgba(192,192,192, .0)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(outcanvas, 0, 0);
+          ctx.save();
+          ctx.translate(canvas.width / 2, canvas.height / 2);
+          ctx.rotate(Math.PI);
+          ctx.scale(-1, 1);
+          ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
+          ctx.restore();
+          ctx.fillStyle = 'rgba(192,192,192, .0)';
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
       }
 
       draw();
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
-    }
+      // let canvas = document.getElementById(volumeView);
+      // let ctx = canvas.getContext("2d");
+
+      // let outcanvas = document.createElement("canvas");
+      // outcanvas.width = canvas.width;
+      // outcanvas.height = canvas.height;
+      // ctx.strokeStyle = this.props.voiceColor;
+      // ctx.lineWidth = 2;
+      // ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
+      // let dataArray = new Uint8Array(analyser.frequencyBinCount);
+      // analyser.getByteFrequencyData(dataArray);
+      // let step = Math.round(dataArray.length / 60); //采样步长
+      // for (var i = 0; i < 40; i++) {
+      //   let energy = (dataArray[step * i] / 256.0) * 50;
+      //   for (var j = 0; j < energy; j++) {
+      //     ctx.beginPath();
+      //     ctx.moveTo(20 * i + 2, 200 + 4 * j);
+      //     ctx.lineTo(20 * (i + 1) - 2, 200 + 4 * j);
+      //     ctx.stroke();
+      //     ctx.beginPath();
+      //     ctx.moveTo(20 * i + 2, 200 - 4 * j);
+      //     ctx.lineTo(20 * (i + 1) - 2, 200 - 4 * j);
+      //     ctx.stroke();
+      //   }
+      //   ctx.beginPath();
+      //   ctx.moveTo(20 * i + 2, 200);
+      //   ctx.lineTo(20 * (i + 1) - 2, 200);
+      //   ctx.stroke();
+      // }
 
+      // //制造半透明投影
+      // function draw() {
+      //   ctx.drawImage(outcanvas, 0, 0);
+      //   ctx.save();
+      //   ctx.translate(canvas.width / 4, canvas.height / 2);
+      //   ctx.rotate(Math.PI);
+      //   ctx.scale(-1, 1);
+      //   ctx.drawImage(outcanvas, -canvas.width / 2, -canvas.height / 2);
+      //   ctx.restore();
+      //   ctx.fillStyle = 'rgba(192,192,192, .0)';
+      //   ctx.fillRect(0, 0, canvas.width, canvas.height);
+      // }
+
+      // draw();
+      // requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
+    }
+    // 停止共享
+    this.test_controller.OnDesktopDisplayClosed = () => {
+      if (this.state.isSharedScreen) {
+        this.sharedScreen()
+      }
+    }
   }
   contrastFaceVerify = async data => {
     console.log(data);
@@ -1160,6 +1238,9 @@ class Video extends Component {
     })
     const _dependScripts = [
       // https://counter-web.leimondata.cn:7199
+      this.props.resourcePath + "/beauty/beauty.js",
+      this.props.resourcePath + "/beauty/meeting_beautify_stream.js",
+      this.props.resourcePath + "/beauty/backgroundBlur.js",
       this.props.resourcePath + "/adapter.js",
       this.props.resourcePath + "/getMediaInfo.js",
       this.props.resourcePath + "/pdf.js",
@@ -1285,11 +1366,8 @@ class Video extends Component {
     }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId) {
-      return false
-    } else if (this.state.isSuspend) {
-      return false
-    } else if (!this.state.isCustomer) {
+    if (!this.state.sessionId || this.state.isSuspend || !this.state.isCustomer) {
+      message.success(this.props.prohibitPrompt)
       return false
     } else {
       return true
@@ -1591,6 +1669,8 @@ class Video extends Component {
     }
     console.log(sid)
     this.setState({
+      clickedFacial: false,
+      clickedOcr: false,
       faceCustomerUid: item.customId,
       isModalVisibleFacial: true,
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
@@ -1695,6 +1775,20 @@ class Video extends Component {
       })
     }
   }
+  facialHandleVisibleChange=(value)=>{
+    if(!value) {
+      this.setState({
+        clickedFacial: false
+      })
+    }
+  }
+  ocrHandleVisibleChange=(value)=>{
+    if(!value) {
+      this.setState({
+        clickedOcr: false
+      })
+    }
+  }
   render() {
     var pdfChildren
     if (this.props.children) {
@@ -1752,7 +1846,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div>
+                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily }} className={`customerTitle ${this.state.isBigVideo == 'video1' ? 'titleBig' : "titleSamlle"}`}>客户</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
@@ -1792,7 +1886,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='tellerTitle'>坐席</div>
+                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor,'font-size': this.props.fontSize + 'px','font-family' : this.props.fontFamily}} className={`tellerTitle ${this.state.isBigVideo == 'publish_video1' ? 'titleBig' : "titleSamlle"}`}>坐席</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
@@ -1865,7 +1959,7 @@ class Video extends Component {
 
               </div>
             </div>
-
+            <img id="icon_huatong" style={{display:'none'}} src={require("../../assets/img/icon_huatong.png").default}></img>
           </div>
           <Foot
             img={this.state.voiceImg}
@@ -1873,7 +1967,11 @@ class Video extends Component {
             suspendName={this.state.suspendName}
             cameraImg={this.state.cameraImg}
             customerList={this.state.customerList}
+            clickedOcr={this.state.clickedOcr}
+            clickedFacial={this.state.clickedFacial}
             suspend={this.suspend}
+            facialHandleVisibleChange={this.facialHandleVisibleChange}
+            ocrHandleVisibleChange={this.ocrHandleVisibleChange}
             voice={this.voice}
             cameraClick={this.cameraClick}
             sharedScreen={this.sharedScreen}
@@ -1951,5 +2049,12 @@ Video.defaultProps = {
   callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
+  prohibitPrompt: '当前无客户',
+  voiceColor: '#0AE544',
+  titleBackground: 'rgba(219, 0, 17, 0.1)',
+  titleColor: '#DB0011',
+  microphoneSize: '50',
+  fontSize: '14',
+  fontFamily: 'auto'
 }
 export default Video

package/packages/pages/video/video.less

@@ -52,7 +52,7 @@
   z-index: 2000;
 }
 .videoFit{
-  object-fit: cover;
+  object-fit: contain !important;
 }
 .itemPublic {
   grid-column-start: 1;
@@ -150,11 +150,11 @@
   // background: #fff;
   .button{
     display: inline-flex;
-    width: 100%;
+    // width: 100%;
     position: absolute;
     z-index: 1;
     top: 0;
-    left: 80px;
+    left: 0;
     .selectSee{
       background: #00847F;
 border-radius: 0px 0px 2px 2px;
@@ -183,27 +183,35 @@ border-radius: 0px 0px 2px 2px;
 }
 .customerTitle{
   position: absolute;
-  top: 0;
+  // top: 0;
+  bottom: 0;
   left: 0px;
-  width: 80px;
+  width: 30%;
   line-height: 30px;
   height: 30px;
-  background: rgba(219, 0, 17, 0.1);
+  // background: rgba(219, 0, 17, 0.1);
   border-radius: 4px 0px 2px 0px;
-  color: #DB0011;
-  font-size: 14px;
+  // color: #DB0011;
+  // font-size: 14px;
 }
 .tellerTitle{
   position: absolute;
-  top: 0;
+  // top: 0;
   right: 0px;
-  width: 80px;
+  // width: 80px;
   line-height: 30px;
+  
+  bottom: 0;
   height: 30px;
-  background: rgba(219, 0, 17, 0.1);
+  // background: rgba(219, 0, 17, 0.1);
   border-radius: 4px 0px 2px 0px;
-  transform: rotateY( 
-180deg);
-  color: #DB0011;
+  transform: rotateY(180deg);
+  // color: #DB0011;
   font-size: 14px;
+}
+.titleBig{
+  width: 30%;
+}
+.titleSamlle{
+  width: 70%;
 }