实时音视频 uni-app (客户端）

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 调试。
步骤1：开通服务
在使用腾讯云提供的音视频服务前，您需要前往控制台，为应用开通音视频服务。具体步骤请参见 开通服务。
步骤2：创建 uni-app 项目
打开 Hbuilderx 开发工具，点击新建 uni-app 项目：项目名称 (TUIRoomKit-Demo)。
注意：
目前只支持 ts + vite + vue3 工程
如果您已有自己的 uni-app 工程，可跳过该步骤。如果没有，可选择以下方式生成模板工程。
﻿
﻿
﻿
步骤3：下载并导入 TUIRoomEngine 插件
1. 访问 TencentCloud-TUIRoomEngine 插件，在插件详情页中购买插件，购买插件时选择对应的 AppID，绑定正确的包名。
﻿
﻿
﻿
2. 在 TUIRoomKit-Demo 项目中导入插件。
﻿
﻿
﻿
步骤4：下载并导入 TUIRoomKit 组件
1. 下载 github 源码, 建议下载到和步骤一创建的项目同级目录
git clone https://github.com/Tencent-RTC/TUIRoomKit.git﻿
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/chat @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
配置 pages.json： 为了更好的使用 TUIRoom 组件的能力，建议您在 TUIRoomKit-Demo/pages.json 中新增如下配置。 
"navigationStyle": "custom",
"app-plus": {
  "titleNView": false
}
﻿
﻿
﻿
5. 模块配置
安卓需要使用到麦克风权限，所以需要在 App 模块配置中添加录音模块。
﻿
﻿
﻿
6. 引用 TUIRoom 组件, 填写 sdkAppId 等信息。
注意：
由于原生插件只可以在 nvue 页面中使用，所以您需要将引入 TUIRoom 组件的页面更改为 nvue 页面，详情见 nvue 使用场景。
在 pages/index/index.nvue 页面中引入 TUIRoom 组件
注意：
请务必将 pages/index/index.vue 修改为 pages/index/index.nvue。
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
﻿
﻿
<script setup lang="ts">
import ConferenceMainView from '../TUIRoom/conference.vue';
import { conference } from '../TUIRoom/index.ts';
﻿
onMounted(async () => {
    await conference.login({    
        // 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842﻿
        sdkAppId: 0,
        // 用户在您业务中的唯一标示 Id
        userId: '',
        // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
        userSig: '', 
    });
    await conference.start('123456', {
      roomName: 'TestRoom',
      isSeatEnabled: false,
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
     await conference.join('123456', {
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
</script>
﻿
步骤5：开启您的第一场会议
1. 制作自定义调试基座，请选择传统打包方式进行打包。
﻿
﻿
﻿
2. 自定义调试基座成功后，使用自定义基座运行项目。
﻿
﻿
﻿
3. 主持人端创建会议以及普通成员加入会议界面。
﻿
﻿
﻿
常见问题
1. 若安卓平台，跑通出现 “ 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。
2. 若 iOS 平台打包自定义基座时，出现体积超过40M的提示。如何解决？
这是和其他原生插件一块使用时造成的体积超出，详情见：本地 uni-app 原生插件提交云端打包。
更多特性
﻿设置昵称、头像﻿

uni-app (客户端）

本页目录：

TUIRoomKit Demo 体验

开发环境要求

步骤1：开通服务

步骤2：创建 uni-app 项目

步骤3：下载并导入 TUIRoomEngine 插件

步骤4：下载并导入 TUIRoomKit 组件

步骤5：开启您的第一场会议

常见问题

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

2. 若 iOS 平台打包自定义基座时，出现体积超过40M的提示。如何解决？

更多特性