优化音视频通话

App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	// #ifdef APP-PLUS
 	import { setSdkLanguageFromSystem } from '@/uni_modules/tuikit-atomic-x/utils/setSdkLanguageFromSystem'
+	import * as call from "@/uni_modules/RongCloud-CallWrapper/lib/index"
 	// #endif
 	import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
 	import { reLaunch } from './utils/router'
@@ -8,6 +9,8 @@
 	import { useUserStore } from './stores/user'
 	import { TUIChatKit } from './TUIKit'
 	import { getIpBlack } from './api'
+	import {reasonDeal,errorDeal,imCode} from '@/utils/code.js'
+	import { navigateTo } from '@/utils/router'
 
 	TUIChatKit.init()
 
@@ -39,6 +42,7 @@
 
 		// #ifdef APP-PLUS
 		setSdkLanguageFromSystem()
+		onAllListeners()
 		// #endif
 	})
 
@@ -51,9 +55,152 @@
 			const show = await getIpBlack(false)
 			console.log(show.data.data, '======')
 		}
-
+		// #ifdef APP-PLUS
+		removeAllListeners()
+		// #endif
 		console.log('App Hide333')
 	})
+	
+	function onAllListeners () {
+		call.onCallReceived( (res)=> {
+			console.log(res)
+			console.log("Engine:OnCallReceived=>"+"监听通话呼入, 目标id=>", res.data.targetId);
+			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'
+				});
+				uni.showToast({
+					title:"有通话呼入该跳转了"+res.data.targetId,
+					duration:3000
+				})
+				navigateTo("/pages/room/incom", {
+					type: res.data.extra,
+					callType: 'in',
+					mediaType: res.data.mediaType == 0 ? "audio" : "video",
+					userID: res.data.mine.userId // 对方的用户id
+				})
+			}
+		});
+		call.onCallDisconnected((res)=>{
+			console.log(res)
+			console.log("Engine:OnCallDisconnected=>"+"通话挂断/拒绝, 挂断原因=>", res.data.reason);
+			// 重新渲染视频视图
+			// uni.$emit('OnCallDisconnected');
+			uni.showToast({
+				title:reasonDeal(res.data.reason),
+				error:"error",
+				icon:'none',
+				duration:2000
+			})
+			goback()
+		});
+		call.onCallConnected((res)=>{
+			console.log(res)
+			console.log("Engine:OnCallConnected=>"+"已建立通话通话接通时，通过回调 onCallConnected 通知当前 call 的详细信息", res);
+		});
+		call.onRemoteUserInvited((res)=>{
+			console.log("Engine:OnRemoteUserInvited=>"+"通话中的某一个参与者，邀请好友加入通话 ,远端Id为=>", res.data.userId);
+			uni.$emit('OnCallConnected');
+		})
+		call.onRemoteUserJoined((res)=>{
+			console.log("Engine:OnRemoteUserJoined=>"+"主叫端拨出电话，被叫端收到请求后，加入通话，对端Id为=>", res.data.userId);
+			uni.$emit('OnCallConnected');
+		})
+		call.onRemoteUserLeft((res)=>{
+			console.log("Engine:OnRemoteUserLeft=>"+"远端用户挂断(群聊触发)，远端Id为=>", res.data.reason);
+			uni.$emit('OnCallConnected');
+			uni.showToast({
+				title:reasonDeal(res.data.reason),
+				error:"error",
+				icon:'none',
+				duration:2000
+			})
+		})
+		call.onCallOutgoing((res)=>{
+			console.log('电话已拨出 主叫端拨出电话后，通过回调 onCallOutgoing 通知当前 call 的详细信息')
+		})
+		call.onRemoteUserRinging((res)=>{
+			console.log('被叫端正在振铃，主叫端拨出电话，被叫端收到请求，发出振铃响应时，回调 onRemoteUserRingin,对端Id为=>', res.data.userId)
+		})
+		call.onError((res)=>{
+			console.log('通话过程中，发生异常')
+			uni.showToast({
+				title:errorDeal(res.data.reason),
+				error:"error",
+				icon:'none',
+				duration:2000
+			});
+			goback()
+		})
+		call.onRemoteUserMediaTypeChanged((res)=>{
+			console.log('当通话中的某一个参与者切换通话类型，例如由 audio 切换至 video，回调 onMediaTypeChanged,切换媒体类型的Id为=>',res.data.user.userId);
+		})
+	}
+	
+	function goback () {
+		const pages = getCurrentPages()
+		console.log('pages: ',pages);
+		if (pages.length > 1) {
+			console.log("走返回");
+			uni.showToast({
+				title:"走返回",
+				duration:3000
+			})
+			uni.navigateBack({
+				delta: 1
+			})
+			const currentPage = pages[pages.length - 1]
+			const prevPage = pages[pages.length - 2]
+			
+			// 判断上一页是否是 tabBar 页面
+			// const isPrevPageTabBar = isTabBarPage(currentPage.route)
+			// if(!isPrevPageTabBar){
+				
+			// }
+		}
+	}
+	
+	// 判断页面是否是 tabBar 页面
+	function isTabBarPage(route) {
+		// 这里根据你的 pages.json 配置来判断
+		const tabBarPages = [
+			'TUIKit/components/TUIConversation/index',
+			'TUIKit/components/TUIContact/index',
+			'pages/discover/discover',
+			'pages/my-index/my-index'
+		]
+		
+		// 判断路由是否在 tabBar 页面列表中
+		return tabBarPages.includes(route)
+	}
+	
+	function removeAllListeners(){
+		call.unInit();
+		//移除监听-接收到通话呼入
+		call.removeCallReceivedListener();
+		// 移除监听-开始呼叫通话的回调
+		call.removeCallOutgoingListener();
+		// 移除监听-通话已接通
+		call.removeCallReceivedListener();
+		// 移除监听-通话已结束
+		call.removeCallDisconnectedListener();
+		// 移除监听-对端用户正在振铃
+		call.removeRemoteUserRingingListener();
+		// 移除监听-对端用户加入了通话
+		call.removeRemoteUserJoinedListener();
+		// 移除监听-有用户被邀请加入通话
+		call.removeRemoteUserInvited();
+		// 移除监听-对端用户挂断
+		call.removeRemoteUserLeftListener();
+		// 移除监听-对端用户切换了媒体类型
+		call.removeRemoteUserMediaTypeChangedListener();
+		// 移除监听-通话出现错误的回调
+		call.removeErrorListener();
+		
+	}
+	
 </script>
 
 <style lang="scss">

