react_hsbc_teller 0.7.5 → 0.7.9
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.
|
@@ -72,10 +72,10 @@ class Video extends Component {
|
|
|
72
72
|
workSpaceId: '',
|
|
73
73
|
bizName: '',
|
|
74
74
|
appId: '',
|
|
75
|
-
channelId:
|
|
76
|
-
rtoken:
|
|
77
|
-
sessionId:
|
|
78
|
-
imRoomId:
|
|
75
|
+
channelId: '',
|
|
76
|
+
rtoken: '',
|
|
77
|
+
sessionId: '',
|
|
78
|
+
imRoomId: '',
|
|
79
79
|
isPictureInPicture: false,
|
|
80
80
|
clickedFacial: false,
|
|
81
81
|
clickedOcr: false,
|
|
@@ -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,38 @@ class Video extends Component {
|
|
|
2217
2259
|
if (result.code == 200 && result.data.roomStatus == 1) {
|
|
2218
2260
|
this.addToScript()
|
|
2219
2261
|
} else {
|
|
2220
|
-
this.
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2262
|
+
this.setState({
|
|
2263
|
+
channelId: '',
|
|
2264
|
+
rtoken: '',
|
|
2265
|
+
sessionId: '',
|
|
2266
|
+
imRoomId: ''
|
|
2267
|
+
});
|
|
2268
|
+
this.addToScript()
|
|
2269
|
+
// this.setState({
|
|
2270
|
+
// sessionType: false
|
|
2271
|
+
// })
|
|
2272
|
+
// this.messageClick('当前房间状态异常','error')
|
|
2273
|
+
// this.props.onLeaveRoom({
|
|
2274
|
+
// code: LEAVE_TYPE.ROOM_DESTROYED,
|
|
2275
|
+
// errMsg: '当前房间状态异常'
|
|
2276
|
+
// })
|
|
2225
2277
|
}
|
|
2226
2278
|
} catch (err) {
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2279
|
+
this.setState({
|
|
2280
|
+
channelId: '',
|
|
2281
|
+
rtoken: '',
|
|
2282
|
+
sessionId: '',
|
|
2283
|
+
imRoomId: ''
|
|
2284
|
+
});
|
|
2285
|
+
this.addToScript()
|
|
2286
|
+
// this.setState({
|
|
2287
|
+
// sessionType: false
|
|
2288
|
+
// })
|
|
2289
|
+
// this.messageClick('当前房间状态异常','error')
|
|
2290
|
+
// this.props.onLeaveRoom({
|
|
2291
|
+
// code: LEAVE_TYPE.ROOM_DESTROYED,
|
|
2292
|
+
// errMsg: '当前房间状态异常'
|
|
2293
|
+
// })
|
|
2232
2294
|
}
|
|
2233
2295
|
}
|
|
2234
2296
|
addToScript = () => {
|
|
@@ -2319,6 +2381,7 @@ class Video extends Component {
|
|
|
2319
2381
|
return
|
|
2320
2382
|
}
|
|
2321
2383
|
this.cancel = ''
|
|
2384
|
+
this.timer && clearInterval(this.timer);
|
|
2322
2385
|
}
|
|
2323
2386
|
componentWillMount() {
|
|
2324
2387
|
if (this.props.sessionId) {
|
|
@@ -2820,10 +2883,20 @@ class Video extends Component {
|
|
|
2820
2883
|
videoTwelveName: this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId12").innerText).tag == 'VIDEO_SOURCE_SCREEN' ? '共享屏幕' : data ? data : '客户12'
|
|
2821
2884
|
})
|
|
2822
2885
|
}
|
|
2886
|
+
this.pictureInPicture('Refresh')
|
|
2823
2887
|
} catch (err) {
|
|
2824
2888
|
|
|
2825
2889
|
}
|
|
2826
2890
|
}
|
|
2891
|
+
linkClick=()=>{
|
|
2892
|
+
let inp = document.createElement('input')
|
|
2893
|
+
inp.value = this.state.linkData
|
|
2894
|
+
document.body.appendChild(inp)
|
|
2895
|
+
inp.select() // 选择对象;
|
|
2896
|
+
console.log(inp.value, '复制到的内容')
|
|
2897
|
+
document.execCommand('Copy') // 执行浏览器复制命令
|
|
2898
|
+
inp.remove()
|
|
2899
|
+
}
|
|
2827
2900
|
queryStaff = async () => {
|
|
2828
2901
|
if(!this.state.employeeNumber) return
|
|
2829
2902
|
try {
|
|
@@ -3555,10 +3628,10 @@ class Video extends Component {
|
|
|
3555
3628
|
<div key='invitation'>
|
|
3556
3629
|
<Button className="modelButtonCancel" onClick={this.handleCancelInvitation}>取消</Button>
|
|
3557
3630
|
{
|
|
3558
|
-
this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}
|
|
3631
|
+
this.state.employeeName &&<Button className='modelButtonOk'type="primary" danger onClick={this.handleOkInvitation}>邮件发送会议邀请</Button>
|
|
3559
3632
|
}
|
|
3560
3633
|
{
|
|
3561
|
-
!this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger
|
|
3634
|
+
!this.state.employeeName &&<Button className='modelButtonCancelOne' type="primary" danger >邮件发送会议邀请</Button>
|
|
3562
3635
|
}
|
|
3563
3636
|
</div>
|
|
3564
3637
|
]}>
|
|
@@ -3571,9 +3644,12 @@ class Video extends Component {
|
|
|
3571
3644
|
<div className="invitationDiv">
|
|
3572
3645
|
<span className="modalSpan"> 姓名:</span><span>{this.state.employeeName}</span>
|
|
3573
3646
|
</div>
|
|
3574
|
-
|
|
3575
|
-
|
|
3576
|
-
|
|
3647
|
+
{
|
|
3648
|
+
this.state.employeeName &&<div className='invitationDiv'>
|
|
3649
|
+
<span className="modalSpan"> </span><Button className="invitationButton" onClick={this.linkClick}> <img className='invitationImg' src={require("../../assets/img/link.png").default} alt="" />复制会议链接</Button>
|
|
3650
|
+
</div>
|
|
3651
|
+
}
|
|
3652
|
+
|
|
3577
3653
|
</div>
|
|
3578
3654
|
{
|
|
3579
3655
|
this.state.employeeError && <div className='errorClassInvitation'>
|
|
@@ -3641,9 +3717,9 @@ Video.defaultProps = {
|
|
|
3641
3717
|
menus: ['SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP'],
|
|
3642
3718
|
customLeaveRoom: '客户离开房间',
|
|
3643
3719
|
meetingInfo: {
|
|
3644
|
-
title: '
|
|
3645
|
-
host: '
|
|
3646
|
-
customers: ['
|
|
3720
|
+
title: '--',
|
|
3721
|
+
host: '--',
|
|
3722
|
+
customers: ['--']
|
|
3647
3723
|
}
|
|
3648
3724
|
}
|
|
3649
3725
|
export default Video
|