优化音视频通话

2026-02-06 17:56:44 +08:00
parent 3389a8eaa9
commit 946cff6c52
5 changed files with 208 additions and 162 deletions
--- a/TUIKit/components/TUIChat/index.vue
+++ b/TUIKit/components/TUIChat/index.vue
@@ -361,23 +361,8 @@
    )
    currentConversationID.value = conversationID
  }
-
-  // #ifdef APP-PLUS
-  CallLib.init({})
-  CallLib.onCallReceived(res => {
-    console.log(
-      'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>',
-      res.data
-    )
-    if (res.data.targetId) {
-      navigateTo('/pages/room/incom', {
-        type: res.data.extra,
-        userID: res.data.targetId
-      })
-    }
-  })
-
-  // #endif
+	
+	
 </script>

 <style scoped lang="scss" src="./style/index.scss"></style>
--- a/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/call-view/index.vue
@@ -6,6 +6,11 @@
  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<{
@@ -39,11 +44,34 @@
    emits('onDialogPopupShowOrHide', true)

    if (isType.value) {
-      navigateTo('/pages/room/incom', {
-        type: 'call',
-        userID: data.userID
-      })
+		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
+		  })
    } 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')
    }
  }
--- a/pages/room/incom.vue
+++ b/pages/room/incom.vue
@@ -1,118 +1,3 @@
-<script setup>
-  import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
-  import { ref, watch } from 'vue'
-  import { onLoad } from '@dcloudio/uni-app'
-  import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
-  import { useUI } from '../../utils/use-ui'
-  import { navigateBack } from '../../utils/router'
-
-  CallLib.init({})
-  const { showLoading, hideLoading } = useUI()
-  const callBackground = ref('/static/images/public/random2.png')
-  /** 呼叫用户信息 */
-  const callerInfo = ref({})
-  /** 通话状态 */
-  const isRinging = ref(true)
-  /** 控制按钮状态 */
-  const activeBtn = ref(null)
-  /**
-   * 拨打状态
-   * call: 发起呼叫
-   * answer: 接听
-   * dialogue: 对话中
-   */
-  const callState = ref('')
-
-  CallLib.onCallReceived(res => {
-    console.log(
-      'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>',
-      res.data.targetId
-    )
-  })
-
-  CallLib.onCallOutgoing(res => {
-    console.log(
-      '主叫端拨出电话后，通过回调 onCallOutgoing，通知当前 call 的详细信息',
-      res
-    )
-  })
-
-  CallLib.onCallConnected(res => {
-    console.log(res)
-    console.log(
-      'Engine:OnCallConnected=>' +
-        '已建立通话通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息',
-      res
-    )
-  })
-
-  CallLib.onRemoteUserJoined(res => {
-    console.log(
-      'Engine:OnRemoteUserJoined=>' +
-        '主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
-      res.data.userId
-    )
-  })
-
-  /** 挂断电话 */
-  const isDisconnected = ref(true)
-  CallLib.onCallDisconnected(res => {
-    console.log(
-      'Engine:OnCallDisconnected=>' + '挂断成功, 挂断原因=>',
-      res.data.reason
-    )
-    isDisconnected.value = false
-  })
-
-  watch(
-    () => isDisconnected.value,
-    v => {
-			navigateBack()
-    }
-  )
-
-  CallLib.onRemoteUserRinging(res => {
-    console.log(
-      '主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>',
-      res.data.userId
-    )
-  })
-
-  CallLib.onError(res => {
-    console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
-  })
-
-  /** 按钮状态 */
-  const cutFn = show => {
-    if (show) {
-      // 接听电话 dialogue
-      CallLib.enableMicrophone(true)
-      CallLib.accept()
-      callState.value = 'dialogue'
-    } else {
-      //取消接听，返回上一页
-      CallLib.hangup()
-      navigateBack()
-    }
-  }
-
-  onLoad(async e => {
-    callState.value = e.type
-    console.log(e.type)
-    showLoading()
-    const res = await TUIUserService.getUserProfile({
-      userIDList: [e.userID]
-    })
-    hideLoading()
-    callerInfo.value = res.data[0]
-    if (e.type === 'call') {
-      CallLib.enableMicrophone(true)
-      CallLib.startSingleCall(callerInfo.value.userID, 0, 'answer')
-    }
-    console.log('===好友信息', res)
-  })
-</script>
-
 <template>
  <!-- 来电接听界面 -->
  <view class="incoming-call">
@@ -147,9 +32,9 @@
        {{ callerInfo?.nick || callerInfo?.userID }}
      </text>
      <text class="call-type">
-        {{ callState === 'call' ? '语音呼叫中...' : '对话中...' }}
+        {{ callState === 'call' ? '呼叫中，等待对方接受邀请...' : '对话中...' }}
      </text>
