react_hsbc_teller 0.7.3 → 0.7.7

package/packages/pages/video/video.jsx

@@ -37,6 +37,7 @@ class Video extends Component {
   cancel = axios.CancelToken.source()
   signCanvas = React.createRef();
   state = {
+    sessionType: true,
     isWhiteboard: false,
     isSelect: '',
     loading: false,
@@ -48,6 +49,7 @@ class Video extends Component {
     employeeNumber: '',
     employeeName: '',
     isModalVisibleInvitation: false,
+    linkData: '',
     roomCustomerList: [],
     facialImg: '',
     isModalVisibleFacial: false,
@@ -113,6 +115,7 @@ class Video extends Component {
     imStatus: false,
     imJoinRoom: false,
     analyserData: new Map(),
+    analyserHeight: new Map()
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -162,6 +165,9 @@ class Video extends Component {
       })
     } catch (err) {
       console.error(err);
+      this.setState({
+        sessionType: false
+      })
       this.props.createRoomCallback({
         type: 2,
         errorManage: '保存房间信息失败',
@@ -539,277 +545,293 @@ class Video extends Component {
     }
   };
   endSessionValue = () => {
-    this.test_controller.LeaveRoom()
+    if(this.state.sessionType) {
+      this.test_controller.LeaveRoom()
+    } else {
+      this.finishSession()
+    }
+    
   };
   // 画中画
-  pictureInPicture = () => {
-    let interval
+  pictureInPicture = (val) => {
     if (this.isFileSuccuse()) {
       if (this.state.isPictureInPicture) {
-        document.exitPictureInPicture()
-      } else {
-        const list = []
-        if (document.getElementById('video1').name) {
-          list.push({
-            name: 'video1',
-            title: this.state.videoOneName,
-            voice: 'voiceVideoOne'
-          })
-        }
-        if (document.getElementById('publish_video1').name) {
-          list.push({
-            name: 'publish_video1',
-            title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席',
-            voice: 'voiceStatue'
-          })
-        }
-        if (document.getElementById('video2').name) {
-          list.push({
-            name: 'video2',
-            title: this.state.videoTwoName,
-            voice: 'voiceVideoTwo'
-          })
-        }
-        if (document.getElementById('video3').name) {
-          list.push({
-            name: 'video3',
-            title: this.state.videoThreeName,
-            voice: 'voiceVideoThree'
-          })
-        }
-        if (document.getElementById('video4').name) {
-          list.push({
-            name: 'video4',
-            title: this.state.videoFourName,
-            voice: 'voiceVideoFour'
-          })
-        }
-        if (document.getElementById('video5').name) {
-          list.push({
-            name: 'video5',
-            title: this.state.videoFiveName,
-            voice: 'voiceVideoFive'
-          })
+        if(!val) {
+          document.exitPictureInPicture()
+        } else {
+          this.pictureInPictureClick()
         }
-        if (document.getElementById('video6').name) {
-          list.push({
-            name: 'video6',
-            title: this.state.videoSixName,
-            voice: 'voiceVideoSix'
-          })
+      } else {
+        if(!val) {
+        this.pictureInPictureClick()
         }
+      }
+    }
+  };
+  pictureInPictureClick=()=>{
+    let interval
+    const list = []
+    if (document.getElementById('video1').name) {
+      list.push({
+        name: 'video1',
+        title: this.state.videoOneName,
+        voice: 'voiceVideoOne'
+      })
+    }
+    if (document.getElementById('publish_video1').name) {
+      list.push({
+        name: 'publish_video1',
+        title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席',
+        voice: 'voiceStatue'
+      })
+    }
+    if (document.getElementById('video2').name) {
+      list.push({
+        name: 'video2',
+        title: this.state.videoTwoName,
+        voice: 'voiceVideoTwo'
+      })
+    }
+    if (document.getElementById('video3').name) {
+      list.push({
+        name: 'video3',
+        title: this.state.videoThreeName,
+        voice: 'voiceVideoThree'
+      })
+    }
+    if (document.getElementById('video4').name) {
+      list.push({
+        name: 'video4',
+        title: this.state.videoFourName,
+        voice: 'voiceVideoFour'
+      })
+    }
+    if (document.getElementById('video5').name) {
+      list.push({
+        name: 'video5',
+        title: this.state.videoFiveName,
+        voice: 'voiceVideoFive'
+      })
+    }
+    if (document.getElementById('video6').name) {
+      list.push({
+        name: 'video6',
+        title: this.state.videoSixName,
+        voice: 'voiceVideoSix'
+      })
+    }
 
-        if (document.getElementById('video7').name) {
-          list.push({
-            name: 'video7',
-            title: this.state.videoSevenName,
-            voice: 'voiceVideoSeven'
-          })
-        }
-        if (document.getElementById('video8').name) {
-          list.push({
-            name: 'video8',
-            title: this.state.videoEightName,
-            voice: 'voiceVideoEight'
-          })
-        }
-        if (document.getElementById('video9').name) {
-          list.push({
-            name: 'video9',
-            title: this.state.videoNineName,
-            voice: 'voiceVideoNine'
-          })
-        }
-        if (document.getElementById('video10').name) {
-          list.push({
-            name: 'video10',
-            title: this.state.videoTenName,
-            voice: 'voiceVideoTen'
-          })
-        }
-        if (document.getElementById('video11').name) {
-          list.push({
-            name: 'video11',
-            title: this.state.videoElevenName,
-            voice: 'voiceVideoEleven'
-          })
-        }
-        if (document.getElementById('video12').name) {
-          list.push({
-            name: 'video12',
-            title: this.state.videoTwelveName,
-            voice: 'voiceVideoTwelve'
-          })
+    if (document.getElementById('video7').name) {
+      list.push({
+        name: 'video7',
+        title: this.state.videoSevenName,
+        voice: 'voiceVideoSeven'
+      })
+    }
+    if (document.getElementById('video8').name) {
+      list.push({
+        name: 'video8',
+        title: this.state.videoEightName,
+        voice: 'voiceVideoEight'
+      })
+    }
+    if (document.getElementById('video9').name) {
+      list.push({
+        name: 'video9',
+        title: this.state.videoNineName,
+        voice: 'voiceVideoNine'
+      })
+    }
+    if (document.getElementById('video10').name) {
+      list.push({
+        name: 'video10',
+        title: this.state.videoTenName,
+        voice: 'voiceVideoTen'
+      })
+    }
+    if (document.getElementById('video11').name) {
+      list.push({
+        name: 'video11',
+        title: this.state.videoElevenName,
+        voice: 'voiceVideoEleven'
+      })
+    }
+    if (document.getElementById('video12').name) {
+      list.push({
+        name: 'video12',
+        title: this.state.videoTwelveName,
+        voice: 'voiceVideoTwelve'
+      })
+    }
+    console.log(list)
+    const width = 640;
+    const height = 360 * list.length;
+    const canvas = document.createElement('canvas');
+    const cobj = canvas.getContext('2d'); // 获取绘图环境
+    canvas.width = width;
+    canvas.height = height;
+
+    interval = setInterval(() => {
+      // cobj.clearRect(0, 0, width, height);
+      for (let i = 0; i < list.length; i++) {
+
+        let videoId = list[i].name;
+        let videoDiv = document.getElementById(videoId);
+        let videoWidth = videoDiv.videoWidth;
+        let videoHeight = videoDiv.videoHeight;
+        let newVideoWidth = 640;
+        let newVideoHeight = 360;
+        if (videoHeight * 640 / videoWidth > 360) {
+          newVideoWidth = videoWidth * 360 / videoHeight;
+        } else {
+          newVideoHeight = videoHeight * 640 / videoWidth;
         }
-        console.log(list)
-        const width = 640;
-        const height = 360 * list.length;
-        const canvas = document.createElement('canvas');
-        const cobj = canvas.getContext('2d'); // 获取绘图环境
-        canvas.width = width;
-        canvas.height = height;
-
-        interval = setInterval(() => {
-          // cobj.clearRect(0, 0, width, height);
-          for (let i = 0; i < list.length; i++) {
-
-            let videoId = list[i].name;
-            let videoDiv = document.getElementById(videoId);
-            let videoWidth = videoDiv.videoWidth;
-            let videoHeight = videoDiv.videoHeight;
-            let newVideoWidth = 640;
-            let newVideoHeight = 360;
-            if (videoHeight * 640 / videoWidth > 360) {
-              newVideoWidth = videoWidth * 360 / videoHeight;
-            } else {
-              newVideoHeight = videoHeight * 640 / videoWidth;
-            }
 
-            cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight);
-            cobj.beginPath();
-            cobj.strokeStyle = this.props.titleColor;
-            cobj.fillStyle = this.props.titleBackground;
-            cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60)
-            cobj.fill();
-            cobj.stroke();
-            cobj.beginPath();
-            cobj.font = "28px auto";
-            cobj.textAlign = 'left';
-            cobj.lineWidth = 1;
-            // 文字
-            let str = list[i].title
-            for (let k = 0; k < str.length; k++){
-              // console.log(str.substring(0,k+1))
-              // console.log(cobj.measureText(str.substring(0,k+1)).width)
-                  if (cobj.measureText(str.substring(0,k+1)).width>240){
-                    str = str.substring(0,k-2)
-                    str += '...'
-                    break;
-                  }
-            }
-            cobj.strokeText(str, 70, 360 * (i + 1) - 20);
-            cobj.stroke();
-            //左边框
-            cobj.beginPath();
-            cobj.moveTo(0, 0);
-            cobj.lineTo(0, 360 * list.length);
-            cobj.closePath(); //闭合路径
-            cobj.lineWidth = 5; //线的边框为10像素
-            cobj.strokeStyle = '#d9363e';
-            cobj.stroke(); //绘制定义的图形
-
-            //下边框
-            cobj.beginPath();
-            cobj.moveTo(0, 0);
-            cobj.lineTo(640, 0);
-            cobj.closePath(); //闭合路径
-            cobj.lineWidth = 5; //线的边框为10像素
-            cobj.strokeStyle = '#d9363e';
-            cobj.stroke(); //绘制定义的图形
-
-            //右边框
-            cobj.beginPath();
-            cobj.moveTo(640, 360 * list.length);
-            cobj.lineTo(640, 0);
-            cobj.closePath(); //闭合路径
-            cobj.lineWidth = 5; //线的边框为10像素
-            cobj.strokeStyle = '#d9363e';
-            cobj.stroke(); //绘制定义的图形
-
-
-            //上边框
-            cobj.beginPath();
-            cobj.moveTo(0, 360 * list.length);
-            cobj.lineTo(640, 360 * list.length);
-            cobj.closePath(); //闭合路径
-            cobj.lineWidth = 5; //线的边框为10像素
-            cobj.strokeStyle = '#d9363e';
-            cobj.stroke(); //绘制定义的图形
-            
-            // 绘制话筒图标
-            let microphoneSize = 50
-            var img = document.getElementById("icon_huatong");
-            var img1 = document.getElementById("icon_huatong_close");
-            if(this.state[list[i].voice]) {
-              cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
-            } else {
-              cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
-
-            // 绘制实时音量
-            let sid = document.getElementById(list[i].name).name
-            let analyser = this.state.analyserData.get(sid)
-            aou(analyser)
-            //  let sid = document.getElementById(list[i].name).name
-            //   let stream = this.test_controller.GetMediaInfo(sid).audio_
-            //   let acc = new AudioContext()
-            //   let mic = acc.createMediaStreamSource(stream)
-            //   let analyser = acc.createAnalyser()
-            //   analyser.fftSize = 256
-            //   mic.connect(analyser)
-            //   aou(analyser) 
-            //   let microphoneSize = 50
-            //   var img = document.getElementById("icon_huatong");
-            //   cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
-            function aou(analyser){
-              let dataArray = new Uint8Array(analyser.frequencyBinCount);
-              analyser.getByteFrequencyData(dataArray);
-              let step = Math.round(dataArray.length / 60); //采样步长
-              // 以画布左上角为坐标原点
-              let drawArea = {
-                x1: 28/50 * microphoneSize + 10, // 波动范围右下角的点坐标
-                y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
-                x2: 22/50 * microphoneSize + 10,  // 波动范围左上角的点坐标
-                y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
-              }
-              
-              
-              for (var j = 0; j < 40; j++) {
-                let energy = (dataArray[step * j] / 256.0) * 80;
-                cobj.beginPath();
-                cobj.fillStyle = "#0AE544";
-                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
-                cobj.fillRect(startX, startY, width, height )
+        cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight);
+        cobj.beginPath();
+        cobj.strokeStyle = this.props.titleColor;
+        cobj.fillStyle = this.props.titleBackground;
+        cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60)
+        cobj.fill();
+        cobj.stroke();
+        cobj.beginPath();
+        cobj.font = "28px auto";
+        cobj.textAlign = 'left';
+        cobj.lineWidth = 1;
+        // 文字
+        let str = list[i].title
+        for (let k = 0; k < str.length; k++){
+          // console.log(str.substring(0,k+1))
+          // console.log(cobj.measureText(str.substring(0,k+1)).width)
+              if (cobj.measureText(str.substring(0,k+1)).width>210){
+                str = str.substring(0,k-2)
+                str += '...'
+                break;
               }
-              requestAnimationFrame(aou.bind(this, analyser));
-
-            }
+        }
+        cobj.strokeText(str, 70, 360 * (i + 1) - 20);
+        cobj.stroke();
+        //左边框
+        cobj.beginPath();
+        cobj.moveTo(0, 0);
+        cobj.lineTo(0, 360 * list.length);
+        cobj.closePath(); //闭合路径
+        cobj.lineWidth = 5; //线的边框为10像素
+        cobj.strokeStyle = '#d9363e';
+        cobj.stroke(); //绘制定义的图形
+
+        //下边框
+        cobj.beginPath();
+        cobj.moveTo(0, 0);
+        cobj.lineTo(640, 0);
+        cobj.closePath(); //闭合路径
+        cobj.lineWidth = 5; //线的边框为10像素
+        cobj.strokeStyle = '#d9363e';
+        cobj.stroke(); //绘制定义的图形
+
+        //右边框
+        cobj.beginPath();
+        cobj.moveTo(640, 360 * list.length);
+        cobj.lineTo(640, 0);
+        cobj.closePath(); //闭合路径
+        cobj.lineWidth = 5; //线的边框为10像素
+        cobj.strokeStyle = '#d9363e';
+        cobj.stroke(); //绘制定义的图形
+
+
+        //上边框
+        cobj.beginPath();
+        cobj.moveTo(0, 360 * list.length);
+        cobj.lineTo(640, 360 * list.length);
+        cobj.closePath(); //闭合路径
+        cobj.lineWidth = 5; //线的边框为10像素
+        cobj.strokeStyle = '#d9363e';
+        cobj.stroke(); //绘制定义的图形
+        
+        // 绘制话筒图标
+        let microphoneSize = 50
+        var img = document.getElementById("icon_huatong");
+        var img1 = document.getElementById("icon_huatong_close");
+        if(this.state[list[i].voice]) {
+          cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+        } else {
+          cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+
+        // 绘制实时音量
+        let sid = document.getElementById(list[i].name).name
+        let analyser = this.state.analyserData.get(sid)
+        aou(analyser)
+        //  let sid = document.getElementById(list[i].name).name
+        //   let stream = this.test_controller.GetMediaInfo(sid).audio_
+        //   let acc = new AudioContext()
+        //   let mic = acc.createMediaStreamSource(stream)
+        //   let analyser = acc.createAnalyser()
+        //   analyser.fftSize = 256
+        //   mic.connect(analyser)
+        //   aou(analyser) 
+        //   let microphoneSize = 50
+        //   var img = document.getElementById("icon_huatong");
+        //   cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
+        function aou(analyser){
+          if(analyser) {
+            let dataArray = new Uint8Array(analyser.frequencyBinCount);
+            analyser.getByteFrequencyData(dataArray);
+            let step = Math.round(dataArray.length / 60); //采样步长
+            // 以画布左上角为坐标原点
+            let drawArea = {
+              x1: 28/50 * microphoneSize + 10, // 波动范围右下角的点坐标
+              y1: 25/50 * microphoneSize + 360 * (i + 1) - 60, 
+              x2: 22/50 * microphoneSize + 10,  // 波动范围左上角的点坐标
+              y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
             }
             
+            
+            for (var j = 0; j < 40; j++) {
+              let energy = (dataArray[step * j] / 256.0) * 80;
+              cobj.beginPath();
+              cobj.fillStyle = "#0AE544";
+              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
+              cobj.fillRect(startX, startY, width, height )
+            }
+            requestAnimationFrame(aou.bind(this, analyser));
           }
-        }, 100);
-        const captureStream = canvas.captureStream();
-        const mix_stream = new MediaStream(captureStream);
-        pictureInPictureVideo = document.getElementById('mixedvideo');
-        pictureInPictureVideo.srcObject = mix_stream;
-        pictureInPictureVideo.onloadedmetadata = () => {
-          pictureInPictureVideo.requestPictureInPicture();
-        };
-      }
 
 
-      pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
-        //可获取画中画窗口的一些数据，如宽高等
-        pictureInPictureVideo.style.display = 'block';
-        pictureInPictureVideo.play();
-        this.setState({
-          isPictureInPicture: true
-        })
-      });
+        }
+        }
+        
+      }
+    }, 100);
+    const captureStream = canvas.captureStream();
+    const mix_stream = new MediaStream(captureStream);
+    pictureInPictureVideo = document.getElementById('mixedvideo');
+    pictureInPictureVideo.srcObject = mix_stream;
+    pictureInPictureVideo.onloadedmetadata = () => {
+      pictureInPictureVideo.requestPictureInPicture();
+    };
 
-      pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
-        pictureInPictureVideo.srcObject = null;
-        pictureInPictureVideo.style.display = "none";
-        clearInterval(interval);
-        this.setState({
-          isPictureInPicture: false
-        })
-      });
-    }
-  };
+    pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
+      //可获取画中画窗口的一些数据，如宽高等
+      pictureInPictureVideo.style.display = 'block';
+      pictureInPictureVideo.play();
+      this.setState({
+        isPictureInPicture: true
+      })
+    });
+
+    pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
+      pictureInPictureVideo.srcObject = null;
+      pictureInPictureVideo.style.display = "none";
+      clearInterval(interval);
+      this.setState({
+        isPictureInPicture: false
+      })
+    });
+  }
   roomCallBack = (type, manege,code) => {
     if (this.state.sessionId) {
       this.props.joinRoomCallback({
@@ -1080,6 +1102,9 @@ class Video extends Component {
     window.IMOpenfire = msg =>{
       console.log('im登录', msg)
       if(!msg) {
+        this.setState({
+          sessionType: false
+        })
         this.roomCallBack(2, 'im建立连接失败',-7)
       } else {
         this.setState({
@@ -1185,7 +1210,7 @@ class Video extends Component {
         microphoneList: objList1,
         speakerList: [objList2[0]]
       })
-      if (!this.state.appId) {
+      if (!this.state.appId && this.state.sessionType) {
         this.mpaasSig(data);
         this.setState({
           cameraValue: obj[0].actionid,
@@ -1201,6 +1226,9 @@ class Video extends Component {
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
+      this.setState({
+        sessionType: false
+      })
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头','error')
       this.roomCallBack(2, '获取设备失败',-1)
     };
@@ -1211,6 +1239,9 @@ class Video extends Component {
     };
     this.test_controller.OnConnectFailed = (code, msg) => {
       console.log('建立连接失败', code, msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '连接失败',-2)
     };
     // 断开连接回调
@@ -1225,6 +1256,9 @@ class Video extends Component {
     // 初始化房间失败
     this.test_controller.OnInitRoomConfigFail = (err_code, err_msg) => {
       console.log('初始化房间失败', err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '初始化失败',-3)
     };
     // 初始化成功回调
@@ -1251,6 +1285,9 @@ class Video extends Component {
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
       console.log('创建房间失败', err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '创建房间失败',-4)
     };
     // 初始化⾳视频成功
@@ -1273,6 +1310,9 @@ class Video extends Component {
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
       console.log('加入房间失败', err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '加入失败',-5)
     };
     // 发布媒体流成功
@@ -1288,11 +1328,36 @@ class Video extends Component {
             'tellerId': this.props.tellerAccount
           })
         });
+      } 
+      if(sid == document.getElementById('publish_video1').name) {
+        this.timer = setInterval(
+          () => {
+            console.log('hhhhhh',this.state.analyserHeight.get(sid),this.state.analyserHeight.get(sid).toFixed(2))
+            if(!this.state.voiceStatue) {
+              callNimIM('sendCustomCmdMsg', {
+                customId: this.state.imRoomId,
+                content: JSON.stringify({
+                  'typeId': 3200,
+                  'decibelValue': this.state.analyserHeight.get(sid).toFixed(2),
+                  "data": {
+                    'sessionId': this.state.sessionId,
+                    'userId': this.props.tellerAccount
+                  }
+
+                })
+              });
+            }
+          },
+          1000
+        );
       }
     };
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
       console.log('发布媒体流失败', sid, err_code, err_msg)
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '发布失败',-6)
     };
     // 订阅媒体流成功
@@ -1808,6 +1873,8 @@ class Video extends Component {
           voiceVideoTwelve: false
         })
       }
+      this.state.analyserData.delete(sid)
+      this.pictureInPicture('Refresh')
     };
     // 推送“取消发布”给与会者
     this.test_controller.OnUnPublish = (feed) => {
@@ -1844,6 +1911,7 @@ class Video extends Component {
       exitType
     ) => {
       console.log('退出房间者', participant, exitType)
+      this.messageClick(this.props.customLeaveRoom,'error')
     };
     // 弱网回调
     this.test_controller.OnNetworkWeak = (bpsSend, bpsRecv, sid) => {
@@ -2113,6 +2181,13 @@ class Video extends Component {
         let startX = x2 // 绘制起始点x
         let startY = y1 - height  // 绘制起始点y
         ctx.fillRect(startX, startY, width, height)
+        if(document.getElementById('publish_video1').name == sid) {
+          this.state.analyserHeight.set(sid,energy/80)
+          this.setState({
+            analyserHeight: this.state.analyserHeight
+          })
+        }
+
       }
       requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
       
@@ -2154,7 +2229,7 @@ class Video extends Component {
   finishSession = async () => {
 
 
-    if (this.state.roomCustomerList.length == 0) {
+    if (this.state.roomCustomerList.length == 0 && this.state.sessionType) {
       try {
         let result = await API.finishSession({
           sessionId: this.state.sessionId,
@@ -2168,7 +2243,8 @@ class Video extends Component {
       isWhiteboard: false,
       isPictureInPicture: false,
       imStatus: false,
-      imJoinRoom: false
+      imJoinRoom: false,
+      sessionType: true
     });
     this.props.onLeaveRoom({
       code: LEAVE_TYPE.TELLER_EXIT,
@@ -2184,6 +2260,9 @@ class Video extends Component {
       if (result.code == 200 && result.data.roomStatus == 1) {
         this.addToScript()
       } else {
+        this.setState({
+          sessionType: false
+        })
         this.messageClick('当前房间状态异常','error')
         this.props.onLeaveRoom({
           code: LEAVE_TYPE.ROOM_DESTROYED,
@@ -2191,6 +2270,9 @@ class Video extends Component {
         })
       }
     } catch (err) {
+      this.setState({
+        sessionType: false
+      })
       this.messageClick('当前房间状态异常','error')
       this.props.onLeaveRoom({
         code: LEAVE_TYPE.ROOM_DESTROYED,
@@ -2205,8 +2287,12 @@ class Video extends Component {
     axios.get(this.props.resourcePath + "/beauty/beauty.js")
     .then(response => this.addToScriptClick()).catch(function (error) {
       console.log(error);
+      this.setState({
+        sessionType: false
+      })
       this.roomCallBack(2, '创建房间失败',-4)
       
+      
   })
     
   }
@@ -2282,6 +2368,7 @@ class Video extends Component {
       return
     }
     this.cancel = ''
+    this.timer && clearInterval(this.timer);
   }
   componentWillMount() {
     if (this.props.sessionId) {
@@ -2601,7 +2688,8 @@ class Video extends Component {
       isModalVisibleInvitation: true,
       employeeNumber: '',
       employeeName: '',
-      employeeError: ''
+      employeeError: '',
+      linkData: ''
     })
 
   }
@@ -2782,10 +2870,20 @@ class Video extends Component {
           videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
         })
       }
+      this.pictureInPicture('Refresh')
     } catch (err) {
 
     }
   }
+  linkClick=()=>{
+    let inp = document.createElement('input')
+      inp.value = this.state.linkData
+      document.body.appendChild(inp)
+      inp.select() // 选择对象;
+      console.log(inp.value, '复制到的内容')
+      document.execCommand('Copy') // 执行浏览器复制命令
+      inp.remove()
+  }
   queryStaff = async () => {
     if(!this.state.employeeNumber) return
     try {
@@ -2798,6 +2896,11 @@ class Video extends Component {
           employeeName: result.data.staffName,
           employeeError: result.data.staffName ? '' : '查无此人',
         })
+        if(result.data.staffName){
+          this.setState({
+            linkData:'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting&appointmentID='+ this.props.businessNumber + '&staffID='+this.state.employeeNumber+'&staffName='+ encodeURIComponent(result.data.staffName)
+          })
+        }
       } else {
         this.messageClick('查询失败','error')
       }
@@ -3511,7 +3614,12 @@ class Video extends Component {
           <Modal className="modelClass" title="新增预约" closable={false} centered={true} visible={this.state.isModalVisibleInvitation} footer={[
              <div key='invitation'>
             <Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
-            <Button className="modelButtonOk" type="primary" danger onClick={this.handleOkInvitation}>确定</Button>
+            {
+              this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}>发送邮件</Button>
+            }
+            {
+              !this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger >发送邮件</Button>
+            }
             </div>
           ]}>
             <div>
@@ -3523,6 +3631,12 @@ class Video extends Component {
               <div className="invitationDiv">
               <span className="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
+              {
+                this.state.employeeName &&<div className='invitationDiv'>
+                <span className="modalSpan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><Button className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制链接</Button>
+                </div>
+              }
+              
             </div>
             {
               this.state.employeeError && <div className='errorClassInvitation'>
@@ -3588,10 +3702,11 @@ Video.defaultProps = {
   fontSize: '14',
   fontFamily: 'auto',
   menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
+  customLeaveRoom: '客户离开房间',
   meetingInfo: {
-    title: '测试',
-    host: 'wmz',
-    customers: ['王三', '张思']
+    title: '--',
+    host: '--',
+    customers: ['--']
   }
 }
 export default Video