优化音视频通话

pages/room/room.nvue

@@ -1,5 +1,15 @@
 <template>
 	<view class="content">
+		<!-- 顶部栏 -->
+		<view class="top-bar">
+			<view class="top-left">
+				<!-- 通话时间显示  -->
+				<view v-if="callState === 'dialogue'" class="call-time-container">
+					<uni-icons type="sound" size="16" color="#fff"></uni-icons>
+					<text class="call-time">{{ formattedTime }}</text>
+				</view>
+			</view>
+		</view>
 		<!-- 单人视频 -->
 		<view v-if="users.length <= 2">
 			<RongCloud-Call-RCUniCallView
@@ -12,7 +22,7 @@
 			></RongCloud-Call-RCUniCallView>
 			<RongCloud-Call-RCUniCallView
 				class="smallVideoView"
-				:style="{ width: 200 + 'upx', height: 200 + 'upx' }"
+				:style="{ width: 400 + 'upx', height: 400 + 'upx' }"
 				ref="smallVideoView"
 			></RongCloud-Call-RCUniCallView>
 		</view>
@@ -111,7 +121,11 @@
 				ruddyVal: 0,
 				buffingVal: 0,
 				brightnessVal: 5,
-				isChecked: false
+				isChecked: false,
+				formattedTime: "00:00",
+				callState: "123",
+				callDuration: 0,
+				timer: null
 			}
 		},
 		onLoad: function () {
@@ -150,6 +164,7 @@
 		},  
 		onUnload() {
 			call.hangup()
+			this.stopTimer()
 		},
 		onHide() {
 			const session = call.getCurrentCallSession()
@@ -158,8 +173,31 @@
 			}
 			uni.$off('OnCallDisconnected')
 			uni.$off('OnCallConnected')
+			this.stopTimer()
 		},
 		methods: {
+			/** 开始通话计时 */
+			startTimer(){
+				this.stopTimer() // 先停止之前的计时器
+				this.timer = setInterval(() => {
+					this.callDuration++
+					this.formatTime()
+				}, 1000)
+			},
+			
+			/** 停止通话计时 */
+			stopTimer(){
+				if (this.timer) {
+					clearInterval(this.timer)
+					this.timer = null
+				}
+			},
+			/** 格式化时间显示 */
+			formatTime(){
+				const minutes = Math.floor(this.callDuration / 60)
+				const seconds = this.callDuration % 60
+				this.formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
+			},
 			changeMediaType() {
 				if (this.mediaTypeCur == 'video') {
 					this.mediaTypeCur = 'audio'
@@ -369,6 +407,8 @@
 			},
 			
 			processCallSession(){
+				this.callState = "dialogue"
+				this.startTimer()
 				// call.enableSpeaker(true)
 				this.mediaTypeCur = this.mediaType
 				this.currentCallSession = call.getCurrentCallSession()
@@ -473,7 +513,49 @@
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+	.top-bar {
+		position: fixed;
+		top: 30rpx;
+		left: 0;
+		width: 750rpx;
+		height: 120rpx;
+		flex-direction: row;
+		align-items: left;
+		padding-left: 40rpx;
+		padding-right: 40rpx;
+		padding-top: var(--safe-area-inset-top, 0);
+		z-index: 99;
+		box-sizing: border-box;
+		
+		.top-left {
+			width: 140rpx;
+			height: 120rpx;
+			justify-content: center;
+			align-items: left;
+			
+			.call-time-container {
+				flex-direction: row;
+				align-items: center;
+				justify-content: center;
+				background-color: rgba(255, 255, 255, 0.15);
+				padding-left: 20rpx;
+				padding-right: 20rpx;
+				padding-top: 8rpx;
+				padding-bottom: 8rpx;
+				border-radius: 30rpx;
+				/* nvue不支持backdrop-filter，可以改用透明度或移除 */
+				/* backdrop-filter: blur(10px); */
+			}
+			
+			.call-time {
+				font-size: 28rpx;
+				color: #ffffff;
+				font-weight: 500;
+				margin-left: 10rpx;
+			}
+		}
+	}
 	.nav-box {
 		position: fixed;
 		left: 0;