From f44044e0bdd54e311314477d2c5ab4e214f0e70d Mon Sep 17 00:00:00 2001 From: tdg930622 <51816549+tdg930622@users.noreply.github.com> Date: Thu, 9 Jan 2025 17:50:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=A7=86=E9=A2=91=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/VideoInvitation.vue | 219 ++++++++++++++++++ .../components/VideoRoom-copy.vue | 102 -------- .../mediation-page/components/VideoRoom.vue | 90 ++++++- .../components/caseVideoReservationDialog.vue | 4 +- 4 files changed, 300 insertions(+), 115 deletions(-) create mode 100644 src/pages/mediation-page/components/VideoInvitation.vue delete mode 100644 src/pages/mediation-page/components/VideoRoom-copy.vue diff --git a/src/pages/mediation-page/components/VideoInvitation.vue b/src/pages/mediation-page/components/VideoInvitation.vue new file mode 100644 index 0000000..021496a --- /dev/null +++ b/src/pages/mediation-page/components/VideoInvitation.vue @@ -0,0 +1,219 @@ + + + + \ No newline at end of file diff --git a/src/pages/mediation-page/components/VideoRoom-copy.vue b/src/pages/mediation-page/components/VideoRoom-copy.vue deleted file mode 100644 index 70ce844..0000000 --- a/src/pages/mediation-page/components/VideoRoom-copy.vue +++ /dev/null @@ -1,102 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/pages/mediation-page/components/VideoRoom.vue b/src/pages/mediation-page/components/VideoRoom.vue index 76a47c2..c3d955e 100644 --- a/src/pages/mediation-page/components/VideoRoom.vue +++ b/src/pages/mediation-page/components/VideoRoom.vue @@ -1,7 +1,10 @@ @@ -64,6 +70,9 @@ import TRTC from 'trtc-sdk-v5'; import videoTelephone from "@/services/videoTelephone"; export default { + components: { + VideoInvitation: () => import('./VideoInvitation'),//邀请视频 + }, props: { eventDialog: { type: Object, @@ -76,6 +85,7 @@ export default { return { zoomActive: true,// true 放大状态、false 缩小状态 + caseId: '', arrPersonnel: [], roomId: 0, sdkAppId: 0, @@ -91,7 +101,13 @@ export default { personnelNumber: 1, remoteUsersViews: [], - videoRecordingSts: false + audioRecordingSts: true, // 全部音频状态 true开启 false关闭 + videoRecordingSts: false, // 录制状态 true开启 false关闭 + startTime: null, + timerId: null, + duration: 0, // 记录录制时间（秒） + + InviteDialog: null, // 邀请 }; }, computed: { @@ -105,7 +121,13 @@ export default { const itemsPerRow = 4; const rowHeight = 35.5; const numberOfRows = Math.ceil(this.personnelNumber / itemsPerRow); - return `${numberOfRows * rowHeight + 35.5}px`; + return `${numberOfRows * rowHeight + 37.5}px`; + }, + formattedTime() { + const hours = Math.floor(this.duration / 3600); + const minutes = Math.floor((this.duration % 3600) / 60); + const seconds = this.duration % 60; + return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(Math.floor(seconds)).padStart(2, '0')}`; } }, mounted() { @@ -123,7 +145,7 @@ export default { this.$nextTick(() => { if (this.$refs.videoRoom) { - console.log(this.defaultTop, '---this.defaultTop') + console.log(this.defaultTop, this.personnelNumber, '---this.defaultTop') this.$refs.videoRoom.style.left = this.zoomActive ? this.zoomedStyles.left : '157px'; this.$refs.videoRoom.style.top = this.zoomActive ? this.zoomedStyles.top : this.defaultTop; } @@ -134,7 +156,8 @@ export default { getVideoDetail() { videoTelephone.videoDetail({id: this.eventDialog.id}).then((res) => { // console.log(res, '---videoDetail') - this.arrPersonnel = [...res.litigants, ...res.members] + this.caseId = res.caseId; + this.arrPersonnel = [...res.litigants, ...res.members]; }); }, // 获取房间参数 @@ -344,7 +367,7 @@ export default { console.log(event, '---event远端退出房间') const { streamType } = event; this.trtc.stopRemoteVideo({ userId: event.userId, streamType }); - this.personnelNumber--; + if (this.personnelNumber>1){this.personnelNumber--;} this.remoteUsersViews = this.remoteUsersViews.filter(item => item.userId !== event.userId); }, // 接收远端消息 @@ -356,6 +379,16 @@ export default { async handleOffRemoteAudio(userId) { console.log(userId, '---关闭远端声音') try { + if (!userId){ + this.audioRecordingSts = false; + this.remoteUsersViews = this.remoteUsersViews.map(item => { + item.microphone = false; + return { + ...item, + microphone: false + } + }) + } let jsonString = JSON.stringify({behavior: 'offAudio', userId: userId}); let encoder = new TextEncoder(); let encoded = encoder.encode(jsonString).buffer; @@ -376,6 +409,16 @@ export default { async handleOnRemoteAudio(userId) { console.log(userId, '---开启远端声音') try { + if (!userId){ + this.audioRecordingSts = true; + this.remoteUsersViews = this.remoteUsersViews.map(item => { + item.microphone = true; + return { + ...item, + microphone: true + } + }) + } let jsonString = JSON.stringify({behavior: 'onAudio', userId: userId}); let encoder = new TextEncoder(); let encoded = encoder.encode(jsonString).buffer; @@ -404,15 +447,34 @@ export default { }, // 录制 + updateTimerDisplay() { + if (!this.startTime) return; + const currentTime = performance.now(); + this.duration = Math.floor((currentTime - this.startTime) / 1000); // 将毫秒转换为秒 + }, handleVideoRecording(){ if (this.videoRecordingSts){ + // clearInterval(this.timerId); + // this.timerId = null; + // this.videoRecordingSts = false; + // return videoTelephone.stopRecord({id: this.eventDialog.id}).then((res) => { console.log('---视频已停止录制') + clearInterval(this.timerId); + this.timerId = null; this.videoRecordingSts = false; }); }else { + // this.startTime = performance.now(); + // this.updateTimerDisplay(); // 立即更新一次显示 + // this.timerId = setInterval(() => this.updateTimerDisplay(), 1000); // 每秒更新一次 + // this.videoRecordingSts = true; + // return videoTelephone.startRecord({id: this.eventDialog.id}).then((res) => { console.log('---视频已开始录制') + this.startTime = performance.now(); + this.updateTimerDisplay(); // 立即更新一次显示 + this.timerId = setInterval(() => this.updateTimerDisplay(), 1000); // 每秒更新一次 this.videoRecordingSts = true; }); } @@ -428,12 +490,18 @@ export default { let data = {id:this.eventDialog.id} // if (this.videoRecordingSts){ // this.handleVideoRecording(); - // } + // } // 结束录制 videoTelephone.stopMediate(data).then((res) => { this.handleClose(); + this.$parent.visiblePopover = null }); }).catch(() => {}); } + }, + beforeDestroy() { + if (this.timerId) { + clearInterval(this.timerId); + } } }; diff --git a/src/pages/mediation-page/components/caseVideoReservationDialog.vue b/src/pages/mediation-page/components/caseVideoReservationDialog.vue index ed1fc65..44ea3c1 100644 --- a/src/pages/mediation-page/components/caseVideoReservationDialog.vue +++ b/src/pages/mediation-page/components/caseVideoReservationDialog.vue @@ -27,7 +27,7 @@
{{item.content}}
@@ -37,7 +37,7 @@