react_hsbc_teller 0.3.5 → 0.3.6

package/package.json

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

package/packages/pages/video/video.jsx

@@ -158,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]
@@ -428,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') {
@@ -782,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
@@ -1059,50 +1060,103 @@ 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");
       outcanvas.width = canvas.width;
       outcanvas.height = canvas.height;
-      ctx.strokeStyle = this.props.voiceColor;
+      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));
     }
 
   }
@@ -1784,7 +1838,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor }} 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'>客户</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
@@ -1824,7 +1878,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', background: this.props.titleBackground,color: this.props.titleColor}} 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'>坐席</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
@@ -1897,7 +1951,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}
@@ -1988,8 +2042,11 @@ Video.defaultProps = {
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
   prohibitPrompt: '当前无客户',
-  voiceColor: '#db0011',
+  voiceColor: '#0AE544',
   titleBackground: 'rgba(219, 0, 17, 0.1)',
-  titleColor: '#DB0011'
+  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,7 +150,7 @@
   // background: #fff;
   .button{
     display: inline-flex;
-    width: 100%;
+    // width: 100%;
     position: absolute;
     z-index: 1;
     top: 0;
@@ -191,7 +191,7 @@ border-radius: 0px 0px 2px 2px;
   // background: rgba(219, 0, 17, 0.1);
   border-radius: 4px 0px 2px 0px;
   // color: #DB0011;
-  font-size: 14px;
+  // font-size: 14px;
 }
 .tellerTitle{
   position: absolute;