当前位置: 首页 > news >正文

uni-app vue3 小程序接入 aliyun-rtc-wx-sdk

安装依赖:

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一致,

http://www.dtcms.com/a/318827.html

相关文章:

  • Android 之 Jetpack- Room
  • 力扣238:除自身之外数组的乘积
  • 快速开发实践
  • 使用Spring Boot + Angular构建安全的登录注册系统
  • 十八、MySQL-DML-数据操作-插入(增加)、更新(修改)、删除
  • LongVie突破超长视频生成极限:1分钟电影级丝滑视频,双模态控制告别卡顿退化
  • 本地组策略编辑器无法打开(gpedit.msc命令异常)
  • 编程之线性代数矩阵和概率论统计知识回顾
  • OpenCV 图像处理基础操作指南(一)
  • 基于人眼视觉特性的相关图像增强基础知识介绍
  • C++入门自学Day7-- String类的使用(续)
  • windows_exporter-0.13.0-amd64.exe 怎么安装?Windows服务安装与运行方法
  • 中国341个城市人力需求指数数据集
  • 【MATLAB】(十)符号运算
  • 一文读懂 C# 中的 Bitmap
  • 知识随记-----Qt 实用技巧:自定义倒计时按钮防止用户频繁点击
  • 3D 软件在游戏开发中的全链路应用:从原型到上线的实战解析
  • Docker Buildx最佳实践:多架构镜像构建指南
  • Mac/Windows跨平台PDF与AI高效解决方案
  • sigprocmask 函数深度解析
  • html页面使用jspdf预览及下载pdf模板
  • 使用驱动移除内核回调,
  • golang开源库之Syncthing
  • Unity URP渲染管线动态修改材质球状态
  • 基于 HT 引擎实现 3D 智慧物流转运中心一体化管控系统
  • 【CS创世SD NAND征文】小型夜灯为何需要存储芯片?从基础照明到智能存储的升级密码
  • 生成式AI时代,Data+AI下一代数智平台建设指南
  • EP04:【DL 第二弹】张量的线性代数运算
  • 内网穿透原理和部署教程
  • 京东关键字搜索商品列表接口开发实战:从参数优化到分布式调用