pages/room/incom.vue

@@ -78,7 +78,7 @@ 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')
 /** 呼叫用户信息 */
@@ -132,7 +132,7 @@ const cutFn = show => {
     } else {
         //取消接听，返回上一页
         CallLib.hangup()
-        navigateBack()
+        // navigateBack()
     }
 }
 
@@ -160,22 +160,6 @@ onLoad(async e => {
     console.log('===好友信息', res)
 })
 
-// onUnload( ()=>{
-//  removeAllListeners()
-// })
-
-// onHide( ()=>{
-//  removeAllListeners()
-// })
-
-function removeAllListeners(){
-    //移除监听-接收到通话呼入
-    CallLib.removeRemoteUserJoinedListener();
-    // 移除监听-通话已结束
-    CallLib.removeCallDisconnectedListener();
-    // 移除监听-通话出现错误的回调
-    CallLib.removeErrorListener();
-}
 </script>
 
 <style lang="scss" scoped>

stores/user.js

@@ -1,4 +1,6 @@
-import { defineStore } from 'pinia'
+import {
+	defineStore
+} from 'pinia'
 import {
 	getToken,
 	getUserInfoData,
@@ -13,29 +15,68 @@ import {
 } from '@/utils/storage'
 
 // #ifdef APP-PLUS
-import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState'
+import {
+	useLoginState
+} from '@/uni_modules/tuikit-atomic-x/state/LoginState'
 import * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
 import RCIMIWEngine from '@/uni_modules/RongCloud-IMWrapper-V2/js_sdk/RCIMEngine'
-import { reasonDeal, errorDeal, imCode } from '@/utils/code.js'
+import {
+	reasonDeal,
+	errorDeal,
+	imCode
+} from '@/utils/code.js'
 // #endif
 // #ifdef H5
-import { useLoginState } from 'tuikit-atomicx-vue3'
+import {
+	useLoginState
+} from 'tuikit-atomicx-vue3'
 // #endif
-import { useTokenStore } from './token'
+import {
-import { getUserData, userLogout, updateUserData } from '@/api'
+	useTokenStore
-import { ref } from 'vue'
+} from './token'
-import { useUI } from '@/utils/use-ui'
+import {
-import { reLaunch } from '@/utils/router'
+	getUserData,
-import { getTencentUserSig } from '@/api'
+	userLogout,
-import { TUILogin } from '@tencentcloud/tui-core-lite'
+	updateUserData
-import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine-lite'
+} from '@/api'
-import { getUserIntegral } from '@/api/my-index'
+import {
-import { removeFriendList, removeGroupList } from '../utils/storage'
+	ref
-import { getRongYunLoginInfo } from '../api'
+} from 'vue'
+import {
+	useUI
+} from '@/utils/use-ui'
+import {
+	reLaunch
+} from '@/utils/router'
+import {
+	getTencentUserSig
+} from '@/api'
+import {
+	TUILogin
+} from '@tencentcloud/tui-core-lite'
+import {
+	TUIChatEngine
+} from '@tencentcloud/chat-uikit-engine-lite'
+import {
+	getUserIntegral
+} from '@/api/my-index'
+import {
+	removeFriendList,
+	removeGroupList
+} from '../utils/storage'
+import {
+	getRongYunLoginInfo
+} from '../api'
+import permision from "@/js_sdk/wa-permission/permission.js"
 
 export const useUserStore = defineStore('user', () => {
-  const { clearToken } = useTokenStore()
+	const {
-  const { showDialog, showToast } = useUI()
+		clearToken
+	} = useTokenStore()
+	const {
+		showDialog,
+		showToast
+	} = useUI()
 
 	const userInfo = ref(
 		getUserInfoData() ? JSON?.parse(getUserInfoData()) : {}
@@ -129,103 +170,38 @@ export const useUserStore = defineStore('user', () => {
 		})
 		console.log(tencentUserSig.value.appKey, '====')
 		await connectIM()
-    // #endif
-	// #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'
-			});
-	      uni.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
 	}
 
 	//连接融云IM
 	const connectIM = async () => {
-    const options = {
+		let options = {}
-      naviServer: ''
+		imEngine.value = await RCIMIWEngine.create(tencentUserSig.value.appKey, options)
-    }
+		imEngine.value.setOnConnectedListener((res) => {
-    imEngine.value = await RCIMIWEngine.create(
-      tencentUserSig.value.appKey,
-      options
-    )
-    imEngine.value.setOnConnectedListener(res => {
 			if (res.code != 0) {
-        uni.hideLoading()
+				uni.hideLoading();
-        uni.showToast({
+				// uni.showToast({
-          title: 'OnCon:' + res.code,
+				// 	title: 'OnCon:' + res.code,
-          icon: 'error'
+				// 	icon: 'error'
-        })
+				// })
-        return
+				console.log("连接已存在");
+				// return
 			}
 			//连接成功
-      CallLib.init({})
+			CallLib.init({});
 			console.log('call.init')
-      // this.libPage = true;
+			uni.hideLoading();
-      // this.loginUserId = res.userId;
+			uni.showToast({
-      uni.hideLoading()
+				title: res.userId
-      console.log('登录成功')
+			});
-    })
+			if (uni.getSystemInfoSync().platform === 'android') {
-    const callback = {
+				permision.requestAndroidPermission('android.permission.CAMERA');
-      onDatabaseOpened: res => {
+				permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
-        console.log('数据库打开')
-      },
-      onConnected: res => {
-        console.log(res)
-        if (res.code === 0) {
-          // uni.showToast({
-          //   title: '连接成功',
-          //   icon: 'none'
-          // })
-          console.log('连接成功')
-        } else if (res.code === 34001) {
-          // uni.showToast({
-          //   title: '连接已存在，不需要再连接',
-          //   icon: 'none'
-          // })
-					console.log('连接已存在，不需要再连接')
 			}
-		
+		});
-      }
+		let code = await imEngine.value.connect(tencentUserSig.value.ryToken, 10)
-    }
-    let code = await imEngine.value.connect(
-      tencentUserSig.value.ryToken,
-      10,
-      callback
-    )
 		if (code != 0) {
-      uni.hideLoading()
+			uni.hideLoading();
 			uni.showToast({
 				title: 'connect:' + code,
 				icon: 'error'