tencent cloud

直播 SDK

动态与公告
TUILiveKit 产品动态
云直播推拉流 SDK 产品动态
新手指引
产品简介
产品概述
产品优势
性能数据
基本概念
购买指南
TRTC Live 价格总览
Live 视频直播计费说明
开通服务(TUILiveKit)
Demo 体验
Demo 体验指引
跑通 Demo(TUILiveKit)
接入指南
视频直播
准备工作
主播开播
观众观看
直播列表
语聊房
准备工作
主播开播
观众观看
直播列表
推流助手
推流助手(Electron 桌面应用)
推流助手(Web 桌面浏览器)
直播监播
监播页面(Web 桌面浏览器 React 版)
监播页面(Web 桌面浏览器 Vue 版)
UI 自定义
直播视频组件
视频源编辑组件
观众列表组件
聊天弹幕组件
媒体源配置面板
连麦管理面板
直播送礼组件
无 UI 集成
搭建视频直播
搭建语聊房
功能指南
关注主播(TUILiveKit)
至臻画质(TUILiveKit)
输入媒体流进房(TUILiveKit)
礼物系统(TUILiveKit)
客户端 API
Android
iOS
Web
服务端 API(TUILiveKit)
账号系统
REST API
第三方回调
错误码(TUILiveKit)
常见问题
平台编译
用户鉴权
云直播推拉流 SDK
产品简介
购买指南
Demo 体验
免费测试
SDK 下载
License 管理
高级功能
客户端 API
常见问题
无 UI 集成方案
API 文档
OSS information
OSS Attribution Notice
文档直播 SDK视频直播准备工作准备工作(Web 桌面浏览器)

准备工作(Web 桌面浏览器)

PDF
聚焦模式
字号
最后更新时间: 2026-01-14 20:07:44

功能预览

TUILiveKit 是一个功能全面的直播组件,集成后可快速实现以下功能模块:


准备工作

开通服务

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

环境要求

Vue 3 + Composition API:利用 Vue 3 的最新特性,构建高性能、可维护的应用。
TypeScript:通过静态类型检查,提升代码质量和开发效率。
SCSS Module:实现模块化样式管理,有效避免样式冲突。

配置要求

Node.js: ≥ 18.19.1 (推荐使用官方 LTS 版本)
Vue: ≥ 3.4.21
现代浏览器: 支持 WebRTC APIs 的现代浏览器

代码集成

步骤1:安装依赖

您可选择以下任一方式安装依赖:
npm
pnpm
yarn
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
pnpm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
yarn install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3

步骤2:完成登录

import { useLoginState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();

async function initLogin() {
try {
await login({
sdkAppId: 0, // SDKAppID, 可以参考步骤 1 获取
userId: '', // UserID, 可以参考步骤 1 获取
userSig: '', // userSig, 可以参考步骤 1 获取
});
} catch (error) {
console.error('登录失败:', error);
}
}

注意:
安全提醒: 出于安全考虑,强烈建议将 userSig 的计算逻辑放在您的服务端进行,避免将 SecretKey 暴露在前端代码中。您可以使用 控制台辅助工具 生成临时 userSig 进行调试。 更多信息参见 如何计算及使用 UserSig。GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程,但该方案会将您的 SecretKey 暴露在代码当中,这并不利于您后续升级和保护您的 SecretKey。参数说明如下表所示:
参数
类型
说明
SDKAppID
int
从控制台获取,国内站通常是以 140160 开头的 10 位整数。
UserID
String
当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突,请勿使用 1123 等简单 ID
userSig
String
用于腾讯云鉴权的票据。请注意:
开发环境:您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。

步骤3:功能体验

恭喜您,现在您已经成功集成了视频直播组件并完成了登录。接下来,您可以开始主播开播、观众观看或实现其他直播功能,具体功能细节可参考下表。
功能
描述
体验链接
主播开播
主播开播全流程功能,包括开播前的准备和开播后的各种互动
观众观看
实现观众进入主播的直播间后观看直播,实现观众连麦 、直播间信息、在线观众、弹幕显示等功能
推流助手
提供了一整套开箱即用的直播推流界面和功能,包括:视频源控制、连麦功能、观众互动、横竖屏开播、观众管理
直播列表
展示直播列表界面和功能,包含直播列表,房间信息展示功能

常见问题

如果您需要部署项目打包的 dist 文件,生产环境下必须使用 HTTPS 域名
注意:
页面访问协议说明
浏览器厂商出于对用户安全、隐私等问题的考虑,限制网页在 HTTPS 协议下才能正常使用 TRTC Web SDK(WebRTC)的全部功能。为确保生产环境用户顺畅接入和体验TRTC Web SDK 的全部功能,请使用 https 协议访问音视频应用页面。

注:本地开发可以通过 http://localhost 或者 file://协议进行访问。

URL域名及协议支持情况请参考如下表格:
应用场景
协议
接收(拉流)
发送(推流)
屏幕分享
备注
生产环境
HTTPS 协议
支持
支持
支持
推荐
生产环境
HTTP 协议
支持
不支持
不支持
-
本地开发环境
http://localhost
支持
支持
支持
推荐
本地开发环境
http://127.0.0.1
支持
支持
支持
-
本地开发环境
http://[本机IP]
支持
不支持
不支持
-
本地开发环境
file://
支持
支持
支持
-





帮助和支持

本页内容是否解决了您的问题?

填写满意度调查问卷,共创更好文档体验。

文档反馈