react_hsbc_teller 0.7.4 → 0.7.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -115,6 +115,7 @@ class Video extends Component {
|
|
|
115
115
|
imStatus: false,
|
|
116
116
|
imJoinRoom: false,
|
|
117
117
|
analyserData: new Map(),
|
|
118
|
+
analyserHeight: new Map()
|
|
118
119
|
};
|
|
119
120
|
// eslint-disable-next-line no-undef
|
|
120
121
|
test_controller = '';
|
|
@@ -552,274 +553,285 @@ class Video extends Component {
|
|
|
552
553
|
|
|
553
554
|
};
|
|
554
555
|
// 画中画
|
|
555
|
-
pictureInPicture = () => {
|
|
556
|
-
let interval
|
|
556
|
+
pictureInPicture = (val) => {
|
|
557
557
|
if (this.isFileSuccuse()) {
|
|
558
558
|
if (this.state.isPictureInPicture) {
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
list.push({
|
|
564
|
-
name: 'video1',
|
|
565
|
-
title: this.state.videoOneName,
|
|
566
|
-
voice: 'voiceVideoOne'
|
|
567
|
-
})
|
|
568
|
-
}
|
|
569
|
-
if (document.getElementById('publish_video1').name) {
|
|
570
|
-
list.push({
|
|
571
|
-
name: 'publish_video1',
|
|
572
|
-
title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席',
|
|
573
|
-
voice: 'voiceStatue'
|
|
574
|
-
})
|
|
575
|
-
}
|
|
576
|
-
if (document.getElementById('video2').name) {
|
|
577
|
-
list.push({
|
|
578
|
-
name: 'video2',
|
|
579
|
-
title: this.state.videoTwoName,
|
|
580
|
-
voice: 'voiceVideoTwo'
|
|
581
|
-
})
|
|
582
|
-
}
|
|
583
|
-
if (document.getElementById('video3').name) {
|
|
584
|
-
list.push({
|
|
585
|
-
name: 'video3',
|
|
586
|
-
title: this.state.videoThreeName,
|
|
587
|
-
voice: 'voiceVideoThree'
|
|
588
|
-
})
|
|
589
|
-
}
|
|
590
|
-
if (document.getElementById('video4').name) {
|
|
591
|
-
list.push({
|
|
592
|
-
name: 'video4',
|
|
593
|
-
title: this.state.videoFourName,
|
|
594
|
-
voice: 'voiceVideoFour'
|
|
595
|
-
})
|
|
596
|
-
}
|
|
597
|
-
if (document.getElementById('video5').name) {
|
|
598
|
-
list.push({
|
|
599
|
-
name: 'video5',
|
|
600
|
-
title: this.state.videoFiveName,
|
|
601
|
-
voice: 'voiceVideoFive'
|
|
602
|
-
})
|
|
559
|
+
if(!val) {
|
|
560
|
+
document.exitPictureInPicture()
|
|
561
|
+
} else {
|
|
562
|
+
this.pictureInPictureClick()
|
|
603
563
|
}
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
title: this.state.videoSixName,
|
|
608
|
-
voice: 'voiceVideoSix'
|
|
609
|
-
})
|
|
564
|
+
} else {
|
|
565
|
+
if(!val) {
|
|
566
|
+
this.pictureInPictureClick()
|
|
610
567
|
}
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
};
|
|
571
|
+
pictureInPictureClick=()=>{
|
|
572
|
+
let interval
|
|
573
|
+
const list = []
|
|
574
|
+
if (document.getElementById('video1').name) {
|
|
575
|
+
list.push({
|
|
576
|
+
name: 'video1',
|
|
577
|
+
title: this.state.videoOneName,
|
|
578
|
+
voice: 'voiceVideoOne'
|
|
579
|
+
})
|
|
580
|
+
}
|
|
581
|
+
if (document.getElementById('publish_video1').name) {
|
|
582
|
+
list.push({
|
|
583
|
+
name: 'publish_video1',
|
|
584
|
+
title: this.props.meetingInfo.host ? this.props.meetingInfo.host : '坐席',
|
|
585
|
+
voice: 'voiceStatue'
|
|
586
|
+
})
|
|
587
|
+
}
|
|
588
|
+
if (document.getElementById('video2').name) {
|
|
589
|
+
list.push({
|
|
590
|
+
name: 'video2',
|
|
591
|
+
title: this.state.videoTwoName,
|
|
592
|
+
voice: 'voiceVideoTwo'
|
|
593
|
+
})
|
|
594
|
+
}
|
|
595
|
+
if (document.getElementById('video3').name) {
|
|
596
|
+
list.push({
|
|
597
|
+
name: 'video3',
|
|
598
|
+
title: this.state.videoThreeName,
|
|
599
|
+
voice: 'voiceVideoThree'
|
|
600
|
+
})
|
|
601
|
+
}
|
|
602
|
+
if (document.getElementById('video4').name) {
|
|
603
|
+
list.push({
|
|
604
|
+
name: 'video4',
|
|
605
|
+
title: this.state.videoFourName,
|
|
606
|
+
voice: 'voiceVideoFour'
|
|
607
|
+
})
|
|
608
|
+
}
|
|
609
|
+
if (document.getElementById('video5').name) {
|
|
610
|
+
list.push({
|
|
611
|
+
name: 'video5',
|
|
612
|
+
title: this.state.videoFiveName,
|
|
613
|
+
voice: 'voiceVideoFive'
|
|
614
|
+
})
|
|
615
|
+
}
|
|
616
|
+
if (document.getElementById('video6').name) {
|
|
617
|
+
list.push({
|
|
618
|
+
name: 'video6',
|
|
619
|
+
title: this.state.videoSixName,
|
|
620
|
+
voice: 'voiceVideoSix'
|
|
621
|
+
})
|
|
622
|
+
}
|
|
611
623
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
624
|
+
if (document.getElementById('video7').name) {
|
|
625
|
+
list.push({
|
|
626
|
+
name: 'video7',
|
|
627
|
+
title: this.state.videoSevenName,
|
|
628
|
+
voice: 'voiceVideoSeven'
|
|
629
|
+
})
|
|
630
|
+
}
|
|
631
|
+
if (document.getElementById('video8').name) {
|
|
632
|
+
list.push({
|
|
633
|
+
name: 'video8',
|
|
634
|
+
title: this.state.videoEightName,
|
|
635
|
+
voice: 'voiceVideoEight'
|
|
636
|
+
})
|
|
637
|
+
}
|
|
638
|
+
if (document.getElementById('video9').name) {
|
|
639
|
+
list.push({
|
|
640
|
+
name: 'video9',
|
|
641
|
+
title: this.state.videoNineName,
|
|
642
|
+
voice: 'voiceVideoNine'
|
|
643
|
+
})
|
|
644
|
+
}
|
|
645
|
+
if (document.getElementById('video10').name) {
|
|
646
|
+
list.push({
|
|
647
|
+
name: 'video10',
|
|
648
|
+
title: this.state.videoTenName,
|
|
649
|
+
voice: 'voiceVideoTen'
|
|
650
|
+
})
|
|
651
|
+
}
|
|
652
|
+
if (document.getElementById('video11').name) {
|
|
653
|
+
list.push({
|
|
654
|
+
name: 'video11',
|
|
655
|
+
title: this.state.videoElevenName,
|
|
656
|
+
voice: 'voiceVideoEleven'
|
|
657
|
+
})
|
|
658
|
+
}
|
|
659
|
+
if (document.getElementById('video12').name) {
|
|
660
|
+
list.push({
|
|
661
|
+
name: 'video12',
|
|
662
|
+
title: this.state.videoTwelveName,
|
|
663
|
+
voice: 'voiceVideoTwelve'
|
|
664
|
+
})
|
|
665
|
+
}
|
|
666
|
+
console.log(list)
|
|
667
|
+
const width = 640;
|
|
668
|
+
const height = 360 * list.length;
|
|
669
|
+
const canvas = document.createElement('canvas');
|
|
670
|
+
const cobj = canvas.getContext('2d'); // 获取绘图环境
|
|
671
|
+
canvas.width = width;
|
|
672
|
+
canvas.height = height;
|
|
673
|
+
|
|
674
|
+
interval = setInterval(() => {
|
|
675
|
+
// cobj.clearRect(0, 0, width, height);
|
|
676
|
+
for (let i = 0; i < list.length; i++) {
|
|
677
|
+
|
|
678
|
+
let videoId = list[i].name;
|
|
679
|
+
let videoDiv = document.getElementById(videoId);
|
|
680
|
+
let videoWidth = videoDiv.videoWidth;
|
|
681
|
+
let videoHeight = videoDiv.videoHeight;
|
|
682
|
+
let newVideoWidth = 640;
|
|
683
|
+
let newVideoHeight = 360;
|
|
684
|
+
if (videoHeight * 640 / videoWidth > 360) {
|
|
685
|
+
newVideoWidth = videoWidth * 360 / videoHeight;
|
|
686
|
+
} else {
|
|
687
|
+
newVideoHeight = videoHeight * 640 / videoWidth;
|
|
653
688
|
}
|
|
654
|
-
console.log(list)
|
|
655
|
-
const width = 640;
|
|
656
|
-
const height = 360 * list.length;
|
|
657
|
-
const canvas = document.createElement('canvas');
|
|
658
|
-
const cobj = canvas.getContext('2d'); // 获取绘图环境
|
|
659
|
-
canvas.width = width;
|
|
660
|
-
canvas.height = height;
|
|
661
|
-
|
|
662
|
-
interval = setInterval(() => {
|
|
663
|
-
// cobj.clearRect(0, 0, width, height);
|
|
664
|
-
for (let i = 0; i < list.length; i++) {
|
|
665
|
-
|
|
666
|
-
let videoId = list[i].name;
|
|
667
|
-
let videoDiv = document.getElementById(videoId);
|
|
668
|
-
let videoWidth = videoDiv.videoWidth;
|
|
669
|
-
let videoHeight = videoDiv.videoHeight;
|
|
670
|
-
let newVideoWidth = 640;
|
|
671
|
-
let newVideoHeight = 360;
|
|
672
|
-
if (videoHeight * 640 / videoWidth > 360) {
|
|
673
|
-
newVideoWidth = videoWidth * 360 / videoHeight;
|
|
674
|
-
} else {
|
|
675
|
-
newVideoHeight = videoHeight * 640 / videoWidth;
|
|
676
|
-
}
|
|
677
689
|
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
}
|
|
699
|
-
}
|
|
700
|
-
cobj.strokeText(str, 70, 360 * (i + 1) - 20);
|
|
701
|
-
cobj.stroke();
|
|
702
|
-
//左边框
|
|
703
|
-
cobj.beginPath();
|
|
704
|
-
cobj.moveTo(0, 0);
|
|
705
|
-
cobj.lineTo(0, 360 * list.length);
|
|
706
|
-
cobj.closePath(); //闭合路径
|
|
707
|
-
cobj.lineWidth = 5; //线的边框为10像素
|
|
708
|
-
cobj.strokeStyle = '#d9363e';
|
|
709
|
-
cobj.stroke(); //绘制定义的图形
|
|
710
|
-
|
|
711
|
-
//下边框
|
|
712
|
-
cobj.beginPath();
|
|
713
|
-
cobj.moveTo(0, 0);
|
|
714
|
-
cobj.lineTo(640, 0);
|
|
715
|
-
cobj.closePath(); //闭合路径
|
|
716
|
-
cobj.lineWidth = 5; //线的边框为10像素
|
|
717
|
-
cobj.strokeStyle = '#d9363e';
|
|
718
|
-
cobj.stroke(); //绘制定义的图形
|
|
719
|
-
|
|
720
|
-
//右边框
|
|
721
|
-
cobj.beginPath();
|
|
722
|
-
cobj.moveTo(640, 360 * list.length);
|
|
723
|
-
cobj.lineTo(640, 0);
|
|
724
|
-
cobj.closePath(); //闭合路径
|
|
725
|
-
cobj.lineWidth = 5; //线的边框为10像素
|
|
726
|
-
cobj.strokeStyle = '#d9363e';
|
|
727
|
-
cobj.stroke(); //绘制定义的图形
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
//上边框
|
|
731
|
-
cobj.beginPath();
|
|
732
|
-
cobj.moveTo(0, 360 * list.length);
|
|
733
|
-
cobj.lineTo(640, 360 * list.length);
|
|
734
|
-
cobj.closePath(); //闭合路径
|
|
735
|
-
cobj.lineWidth = 5; //线的边框为10像素
|
|
736
|
-
cobj.strokeStyle = '#d9363e';
|
|
737
|
-
cobj.stroke(); //绘制定义的图形
|
|
738
|
-
|
|
739
|
-
// 绘制话筒图标
|
|
740
|
-
let microphoneSize = 50
|
|
741
|
-
var img = document.getElementById("icon_huatong");
|
|
742
|
-
var img1 = document.getElementById("icon_huatong_close");
|
|
743
|
-
if(this.state[list[i].voice]) {
|
|
744
|
-
cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
|
|
745
|
-
} else {
|
|
746
|
-
cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
|
|
747
|
-
|
|
748
|
-
// 绘制实时音量
|
|
749
|
-
let sid = document.getElementById(list[i].name).name
|
|
750
|
-
let analyser = this.state.analyserData.get(sid)
|
|
751
|
-
aou(analyser)
|
|
752
|
-
// let sid = document.getElementById(list[i].name).name
|
|
753
|
-
// let stream = this.test_controller.GetMediaInfo(sid).audio_
|
|
754
|
-
// let acc = new AudioContext()
|
|
755
|
-
// let mic = acc.createMediaStreamSource(stream)
|
|
756
|
-
// let analyser = acc.createAnalyser()
|
|
757
|
-
// analyser.fftSize = 256
|
|
758
|
-
// mic.connect(analyser)
|
|
759
|
-
// aou(analyser)
|
|
760
|
-
// let microphoneSize = 50
|
|
761
|
-
// var img = document.getElementById("icon_huatong");
|
|
762
|
-
// cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
|
|
763
|
-
function aou(analyser){
|
|
764
|
-
let dataArray = new Uint8Array(analyser.frequencyBinCount);
|
|
765
|
-
analyser.getByteFrequencyData(dataArray);
|
|
766
|
-
let step = Math.round(dataArray.length / 60); //采样步长
|
|
767
|
-
// 以画布左上角为坐标原点
|
|
768
|
-
let drawArea = {
|
|
769
|
-
x1: 28/50 * microphoneSize + 10, // 波动范围右下角的点坐标
|
|
770
|
-
y1: 25/50 * microphoneSize + 360 * (i + 1) - 60,
|
|
771
|
-
x2: 22/50 * microphoneSize + 10, // 波动范围左上角的点坐标
|
|
772
|
-
y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
|
|
690
|
+
cobj.drawImage(videoDiv, (640 - newVideoWidth) / 2, 360 * i, newVideoWidth, newVideoHeight);
|
|
691
|
+
cobj.beginPath();
|
|
692
|
+
cobj.strokeStyle = this.props.titleColor;
|
|
693
|
+
cobj.fillStyle = this.props.titleBackground;
|
|
694
|
+
cobj.fillRect(0, 360 * (i + 1) - 60, 300, 60)
|
|
695
|
+
cobj.fill();
|
|
696
|
+
cobj.stroke();
|
|
697
|
+
cobj.beginPath();
|
|
698
|
+
cobj.font = "28px auto";
|
|
699
|
+
cobj.textAlign = 'left';
|
|
700
|
+
cobj.lineWidth = 1;
|
|
701
|
+
// 文字
|
|
702
|
+
let str = list[i].title
|
|
703
|
+
for (let k = 0; k < str.length; k++){
|
|
704
|
+
// console.log(str.substring(0,k+1))
|
|
705
|
+
// console.log(cobj.measureText(str.substring(0,k+1)).width)
|
|
706
|
+
if (cobj.measureText(str.substring(0,k+1)).width>210){
|
|
707
|
+
str = str.substring(0,k-2)
|
|
708
|
+
str += '...'
|
|
709
|
+
break;
|
|
773
710
|
}
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
711
|
+
}
|
|
712
|
+
cobj.strokeText(str, 70, 360 * (i + 1) - 20);
|
|
713
|
+
cobj.stroke();
|
|
714
|
+
//左边框
|
|
715
|
+
cobj.beginPath();
|
|
716
|
+
cobj.moveTo(0, 0);
|
|
717
|
+
cobj.lineTo(0, 360 * list.length);
|
|
718
|
+
cobj.closePath(); //闭合路径
|
|
719
|
+
cobj.lineWidth = 5; //线的边框为10像素
|
|
720
|
+
cobj.strokeStyle = '#d9363e';
|
|
721
|
+
cobj.stroke(); //绘制定义的图形
|
|
722
|
+
|
|
723
|
+
//下边框
|
|
724
|
+
cobj.beginPath();
|
|
725
|
+
cobj.moveTo(0, 0);
|
|
726
|
+
cobj.lineTo(640, 0);
|
|
727
|
+
cobj.closePath(); //闭合路径
|
|
728
|
+
cobj.lineWidth = 5; //线的边框为10像素
|
|
729
|
+
cobj.strokeStyle = '#d9363e';
|
|
730
|
+
cobj.stroke(); //绘制定义的图形
|
|
731
|
+
|
|
732
|
+
//右边框
|
|
733
|
+
cobj.beginPath();
|
|
734
|
+
cobj.moveTo(640, 360 * list.length);
|
|
735
|
+
cobj.lineTo(640, 0);
|
|
736
|
+
cobj.closePath(); //闭合路径
|
|
737
|
+
cobj.lineWidth = 5; //线的边框为10像素
|
|
738
|
+
cobj.strokeStyle = '#d9363e';
|
|
739
|
+
cobj.stroke(); //绘制定义的图形
|
|
740
|
+
|
|
741
|
+
|
|
742
|
+
//上边框
|
|
743
|
+
cobj.beginPath();
|
|
744
|
+
cobj.moveTo(0, 360 * list.length);
|
|
745
|
+
cobj.lineTo(640, 360 * list.length);
|
|
746
|
+
cobj.closePath(); //闭合路径
|
|
747
|
+
cobj.lineWidth = 5; //线的边框为10像素
|
|
748
|
+
cobj.strokeStyle = '#d9363e';
|
|
749
|
+
cobj.stroke(); //绘制定义的图形
|
|
750
|
+
|
|
751
|
+
// 绘制话筒图标
|
|
752
|
+
let microphoneSize = 50
|
|
753
|
+
var img = document.getElementById("icon_huatong");
|
|
754
|
+
var img1 = document.getElementById("icon_huatong_close");
|
|
755
|
+
if(this.state[list[i].voice]) {
|
|
756
|
+
cobj.drawImage(img1, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
|
|
757
|
+
} else {
|
|
758
|
+
cobj.drawImage(img, 10, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
|
|
759
|
+
|
|
760
|
+
// 绘制实时音量
|
|
761
|
+
let sid = document.getElementById(list[i].name).name
|
|
762
|
+
let analyser = this.state.analyserData.get(sid)
|
|
763
|
+
aou(analyser)
|
|
764
|
+
// let sid = document.getElementById(list[i].name).name
|
|
765
|
+
// let stream = this.test_controller.GetMediaInfo(sid).audio_
|
|
766
|
+
// let acc = new AudioContext()
|
|
767
|
+
// let mic = acc.createMediaStreamSource(stream)
|
|
768
|
+
// let analyser = acc.createAnalyser()
|
|
769
|
+
// analyser.fftSize = 256
|
|
770
|
+
// mic.connect(analyser)
|
|
771
|
+
// aou(analyser)
|
|
772
|
+
// let microphoneSize = 50
|
|
773
|
+
// var img = document.getElementById("icon_huatong");
|
|
774
|
+
// cobj.drawImage(img, 600, 360 * (i + 1) - 60, microphoneSize, microphoneSize);
|
|
775
|
+
function aou(analyser){
|
|
776
|
+
if(analyser) {
|
|
777
|
+
let dataArray = new Uint8Array(analyser.frequencyBinCount);
|
|
778
|
+
analyser.getByteFrequencyData(dataArray);
|
|
779
|
+
let step = Math.round(dataArray.length / 60); //采样步长
|
|
780
|
+
// 以画布左上角为坐标原点
|
|
781
|
+
let drawArea = {
|
|
782
|
+
x1: 28/50 * microphoneSize + 10, // 波动范围右下角的点坐标
|
|
783
|
+
y1: 25/50 * microphoneSize + 360 * (i + 1) - 60,
|
|
784
|
+
x2: 22/50 * microphoneSize + 10, // 波动范围左上角的点坐标
|
|
785
|
+
y2: 10/50 * microphoneSize + 360 * (i + 1) - 60,
|
|
790
786
|
}
|
|
791
787
|
|
|
788
|
+
|
|
789
|
+
for (var j = 0; j < 40; j++) {
|
|
790
|
+
let energy = (dataArray[step * j] / 256.0) * 80;
|
|
791
|
+
cobj.beginPath();
|
|
792
|
+
cobj.fillStyle = "#0AE544";
|
|
793
|
+
const { x1,y1,x2,y2} = drawArea
|
|
794
|
+
let width = x1-x2;
|
|
795
|
+
let height = (energy>20?(energy-20):0) * (y1 - y2 ) / 70
|
|
796
|
+
let startX = x2 // 绘制起始点x
|
|
797
|
+
let startY = y1 - height // 绘制起始点y
|
|
798
|
+
cobj.fillRect(startX, startY, width, height )
|
|
799
|
+
}
|
|
800
|
+
requestAnimationFrame(aou.bind(this, analyser));
|
|
792
801
|
}
|
|
793
|
-
}, 100);
|
|
794
|
-
const captureStream = canvas.captureStream();
|
|
795
|
-
const mix_stream = new MediaStream(captureStream);
|
|
796
|
-
pictureInPictureVideo = document.getElementById('mixedvideo');
|
|
797
|
-
pictureInPictureVideo.srcObject = mix_stream;
|
|
798
|
-
pictureInPictureVideo.onloadedmetadata = () => {
|
|
799
|
-
pictureInPictureVideo.requestPictureInPicture();
|
|
800
|
-
};
|
|
801
|
-
}
|
|
802
802
|
|
|
803
803
|
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
}
|
|
808
|
+
}, 100);
|
|
809
|
+
const captureStream = canvas.captureStream();
|
|
810
|
+
const mix_stream = new MediaStream(captureStream);
|
|
811
|
+
pictureInPictureVideo = document.getElementById('mixedvideo');
|
|
812
|
+
pictureInPictureVideo.srcObject = mix_stream;
|
|
813
|
+
pictureInPictureVideo.onloadedmetadata = () => {
|
|
814
|
+
pictureInPictureVideo.requestPictureInPicture();
|
|
815
|
+
};
|
|
812
816
|
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
817
|
+
pictureInPictureVideo.addEventListener('enterpictureinpicture', (event) => {
|
|
818
|
+
//可获取画中画窗口的一些数据,如宽高等
|
|
819
|
+
pictureInPictureVideo.style.display = 'block';
|
|
820
|
+
pictureInPictureVideo.play();
|
|
821
|
+
this.setState({
|
|
822
|
+
isPictureInPicture: true
|
|
823
|
+
})
|
|
824
|
+
});
|
|
825
|
+
|
|
826
|
+
pictureInPictureVideo.addEventListener('leavepictureinpicture', (event) => {
|
|
827
|
+
pictureInPictureVideo.srcObject = null;
|
|
828
|
+
pictureInPictureVideo.style.display = "none";
|
|
829
|
+
clearInterval(interval);
|
|
830
|
+
this.setState({
|
|
831
|
+
isPictureInPicture: false
|
|
832
|
+
})
|
|
833
|
+
});
|
|
834
|
+
}
|
|
823
835
|
roomCallBack = (type, manege,code) => {
|
|
824
836
|
if (this.state.sessionId) {
|
|
825
837
|
this.props.joinRoomCallback({
|
|
@@ -1316,6 +1328,27 @@ class Video extends Component {
|
|
|
1316
1328
|
'tellerId': this.props.tellerAccount
|
|
1317
1329
|
})
|
|
1318
1330
|
});
|
|
1331
|
+
}
|
|
1332
|
+
if(sid == document.getElementById('publish_video1').name) {
|
|
1333
|
+
this.timer = setInterval(
|
|
1334
|
+
() => {
|
|
1335
|
+
if(!this.state.voiceStatue) {
|
|
1336
|
+
callNimIM('sendCustomCmdMsg', {
|
|
1337
|
+
customId: this.state.imRoomId,
|
|
1338
|
+
content: JSON.stringify({
|
|
1339
|
+
'typeId': 3200,
|
|
1340
|
+
'decibelValue': this.state.analyserHeight.get(sid).toFixed(2),
|
|
1341
|
+
"data": {
|
|
1342
|
+
'sessionId': this.state.sessionId,
|
|
1343
|
+
'userId': this.props.tellerAccount
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1346
|
+
})
|
|
1347
|
+
});
|
|
1348
|
+
}
|
|
1349
|
+
},
|
|
1350
|
+
1000
|
|
1351
|
+
);
|
|
1319
1352
|
}
|
|
1320
1353
|
};
|
|
1321
1354
|
// 发布媒体流失败
|
|
@@ -1839,6 +1872,8 @@ class Video extends Component {
|
|
|
1839
1872
|
voiceVideoTwelve: false
|
|
1840
1873
|
})
|
|
1841
1874
|
}
|
|
1875
|
+
this.state.analyserData.delete(sid)
|
|
1876
|
+
this.pictureInPicture('Refresh')
|
|
1842
1877
|
};
|
|
1843
1878
|
// 推送“取消发布”给与会者
|
|
1844
1879
|
this.test_controller.OnUnPublish = (feed) => {
|
|
@@ -2145,6 +2180,13 @@ class Video extends Component {
|
|
|
2145
2180
|
let startX = x2 // 绘制起始点x
|
|
2146
2181
|
let startY = y1 - height // 绘制起始点y
|
|
2147
2182
|
ctx.fillRect(startX, startY, width, height)
|
|
2183
|
+
if(document.getElementById('publish_video1').name == sid) {
|
|
2184
|
+
this.state.analyserHeight.set(sid,energy/80)
|
|
2185
|
+
this.setState({
|
|
2186
|
+
analyserHeight: this.state.analyserHeight
|
|
2187
|
+
})
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2148
2190
|
}
|
|
2149
2191
|
requestAnimationFrame(this.test_controller.OnVolumeAnalyser.bind(this, sid, analyser));
|
|
2150
2192
|
|
|
@@ -2217,18 +2259,46 @@ class Video extends Component {
|
|
|
2217
2259
|
if (result.code == 200 && result.data.roomStatus == 1) {
|
|
2218
2260
|
this.addToScript()
|
|
2219
2261
|
} else {
|
|
2220
|
-
this.
|
|
2221
|
-
this.props.
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2262
|
+
this.props.sessionId = ''
|
|
2263
|
+
this.props.roomId = ''
|
|
2264
|
+
this.props.mtoken = ''
|
|
2265
|
+
this.props.imRoomId = ''
|
|
2266
|
+
this.setState({
|
|
2267
|
+
channelId: '',
|
|
2268
|
+
rtoken: '',
|
|
2269
|
+
sessionId: '',
|
|
2270
|
+
imRoomId: ''
|
|
2271
|
+
});
|
|
2272
|
+
this.addToScript()
|
|
2273
|
+
// this.setState({
|
|
2274
|
+
// sessionType: false
|
|
2275
|
+
// })
|
|
2276
|
+
// this.messageClick('当前房间状态异常','error')
|
|
2277
|
+
// this.props.onLeaveRoom({
|
|
2278
|
+
// code: LEAVE_TYPE.ROOM_DESTROYED,
|
|
2279
|
+
// errMsg: '当前房间状态异常'
|
|
2280
|
+
// })
|
|
2225
2281
|
}
|
|
2226
2282
|
} catch (err) {
|
|
2227
|
-
this.
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2283
|
+
this.props.sessionId = ''
|
|
2284
|
+
this.props.roomId = ''
|
|
2285
|
+
this.props.mtoken = ''
|
|
2286
|
+
this.props.imRoomId = ''
|
|
2287
|
+
this.setState({
|
|
2288
|
+
channelId: '',
|
|
2289
|
+
rtoken: '',
|
|
2290
|
+
sessionId: '',
|
|
2291
|
+
imRoomId: ''
|
|
2292
|
+
});
|
|
2293
|
+
this.addToScript()
|
|
2294
|
+
// this.setState({
|
|
2295
|
+
// sessionType: false
|
|
2296
|
+
// })
|
|
2297
|
+
// this.messageClick('当前房间状态异常','error')
|
|
2298
|
+
// this.props.onLeaveRoom({
|
|
2299
|
+
// code: LEAVE_TYPE.ROOM_DESTROYED,
|
|
2300
|
+
// errMsg: '当前房间状态异常'
|
|
2301
|
+
// })
|
|
2232
2302
|
}
|
|
2233
2303
|
}
|
|
2234
2304
|
addToScript = () => {
|
|
@@ -2319,6 +2389,7 @@ class Video extends Component {
|
|
|
2319
2389
|
return
|
|
2320
2390
|
}
|
|
2321
2391
|
this.cancel = ''
|
|
2392
|
+
this.timer && clearInterval(this.timer);
|
|
2322
2393
|
}
|
|
2323
2394
|
componentWillMount() {
|
|
2324
2395
|
if (this.props.sessionId) {
|
|
@@ -2820,10 +2891,20 @@ class Video extends Component {
|
|
|
2820
2891
|
videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
|
|
2821
2892
|
})
|
|
2822
2893
|
}
|
|
2894
|
+
this.pictureInPicture('Refresh')
|
|
2823
2895
|
} catch (err) {
|
|
2824
2896
|
|
|
2825
2897
|
}
|
|
2826
2898
|
}
|
|
2899
|
+
linkClick=()=>{
|
|
2900
|
+
let inp = document.createElement('input')
|
|
2901
|
+
inp.value = this.state.linkData
|
|
2902
|
+
document.body.appendChild(inp)
|
|
2903
|
+
inp.select() // 选择对象;
|
|
2904
|
+
console.log(inp.value, '复制到的内容')
|
|
2905
|
+
document.execCommand('Copy') // 执行浏览器复制命令
|
|
2906
|
+
inp.remove()
|
|
2907
|
+
}
|
|
2827
2908
|
queryStaff = async () => {
|
|
2828
2909
|
if(!this.state.employeeNumber) return
|
|
2829
2910
|
try {
|
|
@@ -2838,7 +2919,7 @@ class Video extends Component {
|
|
|
2838
2919
|
})
|
|
2839
2920
|
if(result.data.staffName){
|
|
2840
2921
|
this.setState({
|
|
2841
|
-
linkData:
|
|
2922
|
+
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)
|
|
2842
2923
|
})
|
|
2843
2924
|
}
|
|
2844
2925
|
} else {
|
|
@@ -3555,10 +3636,10 @@ class Video extends Component {
|
|
|
3555
3636
|
<div key='invitation'>
|
|
3556
3637
|
<Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
|
|
3557
3638
|
{
|
|
3558
|
-
this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}
|
|
3639
|
+
this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}>邮件发送会议邀请</Button>
|
|
3559
3640
|
}
|
|
3560
3641
|
{
|
|
3561
|
-
!this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger
|
|
3642
|
+
!this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger >邮件发送会议邀请</Button>
|
|
3562
3643
|
}
|
|
3563
3644
|
</div>
|
|
3564
3645
|
]}>
|
|
@@ -3571,9 +3652,12 @@ class Video extends Component {
|
|
|
3571
3652
|
<div className="invitationDiv">
|
|
3572
3653
|
<span className="modalSpan"> 姓名:</span><span>{this.state.employeeName}</span>
|
|
3573
3654
|
</div>
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3655
|
+
{
|
|
3656
|
+
this.state.employeeName &&<div className='invitationDiv'>
|
|
3657
|
+
<span className="modalSpan"> </span><Button className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制会议链接</Button>
|
|
3658
|
+
</div>
|
|
3659
|
+
}
|
|
3660
|
+
|
|
3577
3661
|
</div>
|
|
3578
3662
|
{
|
|
3579
3663
|
this.state.employeeError && <div className='errorClassInvitation'>
|
|
@@ -3641,9 +3725,9 @@ Video.defaultProps = {
|
|
|
3641
3725
|
menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
|
|
3642
3726
|
customLeaveRoom: '客户离开房间',
|
|
3643
3727
|
meetingInfo: {
|
|
3644
|
-
title: '
|
|
3645
|
-
host: '
|
|
3646
|
-
customers: ['
|
|
3728
|
+
title: '--',
|
|
3729
|
+
host: '--',
|
|
3730
|
+
customers: ['--']
|
|
3647
3731
|
}
|
|
3648
3732
|
}
|
|
3649
3733
|
export default Video
|