uni-app (客户端)

最近更新时间:2024-06-12 18:11:41

我的收藏
TUIRoomKit 是腾讯云推出的多人音视频 UI 组件。组件提供房间管理、音视频控制、屏幕共享、成员管理、麦位管理、即时聊天、自定义布局切换等丰富的功能交互。同时支持中英文切换,一键换肤等能力。



本文介绍 TUIRoomKit (Uniapp) 的接入指引,助力您快速上线企业会议、在线教育、医疗问诊、在线巡视、远程定损等业务场景。
您可以单击 Github/Gitee 下载 TUIRoomKit 代码,并参考代码仓库 README.md 文档跑通 TUIRoomKit Uniapp (客户端) 示例工程。

TUIRoomKit Demo 体验

如果您想要直接跑通一个新工程,请直接阅读 uni-app demo 快速跑通

开发环境要求

HbuilderX 版本要求:HbuilderX 版本 ≥ 3.94。
插件调试说明:原生插件暂不支持模拟器调试。
iOS 设备要求:iOS 系统 ≥ 9.0 ,支持音视频通话的真机设备。
Android 设备要求:Android 系统 ≥ 5.0(SDK API Level 21),支持音视频的真机设备,允许 USB 调试

步骤一:开通服务

在使用腾讯云提供的音视频服务前,您需要前往控制台,为应用开通音视频服务。具体步骤请参见 开通服务

步骤二:创建 uni-app 项目

打开 Hbuilderx 开发工具,点击新建 uni-app 项目:项目名称 (TUIRoomKit-Demo)。
注意:
目前只支持 ts + vite + vue3 工程
如果您已有自己的 uni-app 工程,可跳过该步骤。如果没有,可选择以下方式生成模板工程。




步骤三:下载并导入 TUIRoomEngine 插件

1. 访问 TencentCloud-TUIRoomEngine 插件,在插件详情页中购买插件,购买插件时选择对应的 AppID,绑定正确的包名。



2. TUIRoomKit-Demo 项目中导入插件。




步骤四:下载并导入 TUIRoomKit 组件

1. 下载 github 源码, 建议下载到和步骤一创建的项目同级目录
2. 手动拷贝 TUIRoom 组件至自己的项目中
拷贝 TUIRoomKit/uni-app/src/roomkit/ 下的 TUIRoom 文件夹至创建的项目中
拷贝完目录结构如下:



3. 安装依赖
HBuilderX 创建的工程不会默认创建 package.json 文件,因此您需要先创建 package.json 文件。新建终端,如下:
# 在终端输入npm init -y,创建package.json文件。
npm init -y
# 安装项目依赖
npm i @tencentcloud/tuiroom-engine-uniapp-app @tencentcloud/universal-api mitt pinia --save
4. 项目工程配置
注册pinia:TUIRoom 使用 Pinia 进行房间数据管理,您需要在项目入口文件中注册 Pinia。项目入口文件为 TUIRoomKit-Demo/main.js 文件。
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue';
import App from '@/App.vue';
import * as Pinia from 'pinia';
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia());
return {
app,
Pinia,
};
}
// #endif
配置 page.json: 为了更好的使用 TUIRoom 组件的能力,建议您在 TUIRoomKit-Demo/page.json 中新增如下配置。
"navigationStyle": "custom",
"app-plus": {
"titleNView": false
}



5. 模块配置
安卓需要使用到麦克风权限,所以需要在 App 模块配置中添加录音模块。




6. 引用 TUIRoom 组件, 填写 sdkAppId 等信息。
注意:
由于原生插件只可以在 nvue 页面中使用,所以您需要将引入 TUIRoom 组件的页面更改为 nvue 页面,详情见 nvue 使用场景
TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 initcreateRoomenterRoom 方法。
主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据,主持人可通过 createRoom 方法创建并加入房间,普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。
pages/index/index.nvue 页面中引入 TUIRoom 组件
注意:
请务必将 pages/index/index.vue 修改为 pages/index/index.nvue
<template>
<room ref="TUIRoomRef" ></room>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 引入 TUIRoom 组件,注意确认引入路径是否正确
import Room from '../../TUIRoom/index.vue';
// 获取 TUIRoom 组件元素,用于调用 TUIRoom 组件的方法
const TUIRoomRef = ref();

onMounted(async () => {
// 初始化 TUIRoom 组件
// 主持人在创建房间前需要先初始化 TUIRoom 组件
// 普通成员在进入房间前需要先初始化 TUIRoom 组件
await TUIRoomRef.value.init({
// 获取 sdkAppId 请您参考 步骤一
sdkAppId: 0,
// 用户在您业务中的唯一标示 Id
userId: '',
// 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
userSig: '',
// 用户在您业务中使用的昵称
userName: '',
// 用户在您业务中使用的头像链接
avatarUrl: '',
})
// 默认执行创建房间,实际接入可按需求择机执行 handleCreateRoom 方法
await handleCreateRoom();
})

// 主持人创建房间,该方法只在创建房间时调用
async function handleCreateRoom() {
// roomId 为用户进入的房间号, 要求 roomId 类型为 string
// roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式,默认为'FreeToSpeak',注意目前仅支持自由发言模式
// roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id)
const roomId = '123456';
const roomMode = 'FreeToSpeak';
const roomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
}
try {
await TUIRoomRef.value.createRoom({ roomId, roomName: roomId, roomMode, roomParam });
} catch (error: any) {
alert('TUIRoomKit.createRoom error: ' + error.message);
}
}

// 普通成员进入房间,该方法在普通成员进入已创建好的房间时调用
async function handleEnterRoom() {
// roomId 为用户进入的房间号, 要求 roomId 类型为 string
// roomParam 指定了用户进入房间的默认行为(是否默认开启麦克风,是否默认开启摄像头,默认媒体设备Id)
const roomId = '123456';
const roomParam = {
isOpenCamera: true,
isOpenMicrophone: true,
}
try {
await TUIRoomRef.value.enterRoom({ roomId, roomParam });
} catch (error: any) {
alert('TUIRoomKit.enterRoom error: ' + error.message);
}
}
</script>


步骤五:开启您的第一场会议

1. 制作自定义调试基座,请选择传统打包方式进行打包。



2. 自定义调试基座成功后,使用自定义基座运行项目。



3. 主持人端创建会议以及普通成员加入会议界面。




常见问题

若安卓平台,跑通出现 “ reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: (0,import pinia.defineStore) is not a function ” 错误,如何解决?




可能是 pinia 版本和 Hbuilder 版本不配置导致的,详情参见 状态管理 Pinia

交流与反馈

您在接入或使用过程有任何需要或者反馈,欢迎加入 腾讯云实时音视频 TRTC 技术交流群 进行技术交流和问题反馈。