安裝依賴：

npm install aliyun-rtc-wx-sdk crypto-js

uni-app，新建一個頁面，粘貼以下代碼
在阿里云實時音視頻補充appId、appKey即可，

<template><view class="container"><!-- 用戶輸入區域 --><view class="input-section" v-if="!isJoined"><uni-easyinputv-model="channelId"placeholder="請輸入頻道ID":clearable="true"/><uni-easyinputv-model="userName"placeholder="請輸入用戶名":clearable="true"/><uni-easyinputv-model="userId"placeholder="請輸入用戶ID":clearable="true"/><button @click="joinChannel" type="primary">加入房間</button></view><!-- 直播控制區域 --><view class="control-section" v-if="isJoined"><button @click="leaveChannel" type="warn">離開房間</button><button @click="switchCamera">切換攝像頭</button><button @click="toggleMic">{{ pusher.enableMic ? '關閉麥克風' : '開啟麥克風' }}</button><button @click="toggleCamera">{{ pusher.enableCamera ? '關閉攝像頭' : '開啟攝像頭' }}</button></view><!-- 推流組件 --><live-pusher ref="livePusher":url="pusher.url" :mode="pusher.mode" :autopush="pusher.autopush" :beauty="pusher.beauty":whiteness="pusher.whiteness" :muted="pusher.muted" :mirror="pusher.mirror" :local-mirror="pusher.localMirror":enable-camera="pusher.enableCamera" :enable-mic="pusher.enableMic" :remote-mirror="pusher.remoteMirror":enable-ans="pusher.enableAns" :device-position="pusher.devicePosition" :enable-agc="pusher.enableAgc"@statechange="onPusherStateChange" @netstatus="onPusherNetStatus" @error="onPusherError"style="width: calc((100vw - 40rpx)); height: calc((100vw - 40rpx)/4*3);" v-if="pusher.url" />拉流組件列表({{ playerList.length }})：<view class="player-list" v-if="playerList.length > 0"><view v-for="(player, index) in playerList" :key="index" class="player-item"><live-player :src="player.src" mode="RTC" autoplay @statechange="onPlayerStateChange" @netstatus="onPlayerNetStatus"style="width: calc((50vw - 25rpx)); height: calc((50vw - 25rpx)/4*3);" /><text>{{ player.userName || player.userId }}</text></view></view><!-- 調試信息 --><view class="debug-info"><text>房間狀態: {{ isJoined ? '已加入' : '未加入' }}</text><text>用戶數量: {{ playerList.length }}</text></view></view>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { queryAndGetUserInfo, UserInfo, getUserInfo } from '@/utils/userInfo'
import * as MainApi from './mainApi'
import baseInfo from '@/utils/base'
import { pagesRecords } from '@/hooks/pageRecordsHooks'// live-pusher  實例，用于切換攝像頭
let LivePusher = uni.createLivePusherContext('livePusher')import AliRtcEngine from "aliyun-rtc-wx-sdk";
import CryptoJS from 'crypto-js';pagesRecords()let currentInstance = ref()
const { ctx } = getCurrentInstance() as any// 響應式數據
const pusher = ref({})
const playerList = ref([])
const isJoined = ref(false)
const userName = ref('')
const userId = ref('')
const appId = ref('')
const appKey = ref('')
const channelId = ref('AliRtcDemo')let artc: any = null// 生成Token
const generateToken = (appId: string, appKey: string, channelId: string, userId: string, timestamp: number) => {const data = `${appId}${appKey}${channelId}${userId}${timestamp}`;const hash = CryptoJS.SHA256(data);return hash.toString(CryptoJS.enc.Hex);
}// 初始化ARTC引擎
const initARTC = async () => {try {artc = AliRtcEngine.getInstance()bindEvents()uni.showToast({title: 'ARTC引擎初始化成功',icon: 'success'})} catch (error) {console.error('ARTC引擎初始化失敗:', error)uni.showToast({title: 'ARTC引擎初始化失敗',icon: 'error'})}
}// 綁定事件監聽
const bindEvents = () => {// 遠程用戶上線通知artc.on("remoteUserOnLineNotify", (user: any, newPlayerList: any[]) => {		uni.showToast({title: `${user.displayName || user.userId} 加入了房間`,icon: "none",})playerList.value = newPlayerList})// 遠程用戶下線通知artc.on("remoteUserOffLineNotify", (user: any, newPlayerList: any[]) => {uni.showToast({title: `${user.displayName || user.userId} 退出了房間`,icon: "none",})playerList.value = newPlayerList})// 遠程軌道可用通知artc.on("remoteTrackAvailableNotify", (user: any, newPlayerList: any[]) => {playerList.value = newPlayerList})// 被踢出房間artc.on("bye", () => {uni.showToast({title: "您已被踢出房間",icon: "none",})pusher.value = {}playerList.value = []isJoined.value = false})
}// 加入頻道
const joinChannel = async () => {if (isJoined.value) {uni.showToast({title: '已在房間中',icon: 'none'})return}// 檢查用戶輸入if (!userName.value.trim()) {uni.showToast({title: '請輸入用戶名',icon: 'none'})return}if (!userId.value.trim()) {uni.showToast({title: '請輸入用戶ID',icon: 'none'})return}uni.showLoading({title: '加入房間中...'})try {const timestamp = Math.floor(Date.now() / 1000) + 3600const token = generateToken(appId.value, appKey.value, channelId.value, userId.value, timestamp)const { pusherAttributes, playerList: newPlayerList } = await artc.joinChannel({appId: appId.value,appKey: appKey.value,channelId: channelId.value,userId: userId.value,userName: userName.value,token: token,timestamp: timestamp}, userName.value)pusher.value = pusherAttributesplayerList.value = newPlayerListisJoined.value = true// 開始推流artc.getPusherInstance().start()uni.hideLoading()uni.showToast({title: '加入房間成功',icon: 'success'})} catch (error) {uni.hideLoading()console.error('加入房間失敗:', error)uni.showToast({title: '加入房間失敗',icon: 'error'})}
}// 離開頻道
const leaveChannel = async () => {if (!isJoined.value) {return}try {await artc.leaveChannel()pusher.value = {}playerList.value = []isJoined.value = falseuni.showToast({title: '已離開房間',icon: 'success'})} catch (error) {console.error('離開房間失敗:', error)}
}// 切換攝像頭
const switchCamera = () => {LivePusher.switchCamera()
}// 切換麥克風
const toggleMic = () => {pusher.value.enableMic = !pusher.value.enableMic
}// 切換攝像頭
const toggleCamera = () => {pusher.value.enableCamera = !pusher.value.enableCamera
}// live-pusher 狀態變化處理
const onPusherStateChange = (e: any) => {console.log("live-pusher code: ", e.detail.code)artc.handlePusherStateChange(e)
}// live-pusher 網絡狀態處理
const onPusherNetStatus = (e: any) => {console.log("live-pusher netStatus: ", e.detail.info)artc.handlePusherNetStatus(e)
}// live-pusher 錯誤處理
const onPusherError = (e: any) => {artc.handlePusherError(e)
}// live-player 狀態變化處理
const onPlayerStateChange = (e: any) => {console.log("live-player code: ", e.detail.code)artc.handlePlayerStateChange(e)
}// live-player 網絡狀態處理
const onPlayerNetStatus = (e: any) => {console.log("live-player netStatus: ", e.detail.info)artc.handlePlayerNetStatus(e)
}// 生命周期
onMounted(() => {initARTC()
})onUnmounted(() => {leaveChannel()
})
</script><style scoped lang="scss">
.container {padding: 20rpx;
}.input-section {margin-bottom: 30rpx;.uni-easyinput {margin-bottom: 20rpx;}button {margin-top: 20rpx;}
}.control-section {display: flex;flex-wrap: wrap;gap: 10rpx;margin-bottom: 30rpx;button {font-size: 24rpx;flex: 1;padding: 0;}
}.player-list {display: flex;flex-wrap: wrap;gap: 10rpx;margin-top: 30rpx;.player-item {text-align: center;text {display: block;margin-top: 10rpx;font-size: 24rpx;color: #666;}}
}.debug-info {margin-top: 30rpx;padding: 20rpx;background-color: #f5f5f5;border-radius: 10rpx;text {display: block;margin-bottom: 10rpx;font-size: 24rpx;color: #333;}
}
</style>

userName、userId隨便寫，不重復即可，想進入同一個頻道就讓channelId一致，