-      <!-- <text class="call-status">未接听</text> -->
+      <text class="call-status">{{ mediaType === 'audio' ? "语音通话" : "视频通话" }}</text>
    </view>

    <!-- 控制按钮 -->
@@ -161,7 +46,7 @@
        >
          <uni-icons type="closeempty" size="32" color="#fff"></uni-icons>
        </view>
-        <text class="btn-text">拒绝</text>
+        <text class="btn-text">{{ callState === 'call' || callState == 'dialogue' ? "挂断" : "拒绝" }}</text>
      </view>

      <view
@@ -185,6 +70,114 @@
  </view>
 </template>

+<script setup>
+  import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
+  import { ref, watch } from 'vue'
+  import { onLoad, onUnload, onHide } from '@dcloudio/uni-app'
+  import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
+  import { useUI } from '../../utils/use-ui'
+  import { navigateBack } from '../../utils/router'
+
+  CallLib.init({})
+  const { showLoading, hideLoading } = useUI()
+  const callBackground = ref('/static/images/public/random2.png')
+  /** 呼叫用户信息 */
+  const callerInfo = ref({})
+  /** 通话状态 */
+  const isRinging = ref(true)
+  /** 控制按钮状态 */
+  const activeBtn = ref(null)
+  /**
+   * 拨打状态
+   * call: 发起呼叫
+   * answer: 接听
+   * dialogue: 对话中
+   */
+  const callState = ref('')
+  CallLib.onRemoteUserJoined(res => {
+    console.log(
+      'Engine:OnRemoteUserJoined=>' +
+        '主叫端拨出电话，被叫端收到请求后，加入通话，被叫端Id为=>',
+      res.data.userId
+    )
+	callState.value = 'dialogue'
+  })
+
+	
+  // CallLib.onRemoteUserRinging(res => {
+  //   console.log(
+  //     '主叫端拨出电话，被叫端收到请求，发出振铃响应时触发，对端Id为=>',
+  //     res.data.userId
+  //   )
+  // })
+
+  // CallLib.onError(res => {
+  //   console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
+  // })
+
+  /** 按钮状态 */
+  const cutFn = show => {
+    if (show) {
+      // 接听电话 dialogue
+      if(mediaType.value === 'audio'){
+		 CallLib.enableMicrophone(true) 
+	  }
+      CallLib.accept()
+      callState.value = 'dialogue'
+	  if(mediaType.value === 'video'){
+			 uni.redirectTo({
+				url: "/pages/room/room"
+			 })
+	  }
+    } else {
+      //取消接听，返回上一页
+      CallLib.hangup()
+      navigateBack()
+    }
+  }
+	
+	const mediaType= ref("audio")
+	
+  onLoad(async e => {
+    callState.value = e.type
+	mediaType.value = e.mediaType
+    console.log(e)
+    showLoading()
+    const res = await TUIUserService.getUserProfile({
+      userIDList: [e.userID]
+    })
+    hideLoading()
+    callerInfo.value = res.data[0]
+    if (e.type === 'call') {
+      CallLib.enableMicrophone(true)
+      CallLib.startSingleCall(callerInfo.value.userID, 0, 'answer')
+    }
+	if(e.callType == "in"){
+		// 接听语音通话
+		callState.value = 'answer'
+	}
+	console.log('callState.value: ',callState.value);
+    console.log('===好友信息', res)
+  })
+  
+  // onUnload( ()=>{
+	 //  removeAllListeners()
+  // })
+  
+  // onHide( ()=>{
+	 //  removeAllListeners()
+  // })
+  
+  function removeAllListeners(){
+  	//移除监听-接收到通话呼入
+  	CallLib.removeRemoteUserJoinedListener();
+  	// 移除监听-通话已结束
+  	CallLib.removeCallDisconnectedListener();
+  	// 移除监听-通话出现错误的回调
+  	CallLib.removeErrorListener();
+  }
+</script>
+
 <style lang="scss" scoped>
  .incoming-call {
    position: fixed;
--- a/pages/room/room.nvue
+++ b/pages/room/room.nvue
@@ -56,26 +56,6 @@
 						{{ isEnableSpeaker ? '关闭' : '开启' }}扬声器
 					</text>
 				</view>
-			</view>
-			<view class="control-row" :style="{ width: windowWidth + 'px' }">
-				<view class="icon-item" @click="changeMediaType">
-					<view class="control-icon">
-						<uni-icons
-							:type="mediaTypeCur === 'video' ? 'phone' : 'videocam'"
-							size="24"
-							color="#fff"
-						></uni-icons>
-					</view>
-					<text class="btn-text">
-						{{ mediaTypeCur === 'video' ? '切换语音' : '切换视频' }}
-					</text>
-				</view>
-				<view class="hangup-btn icon-item" @click="hangup">
-					<view class="hangup-icon control-icon">
-						<uni-icons type="phone" size="28" color="#fff"></uni-icons>
-					</view>
-					<text class="hangup-text">挂断</text>
-				</view>
 				<view class="icon-item" @click="switchCamera">
 					<view class="control-icon">
 						<uni-icons type="refresh" size="24" color="#fff"></uni-icons>
@@ -83,6 +63,14 @@
 					<text class="btn-text">翻转</text>
 				</view>
 			</view>
+			<view class="control-row" :style="{ width: windowWidth + 'px' }">
+				<view class="hangup-btn icon-item" @click="hangup">
+					<view class="hangup-icon control-icon">
+						<uni-icons type="phone" size="28" color="#fff"></uni-icons>
+					</view>
+					<text class="hangup-text">挂断</text>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -131,6 +119,7 @@
 			uni.getStorage({
 				key: 'room-parameters',
 				success: res => {
+					console.log('room-parameters: ',res);
 					this.mediaType = res.data.mediaType
 					this.callType = res.data.callType ? res.data.callType : 'in'
 					this.groupId = res.data.groupId ? res.data.groupId : ''
@@ -151,24 +140,34 @@
 					_this.windowHeight = res.windowHeight
 				}
 			})
+			
 			uni.$on('OnCallConnected', this.onCallConnected)
 			uni.$on('OnCallDisconnected', this.onCallDisconnected)
-			this.initBeautyOpton()
 		},
 		beforeDestroy() {
 			uni.$off('OnCallDisconnected')
 			uni.$off('OnCallConnected')
-		},
+		},  
 		onUnload() {
 			call.hangup()
+			// this.removeAllListeners()
 		},
 		onHide() {
 			const session = call.getCurrentCallSession()
 			if (session) {
 				call.hangup()
 			}
+			// this.removeAllListeners()
 		},
 		methods: {
+			removeAllListeners(){
+				//移除监听-接收到通话呼入
+				call.removeRemoteUserJoinedListener();
+				// 移除监听-通话已结束
+				call.removeCallDisconnectedListener();
+				// 移除监听-通话出现错误的回调
+				call.removeErrorListener();
+			},
 			changeMediaType() {
 				if (this.mediaTypeCur == 'video') {
 					this.mediaTypeCur = 'audio'
@@ -312,6 +311,7 @@
 						? this.currentCallSession.users
 						: []
 				}
+				console.log('this.users: ',this.users);
 				let _this = this
 				// im.getCurrentUserId(function(result){
 				// 	 _this.systemInfoSync(result.userId,_this.$refs.bigVideoView.ref,false);
@@ -488,7 +488,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 8rpx;
-		margin: 10rpx;
+		margin: 10rpx 20rpx;
 	}

 	.control-icon {
--- a/stores/user.js
+++ b/stores/user.js
@@ -130,6 +130,7 @@ export const useUserStore = defineStore('user', () => {
    console.log(tencentUserSig.value.appKey, '====')
    await connectIM()
    // #endif
+	
  }

  //连接融云IM
@@ -177,6 +178,45 @@ export const useUserStore = defineStore('user', () => {
          // })
 					console.log('连接已存在，不需要再连接')
        }
+		// #ifdef APP-PLUS
+		// CallLib.init({})
+		CallLib.onCallReceived(res => {
+		    console.log(
+		      'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>',
+		      res.data
+		    )
+			console.log('res: ',res.data);
+		    if (res.data.targetId) {
+				// let url = res.data.mediaType == 0 ? "" : "/pages/room/room"
+				uni.setStorageSync('room-parameters', {
+					callType: 'in',
+					mediaType: res.data.mediaType === 0 ? 'audio' : 'video'
+				});
+		      navigateTo("/pages/room/incom", {
+		        type: res.data.extra,
+		  		callType: 'in',
+		  		mediaType: res.data.mediaType == 0 ? "audio" : "video",
+		        userID: res.data.mine.userId // 对方的用户id
+		      })
+		    }
+		  })
+		  
+		  /** 挂断电话 */
+		  CallLib.onCallDisconnected(res => {
+		    console.log(
+		      'Engine:OnCallDisconnected=>' + '挂断成功, 挂断原因=>',
+		      res.data.reason
+		    )
+		    uni.navigateBack()
+		  })
+		  
+		  CallLib.onError(res => {
+		    console.log('通话过程中，发生异常，异常原因=>', res.data.reason)
+		  		uni.navigateBack()
+		  })
+		  
+		
+		  // #endif
      }
    }
    let code = await imEngine.value.connect(