优化音视频通话

2026-02-06 23:56:01 +08:00
parent ea2ef96379
commit 62cde5bc5f
3 changed files with 151 additions and 112 deletions
--- a/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
@@ -1,106 +1,102 @@
 <script setup lang="ts">
-  import ToolbarItemContainer from '../toolbar-item-container/index.vue'
-  import custom from '../../../../assets/icon/telephone-icon.svg'
-  import videoIcon from '../../../../assets/icon/video-icon.svg'
-  import { isUniFrameWork } from '../../../../utils/env'
-  import { computed, ref } from 'vue'
-  import { type IConversationModel } from '@tencentcloud/chat-uikit-engine-lite'
-  import { navigateTo } from '../../../../../utils/router'
-  import TUIChatEngine, {
-    TUIConversationService,
-    TUIFriendService,
-	TUIChatService
-  } from '@tencentcloud/chat-uikit-engine-lite'
+	import ToolbarItemContainer from '../toolbar-item-container/index.vue'
+	import custom from '../../../../assets/icon/telephone-icon.svg'
+	import videoIcon from '../../../../assets/icon/video-icon.svg'
+	import { isUniFrameWork } from '../../../../utils/env'
+	import { computed, ref } from 'vue'
+	import { type IConversationModel } from '@tencentcloud/chat-uikit-engine-lite'
+	import { navigateTo } from '../../../../../utils/router'
+	import TUIChatEngine, {
+		TUIConversationService,
+		TUIFriendService,
+		TUIChatService
+	} from '@tencentcloud/chat-uikit-engine-lite'

