即时通信 IM 准备工作（uni-app 客户端）

一、功能预览

主播预览页	主播直播页	连麦管理页	观众观看页

二、开通服务

在使用 TUILiveKit 前，你需要在 TRTC 控制台开通相关服务，并领取体验版或者开通付费版。

三、开发环境要求

注意：说明：

注意：HBuilderX 4.64 和 4.65 版本对 UTS 插件打包存在已知兼容性问题，建议使用 4.66 或更高版本。

·HBuilderX：HBuilderX 是 uni-app 的集成开发环境（IDE），我们需要用它来导入、配置和运行我们的 Demo。

·2个移动设备： Android 5.0 以上的设备 / iOS 13.0 及以上设备。

四、步骤 1：下载 TUILiveKit 源码

1. 克隆项目源码

git clone https://github.com/Tencent-RTC/TUIKit_uni-app.git

2. 导入 atomic-x 组件

·将源码中 TUIKit_uni-app/App/uni_modules 目录下的 tuikit-atomic-x文件夹，完整拷贝到你项目根目录下的 uni_modules 文件夹中。

·将源码中 TUIKit_uni-app/App/components 下的文件，完整的拷贝到你项目的 components 文件夹中。

·将源码中 TUIKit_uni-app/App/static 目录下的文件，完整拷贝到你项目根目录下的同名文件夹下。

3. 拷贝直播开播等页面

·将源码中 TUIKit_uni-app/App/pages目录下的文件，完整拷贝到你项目根目录下的同名文件夹中。

·将源码中 TUIKit_uni-app/App/debug 文件夹拷贝到你项目的根目录下，这个目录提供有可以方便你在客户端快速生成的 UserSig 的快捷函数。

4. 合并 App.vue 配置。

TUIKit_uni-app/App/App.vue 文件中包含直播能力的初始化逻辑，因此你需要将 TUIKit_uni-app/App/App.vue 文件和你项目下的 App.vue 文件进行合并。

注意：不要直接覆盖 App.vue 文件！打开源码中的 TUIKit_uni-app/App/App.vue，将其 <script> 部分的 ts 内容追加到你自己项目的 App.vue 的 <script> 标签内。

五、步骤 2：工程配置

1. 配置 manifest.json

打开你项目的 manifest.json 文件，在 app-plus > distribute 节点下，确保添加了以下必要的权限：

·Android 平台（android节点）：在 permissions 数组中，请确保包含以下权限：

"<uses-permission android:name=\\"android.permission.CAMERA\\"/>","<uses-permission android:name=\\"android.permission.RECORD_AUDIO\\" />","<uses-permission android:name=\\"android.permission.INTERNET\\"/>","<uses-permission android:name=\\"android.permission.ACCESS_NETWORK_STATE\\"/>","<uses-permission android:name=\\"android.permission.WRITE_EXTERNAL_STORAGE\\"/>"

·iOS 平台（ios 节点）：在 privacyDescription 对象中，请确保包含以下描述：

"NSCameraUsageDescription" : "应用需要访问你的相机以进行直播","NSMicrophoneUsageDescription" : "应用需要访问你的麦克风以进行直播"

在 UIBackgroundModes 数组中，添加 audio 以支持后台播放音频。

"UIBackgroundModes" : [ "audio" ]

2. 制作自定义基座。

注意：说明：

注意：由于 TUILiveKit 包含原生代码（UTS 插件），你必须制作自定义调试基座才能在真机上运行。

2.1 在 HBuilderX 顶部菜单选择运行 > 运行到手机或模拟器 > 制作自定义调试基座。

2.2 制作成功后，再次选择运行 > 运行到手机或模拟器，在弹窗中勾选使用自定义调试基座后运行到你的手机。

具体操作指引参见跑通 Demo 的步骤4。

六、完成登录

集成完成后，你需要完成登录。在你项目中需要使用到直播能力的地方进行登录，这是使用 TUILiveKit 的关键步骤，因为只有在登录成功后才能正常使用 TUILiveKit 的各项功能，故请你耐心检查相关参数是否配置正确：

import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";const { login } = useLoginState();onMounted(() => { login({ sdkAppID: 1400000001, // 请替换为开通服务控制台的 SDKAppID userID: "denny", // 请替换为你的 UserID userSig: "xxxxxxxxxxx", // 你可以在控制台中计算一个 UserSig 并填在这个位置 });});

登录接口参数说明

参数	类型	说明
SDKAppID	Number	从 TRTC 控制台 > 应用管理获取。
userID	String	当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。
userSig	String	用于腾讯云鉴权的票据。请注意：开发环境：你可以采用本地 GenerateTestUserSig.genTestSig 函数生成 UserSig 或者通过 UserSig 辅助工具生成临时的 UserSig。生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参见服务端生成 UserSig。更多信息请参见如何计算及使用 UserSig。

七、接入直播功能

恭喜你，现在你已经成功集成了视频直播组件并完成了登录。接下来，你可以开始接入主播开播、观众观看功能或实现其他直播功能。