root/uniapp-im-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化音视频通话

Browse Source
This commit is contained in:
lmx
2026-02-06 23:41:19 +08:00
parent 8f56d569f8
commit ea2ef96379
3 changed files with 422 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
App.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
// #ifdef APP-PLUS // #ifdef APP-PLUS
import { setSdkLanguageFromSystem } from '@/uni_modules/tuikit-atomic-x/utils/setSdkLanguageFromSystem' import { setSdkLanguageFromSystem } from '@/uni_modules/tuikit-atomic-x/utils/setSdkLanguageFromSystem'
import * as call from "@/uni_modules/RongCloud-CallWrapper/lib/index"
// #endif // #endif
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app' import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { reLaunch } from './utils/router' import { reLaunch } from './utils/router'
@@ -8,6 +9,8 @@
import { useUserStore } from './stores/user' import { useUserStore } from './stores/user'
import { TUIChatKit } from './TUIKit' import { TUIChatKit } from './TUIKit'
import { getIpBlack } from './api' import { getIpBlack } from './api'
import {reasonDeal,errorDeal,imCode} from '@/utils/code.js'
import { navigateTo } from '@/utils/router'
TUIChatKit.init() TUIChatKit.init()
@@ -39,6 +42,7 @@
// #ifdef APP-PLUS // #ifdef APP-PLUS
setSdkLanguageFromSystem() setSdkLanguageFromSystem()
onAllListeners()
// #endif // #endif
}) })
@@ -51,9 +55,152 @@
const show = await getIpBlack(false) const show = await getIpBlack(false)
console.log(show.data.data, '======') console.log(show.data.data, '======')
} }
// #ifdef APP-PLUS
removeAllListeners()
// #endif
console.log('App Hide333') 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> </script>
<style lang="scss"> <style lang="scss">

20
pages/room/incom.vue
View File