-  const props = withDefaults(
-    defineProps<{
-      /** 通话状态： 0 语音 1 视频 */
-      type?: '0' | '1'
-      /** 信息数据 */
-      currentConversation?: IConversationModel
-    }>(),
-    {
-      type: '0',
-      currentConversation: () => ({} as IConversationModel)
-    }
-  )
-
-  /** 语音通话状态 */
-  const isType = computed(() => props.type === '0')
-
-  const evaluateIcon = isType.value ? custom : videoIcon
-
-  const emits = defineEmits(['onDialogPopupShowOrHide'])
-
-  const container = ref()
-  const closeDialog = () => {
-    container?.value?.toggleDialogDisplay(false)
-  }
-
-
-  const onDialogShow = () => {
-    console.log('弹出窗口', props.currentConversation)
-    const data = props.currentConversation.userProfile
-    emits('onDialogPopupShowOrHide', true)
-
-    if (isType.value) {
-		let params ={
-			to: props.currentConversation.conversationID,
-			conversationType: TUIChatEngine.TYPES.CONV_C2C,
-			payload: {
-				text: "拨打语音"
-			}
+	const props = withDefaults(
+		defineProps<{
+			/** 通话状态： 0 语音 1 视频 */
+			type ?: '0' | '1'
+			/** 信息数据 */
+			currentConversation ?: IConversationModel
+		}>(),
+		{
+			type: '0',
+			currentConversation: () => ({} as IConversationModel)
 		}
-		console.log('params: ',params);
-		// TUIChatService.sendTextMessage(params)
-		  navigateTo('/pages/room/incom', {
-			type: 'call',
-			userID: data.userID
-		  })
-    } else {
-		let params ={
-			to: props.currentConversation.conversationID,
-			conversationType: TUIChatEngine.TYPES.CONV_C2C,
-			payload: {
-				text: "拨打视频"
+	)
+
+	/** 语音通话状态 */
+	const isType = computed(() => props.type === '0')
+
+	const evaluateIcon = isType.value ? custom : videoIcon
+
+	const emits = defineEmits(['onDialogPopupShowOrHide'])
+
+	const container = ref()
+	const closeDialog = () => {
+		container?.value?.toggleDialogDisplay(false)
+	}
+
+
+	const onDialogShow = () => {
+		console.log('弹出窗口', props.currentConversation)
+		const data = props.currentConversation.userProfile
+		emits('onDialogPopupShowOrHide', true)
+
+		if (isType.value) {
+			let params = {
+				to: props.currentConversation.conversationID,
+				conversationType: TUIChatEngine.TYPES.CONV_C2C,
+				payload: {
+					text: "拨打语音"
+				}
 			}
+			console.log('params: ', params);
+			// TUIChatService.sendTextMessage(params)
+			navigateTo('/pages/room/incom', {
+				type: 'call',
+				userID: data.userID,
+				mediaType: 'audio',
+				callType: 'out',
+			})
+		} else {
+			let params = {
+				to: props.currentConversation.conversationID,
+				conversationType: TUIChatEngine.TYPES.CONV_C2C,
+				payload: {
+					text: "拨打视频"
+				}
+			}
+			// TUIChatService.sendTextMessage(params)
+			uni.setStorageSync('room-parameters', {
+				callType: 'out',
+				mediaType: 'video',
+				targetId: data.userID,
+				callSelect: 'single',
+			});
+			navigateTo('/pages/room/room')
 		}
-		// TUIChatService.sendTextMessage(params)
-		uni.setStorageSync('room-parameters', {
-			callType: 'out',
-			mediaType: 'video',
-			targetId: data.userID,
-			callSelect: 'single',
-		});
-      navigateTo('/pages/room/room')
-    }
-  }
+	}

-  const onDialogClose = () => {
-    console.log('关闭窗口')
-    emits('onDialogPopupShowOrHide', false)
-  }
+	const onDialogClose = () => {
+		console.log('关闭窗口')
+		emits('onDialogPopupShowOrHide', false)
+	}

-  const onDial = () => {
-    const data = props.currentConversation.userProfile
-    // data.userID
-    // CallLib.enableMicrophone(true)
-    // CallLib.startSingleCall(data.userID, 0, '邀请您进行语音通话')
-  }
+	const onDial = () => {
+		const data = props.currentConversation.userProfile
+		// data.userID
+		// CallLib.enableMicrophone(true)
+		// CallLib.startSingleCall(data.userID, 0, '邀请您进行语音通话')
+	}
 </script>

 <template>
-  <!-- needBottomPopup -->
-  <ToolbarItemContainer
-    ref="container"
-    :iconFile="evaluateIcon"
-    :iconWidth="isUniFrameWork ? '34px' : '20px'"
-    :iconHeight="isUniFrameWork ? '34px' : '20px'"
-    :title="isType ? '语音通话' : '视频通话'"
-    @onDialogShow="onDialogShow"
-    @onDialogClose="onDialogClose"
-  >
-    <!-- <view class="box-index">
+	<!-- needBottomPopup -->
+	<ToolbarItemContainer ref="container" :iconFile="evaluateIcon" :iconWidth="isUniFrameWork ? '34px' : '20px'"
+		:iconHeight="isUniFrameWork ? '34px' : '20px'" :title="isType ? '语音通话' : '视频通话'" @onDialogShow="onDialogShow"
+		@onDialogClose="onDialogClose">
+		<!-- <view class="box-index">
      <view class="top-icon">
        <uni-icons
          type="back"
@@ -134,7 +130,7 @@
        挂点
      </button>
    </view> -->
-  </ToolbarItemContainer>
+	</ToolbarItemContainer>
 </template>

-<style scoped lang="scss" src="./style/index.scss"></style>
+<style scoped lang="scss" src="./style/index.scss"></style>
--- a/pages.json
+++ b/pages.json
@@ -444,14 +444,14 @@
    {
      "path": "pages/room/room",
      "style": {
-        "navigationBarTitleText": "拨打电话",
+        "navigationBarTitleText": "拨打视频",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/room/incom",
      "style": {
-        "navigationBarTitleText": "拨打视频",
+        "navigationBarTitleText": "拨打电话",
        "navigationStyle": "custom"
      }
    },
--- a/pages/room/room.nvue
+++ b/pages/room/room.nvue
@@ -150,24 +150,16 @@
 		},  
 		onUnload() {
 			call.hangup()
-			// this.removeAllListeners()
 		},
 		onHide() {
 			const session = call.getCurrentCallSession()
 			if (session) {
 				call.hangup()
 			}
-			// this.removeAllListeners()
+			uni.$off('OnCallDisconnected')
+			uni.$off('OnCallConnected')
 		},
 		methods: {
-			removeAllListeners(){
-				//移除监听-接收到通话呼入
-				call.removeRemoteUserJoinedListener();
-				// 移除监听-通话已结束
-				call.removeCallDisconnectedListener();
-				// 移除监听-通话出现错误的回调
-				call.removeErrorListener();
-			},
 			changeMediaType() {
 				if (this.mediaTypeCur == 'video') {
 					this.mediaTypeCur = 'audio'
@@ -284,9 +276,9 @@
 			hangup() {
 				this.isSelf = true
 				call.hangup()
-				uni.navigateBack({
-					delta: 1
-				})
+				// uni.navigateBack({
+				// 	delta: 1
+				// })
 			},
 			accept() {
 				call.accept()
@@ -324,12 +316,61 @@
 					)
 				}
 			},
-
 			onCallConnected() {
 				let context = this
 				console.log('oncallconnected接收了')
+				console.log('call: ',call);
+				// 使用 Promise 确保 call 对象完全初始化
+				this.initializeCall(call)
+					.then(() => {
+						this.processCallSession()
+					})
+					.catch(error => {
+						console.error('初始化通话失败:', error)
+					})
+			},
+			async initializeCall(callObj) {
+			    // 等待 call 对象就绪
+			    await this.waitForCallReady(callObj)
+			    
+			    // 设置扬声器
+			    if (callObj.enableSpeaker && typeof callObj.enableSpeaker === 'function') {
+			        try {
+			            callObj.enableSpeaker(true)
+			        } catch (error) {
+			            console.warn('设置扬声器失败:', error)
+			        }
+			    }
+			    
+			    return callObj
+			},
+			
+			waitForCallReady(callObj, timeout = 2000) {
+			    return new Promise((resolve, reject) => {
+			        const startTime = Date.now()
+			        
+			        const check = () => {
+			            const now = Date.now()
+			            
+			            if (callObj && 
+			                callObj.enableSpeaker && 
+			                callObj.getCurrentCallSession &&
+			                typeof callObj.getCurrentCallSession === 'function') {
+			                resolve(callObj)
+			            } else if (now - startTime > timeout) {
+			                reject(new Error('call 对象初始化超时'))
+			            } else {
+			                setTimeout(check, 50)
+			            }
+			        }
+			        
+			        check()
+			    })
+			},
+			
+			processCallSession(){
+				// call.enableSpeaker(true)
 				this.mediaTypeCur = this.mediaType
-				call.enableSpeaker(true)
 				this.currentCallSession = call.getCurrentCallSession()
 				this.callWay = this.currentCallSession.callType
 				this.users = this.currentCallSession.users
@@ -347,6 +388,7 @@
 				) {
 					//视频是两个的时候
 					if (this.currentCallSession.users.length <= 2) {
+						console.log("视频是两个的时候");
 						setTimeout(() => {
 							this.systemInfoSync(
 								this.currentCallSession.mine.userId,
@@ -397,6 +439,7 @@
 					}
 				}
 			},
+			
 			systemInfoSync(userId, ref, isZOrderOnTop) {
 				switch (uni.getSystemInfoSync().platform) {
 					case 'android':