@tencentcloud/livekit-web-vue3

TUILiveKit

TUILiveKit 是腾讯云推出的在线直播 UI 组件。本文将指导您如何快速地将 TUILiveKit 组件集成到项目中，从而为您的应用程序提供直播功能。

💻 环境准备

• Node.js 版本: Node.js ≥ 16.19.1（推荐使用官方 LTS 版本，npm 版本请与 node 版本匹配）。
• 现代浏览器，支持 WebRTC APIs。

🔗 接口文档

详细的 API 列表请参考文档: 客户端 API（TUILiveKit）。

👋 使用

步骤一：安装依赖

npm install @tencentcloud/livekit-web-vue3 pinia --save

步骤二：项目工程配置

注册 pinia: TUILive 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。

// src/main.ts 文件
import { createPinia } from 'pinia';

const app = createApp(App);
// 注册 pinia
app.use(createPinia()); 
app.mount('#app')

步骤三：引入 TUILivekit 组件

<template>
   <pre-live-view></pre-live-view>
</template>

<script setup>
import { PreLiveView } from '@tencentcloud/livekit-web-vue3';
</script>

步骤四：登陆 TUILiveKit 组件

开启直播前需要调用 login 接口进行登陆。获取 sdkAppId、userId、userSig 可参见 开通服务。

import { liveRoom } from '@tencentcloud/livekit-web-vue3';

liveRoom.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: '', 
});

步骤五：开启直播

主播可以通过调用 start 接口来开启直播，观众可以调用 join 接口加入直播间。

import { liveRoom } from '@tencentcloud/livekit-web-vue3';

const startLive = async () => {
    await liveRoom.login({    
        sdkAppId: 0,
        userId: '',
        userSig: '', 
    });
    await liveRoom.start('123456', {
      roomName: 'TestRoom',
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
startLive()

步骤六：进入直播间

观众可以通过调用 join 接口，填写对应的 roomId 参数来加入主播在 步骤五 中创建的直播间。

import { liveRoom } from '@tencentcloud/livekit-web-vue3';

const joinLive = async () => {
    await liveRoom.login({    
        sdkAppId: 0,
        userId: '',
        userSig: '', 
    });
    await liveRoom.join('123456', {
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
joinLive()

🏃 开发环境运行

1. 执行开发环境命令。（此处以 vue3 + vite 默认项目为例，不同项目 dev 指令可能不同，请根据您自己的项目进行调整）

   npm run dev
   

2. 根据控制台提示，在浏览器中打开页面 ，如：http://localhost:5173/。
3. 验 TUILiveKit 组件功能。

📦 生产环境部署

1. 打包 dist 文件.

     npm run build
   

2. 部署 dist 文件到服务器上。

📖 附录

• 如果您在示例代码中发现 bug，欢迎您提交 issue。
• 如果您在访问或使用过程中有任何需求或反馈，欢迎加入腾讯云实时音视频 TRTC 技术交流群进行技术交流和问题反馈。