@@ -78,7 +78,7 @@ import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite'
import { useUI } from '../../utils/use-ui' import { useUI } from '../../utils/use-ui'
import { navigateBack } from '../../utils/router' import { navigateBack } from '../../utils/router'
CallLib.init({})
const { showLoading, hideLoading } = useUI() const { showLoading, hideLoading } = useUI()
const callBackground = ref('/static/images/public/random2.png') const callBackground = ref('/static/images/public/random2.png')
/** 呼叫用户信息 */ /** 呼叫用户信息 */
@@ -132,7 +132,7 @@ const cutFn = show => {
} else { } else {
//取消接听，返回上一页 //取消接听，返回上一页
CallLib.hangup() CallLib.hangup()
navigateBack() // navigateBack()
} }
} }
@@ -160,22 +160,6 @@ onLoad(async e => {
console.log('===好友信息', res) console.log('===好友信息', res)
}) })
// onUnload( ()=>{
// removeAllListeners()
// })
// onHide( ()=>{
// removeAllListeners()
// })
function removeAllListeners(){
//移除监听-接收到通话呼入
CallLib.removeRemoteUserJoinedListener();
// 移除监听-通话已结束
CallLib.removeCallDisconnectedListener();
// 移除监听-通话出现错误的回调
CallLib.removeErrorListener();
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

566
stores/user.js
View File

@@ -1,326 +1,302 @@
import { defineStore } from 'pinia'
import { import {
getToken, defineStore
getUserInfoData, } from 'pinia'
setUserInfoData, import {
removeUserInfoData, getToken,
getSig, getUserInfoData,
setSig, setUserInfoData,
removeSig, removeUserInfoData,
getFontSize, getSig,
setFontSize, setSig,
removeFontSize removeSig,
getFontSize,
setFontSize,
removeFontSize
} from '@/utils/storage' } from '@/utils/storage'
// #ifdef APP-PLUS // #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 * as CallLib from '@/uni_modules/RongCloud-CallWrapper/lib/index'
import RCIMIWEngine from '@/uni_modules/RongCloud-IMWrapper-V2/js_sdk/RCIMEngine' 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 // #endif
// #ifdef H5 // #ifdef H5
import { useLoginState } from 'tuikit-atomicx-vue3' import {
useLoginState
} from 'tuikit-atomicx-vue3'
// #endif // #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', () => { export const useUserStore = defineStore('user', () => {
const { clearToken } = useTokenStore() const {
const { showDialog, showToast } = useUI() clearToken
} = useTokenStore()
const {
showDialog,
showToast
} = useUI()
const userInfo = ref( const userInfo = ref(
getUserInfoData() ? JSON?.parse(getUserInfoData()) : {} getUserInfoData() ? JSON?.parse(getUserInfoData()) : {}
) )
/** 用户字体大小 */ /** 用户字体大小 */
const fontSizeData = ref(getFontSize()) const fontSizeData = ref(getFontSize())
/** 腾讯 IM 存储数据 */ /** 腾讯 IM 存储数据 */
const tencentUserSig = ref(getSig() ? JSON?.parse(getSig()) : {}) const tencentUserSig = ref(getSig() ? JSON?.parse(getSig()) : {})
/** 用户积分数 */ /** 用户积分数 */
const integralData = ref(0) const integralData = ref(0)
/** 融云 IM 引擎 */ /** 融云 IM 引擎 */
const imEngine = ref(null) const imEngine = ref(null)
/** /**
* 获取用户信息（可从缓存或接口） * 获取用户信息（可从缓存或接口）
*/ */
const fetchUserInfo = async () => { const fetchUserInfo = async () => {
// 尝试从本地缓存读取 // 尝试从本地缓存读取
const cachedToken = getToken() const cachedToken = getToken()
const cachedUserInfo = getUserInfoData() const cachedUserInfo = getUserInfoData()
const cachedSig = getSig() const cachedSig = getSig()
if (cachedToken && cachedUserInfo) { if (cachedToken && cachedUserInfo) {
userInfo.value = JSON.parse(cachedUserInfo) userInfo.value = JSON.parse(cachedUserInfo)
tencentUserSig.value = JSON.parse(cachedSig) tencentUserSig.value = JSON.parse(cachedSig)
loginTencentIM() loginTencentIM()
return return
} }
await getIntegral() await getIntegral()
const res = await getUserData() const res = await getUserData()
await setUserInfo(res.data) await setUserInfo(res.data)
loginTencentIM() loginTencentIM()
return return
} }
/** /**
* 设置用户信息 * 设置用户信息
*/ */
const setUserInfo = async data => { const setUserInfo = async data => {
const res = await getTencentUserSig() const res = await getTencentUserSig()
const ryData = await getRongYunLoginInfo() const ryData = await getRongYunLoginInfo()
const IM_DATA = { const IM_DATA = {
...res.data, ...res.data,
...ryData.data ...ryData.data
} }
tencentUserSig.value = IM_DATA tencentUserSig.value = IM_DATA
userInfo.value = data userInfo.value = data
setUserInfoData(data) setUserInfoData(data)
setSig(IM_DATA) setSig(IM_DATA)
} }
/** 获取用户积分 */ /** 获取用户积分 */
const getIntegral = async () => { const getIntegral = async () => {
const res = await getUserIntegral() const res = await getUserIntegral()
integralData.value = res.data.availablePoints integralData.value = res.data.availablePoints
} }
/** /**
* 登录腾讯 IM * 登录腾讯 IM
*/ */
const loginTencentIM = async () => { const loginTencentIM = async () => {
await refreshUserInfo() await refreshUserInfo()
await TUILogin.login({ await TUILogin.login({
SDKAppID: tencentUserSig.value.sdkappID, SDKAppID: tencentUserSig.value.sdkappID,
userID: tencentUserSig.value.userId, userID: tencentUserSig.value.userId,
userSig: tencentUserSig.value.userSig, userSig: tencentUserSig.value.userSig,
framework: `vue3` framework: `vue3`
}) })
await TUIChatEngine.login({ await TUIChatEngine.login({
SDKAppID: tencentUserSig.value.sdkappID, SDKAppID: tencentUserSig.value.sdkappID,
userID: tencentUserSig.value.userId, userID: tencentUserSig.value.userId,
userSig: tencentUserSig.value.userSig, userSig: tencentUserSig.value.userSig,
useUploadPlugin: true // 使用文件上传插件 useUploadPlugin: true // 使用文件上传插件
}) })
// #ifdef H5 // #ifdef H5
await useLoginState().login({ await useLoginState().login({
SDKAppID: tencentUserSig.value.sdkappID, SDKAppID: tencentUserSig.value.sdkappID,
userID: tencentUserSig.value.userId, userID: tencentUserSig.value.userId,
userSig: tencentUserSig.value.userSig userSig: tencentUserSig.value.userSig
}) })
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
await useLoginState().login({ await useLoginState().login({
sdkAppID: tencentUserSig.value.sdkappID, sdkAppID: tencentUserSig.value.sdkappID,
userID: tencentUserSig.value.userId, userID: tencentUserSig.value.userId,
userSig: tencentUserSig.value.userSig userSig: tencentUserSig.value.userSig
}) })
console.log(tencentUserSig.value.appKey, '====') console.log(tencentUserSig.value.appKey, '====')
await connectIM() await connectIM()
// #endif // #endif
// #ifdef APP-PLUS }
// CallLib.init({})
CallLib.onCallReceived(res => { //连接融云IM
console.log( const connectIM = async () => {
'Engine:OnCallReceived=>' + '监听通话呼入, 目标id=>', let options = {}
res.data imEngine.value = await RCIMIWEngine.create(tencentUserSig.value.appKey, options)
) imEngine.value.setOnConnectedListener((res) => {
console.log('res: ',res.data); if (res.code != 0) {
if (res.data.targetId) { uni.hideLoading();
// let url = res.data.mediaType == 0 ? "" : "/pages/room/room" // uni.showToast({
uni.setStorageSync('room-parameters', { // title: 'OnCon:' + res.code,
callType: 'in', // icon: 'error'
mediaType: res.data.mediaType === 0 ? 'audio' : 'video' // })
console.log("连接已存在");
// return
}
//连接成功
CallLib.init({});
console.log('call.init')
uni.hideLoading();
uni.showToast({
title: res.userId
}); });
uni.navigateTo("/pages/room/incom", { if (uni.getSystemInfoSync().platform === 'android') {
type: res.data.extra, permision.requestAndroidPermission('android.permission.CAMERA');
callType: 'in', permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
mediaType: res.data.mediaType == 0 ? "audio" : "video", }
userID: res.data.mine.userId // 对方的用户id });
}) let code = await imEngine.value.connect(tencentUserSig.value.ryToken, 10)
} if (code != 0) {
}) uni.hideLoading();
uni.showToast({
title: 'connect:' + code,
icon: 'error'
})
}
}
/** 挂断电话 */ /**
CallLib.onCallDisconnected(res => { * 清除用户信息（退出登录）
console.log( */
'Engine:OnCallDisconnected=>' + '挂断成功, 挂断原因=>', const clearUserInfo = async () => {
res.data.reason const show = await showDialog('提示', '确定要退出登录吗？')
) if (show) {
uni.navigateBack() await logout()
}) }
}
CallLib.onError(res => { /**
console.log('通话过程中，发生异常，异常原因=>', res.data.reason) * 退出登录（不带提示）
uni.navigateBack() */
}) const logout = async () => {
if (!userInfo.value) return
try {
userInfo.value = null
await userLogout()
await TUILogin.logout()
await TUIChatEngine.logout()
// #ifdef APP-PLUS
removeFriendList()
removeGroupList()
await useLoginState().logout()
// #endif
// #ifdef H5
await useLoginState().logout()
// #endif
clearAllUserInfo()
await showToast('退出登录成功', 'success')
reLaunch('/pages/login/login')
} catch (error) {
clearAllUserInfo()
await showToast('退出登录成功', 'success')
reLaunch('/pages/login/login')
}
}
// #endif /** 清空所有用户缓存 */
} const clearAllUserInfo = async () => {
userInfo.value = null
tencentUserSig.value = null
fontSizeData.value = 26
clearToken()
removeUserInfoData()
removeSig()
removeFontSize()
}
//连接融云IM /** 刷新用户信息（如用户信息被修改） */
const connectIM = async () => { const refreshUserInfo = async () => {
const options = { const res = await getUserData()
naviServer: '' await getIntegral()
} await setUserInfoData(res.data)
imEngine.value = await RCIMIWEngine.create( userInfo.value = res.data
tencentUserSig.value.appKey, }
options
)
imEngine.value.setOnConnectedListener(res => {
if (res.code != 0) {
uni.hideLoading()
uni.showToast({
title: 'OnCon:' + res.code,
icon: 'error'
})
return
}
//连接成功
CallLib.init({})
console.log('call.init')
// this.libPage = true;
// this.loginUserId = res.userId;
uni.hideLoading()
console.log('登录成功')
})
const callback = {
onDatabaseOpened: res => {
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, const updateUserInfo = async partialData => {
10, if (!userInfo.value) return
callback await updateUserData(partialData)
) await refreshUserInfo()
if (code != 0) { }
uni.hideLoading()
uni.showToast({
title: 'connect:' + code,
icon: 'error'
})
}
}
/** /** 更新字体大小 */
* 清除用户信息（退出登录） const updateFontSize = async fontSize => {
*/ fontSizeData.value = fontSize
const clearUserInfo = async () => { setFontSize(fontSize)
const show = await showDialog('提示', '确定要退出登录吗？') }
if (show) {
await logout()
}
}
/** return {
* 退出登录（不带提示） imEngine,
*/ userInfo,
const logout = async () => { integralData,
if (!userInfo.value) return tencentUserSig,
try { fontSizeData,
userInfo.value = null getIntegral,
clearAllUserInfo,
await userLogout() updateFontSize,
await TUILogin.logout() logout,
await TUIChatEngine.logout() refreshUserInfo,
// #ifdef APP-PLUS fetchUserInfo,
removeFriendList() loginTencentIM,
removeGroupList() setUserInfo,
await useLoginState().logout() clearUserInfo,
// #endif updateUserInfo
// #ifdef H5 }
await useLoginState().logout()
// #endif
clearAllUserInfo()
await showToast('退出登录成功', 'success')
reLaunch('/pages/login/login')
} catch (error) {
clearAllUserInfo()
await showToast('退出登录成功', 'success')
reLaunch('/pages/login/login')
}
}
/** 清空所有用户缓存 */
const clearAllUserInfo = async () => {
userInfo.value = null
tencentUserSig.value = null
fontSizeData.value = 26
clearToken()
removeUserInfoData()
removeSig()
removeFontSize()
}
/** 刷新用户信息（如用户信息被修改） */
const refreshUserInfo = async () => {
const res = await getUserData()
await getIntegral()
await setUserInfoData(res.data)
userInfo.value = res.data
}
/**
* 更新部分用户信息（例如昵称、头像）
*/
const updateUserInfo = async partialData => {
if (!userInfo.value) return
await updateUserData(partialData)
await refreshUserInfo()
}
/** 更新字体大小 */
const updateFontSize = async fontSize => {
fontSizeData.value = fontSize
setFontSize(fontSize)
}
return {
imEngine,
userInfo,
integralData,
tencentUserSig,
fontSizeData,
getIntegral,
clearAllUserInfo,
updateFontSize,
logout,
refreshUserInfo,
fetchUserInfo,
loginTencentIM,
setUserInfo,
clearUserInfo,
updateUserInfo
}
}) })