集成

功能预览
TUILiveKit 是一个功能全面的直播组件，集成后可快速实现以下功能模块：
﻿
准备工作
开通服务
在使用 TUILiveKit 前，您需要在 腾讯云控制台 开通相关服务，并领取体验版或者开通付费版。
环境要求
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 进行调试。
登录接口参数说明
参数
类型
说明
SDKAppID
Int
从 TRTC 控制台 > 应用管理 获取。
UserID
String
当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。
userSig
String
用于腾讯云鉴权的票据。请注意：
开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 UserSig 或者通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参见 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。
步骤3：功能体验
恭喜您，现在您已经成功集成了视频直播组件并完成了登录。接下来，您可以开始主播开播、观众观看或实现其他直播功能，具体功能细节可参考下表。
功能
描述
体验链接
主播开播
主播开播全流程功能，包括开播前的准备和开播后的各种互动。
﻿主播开播﻿
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。
﻿观众观看﻿
推流助手
提供了一整套开箱即用的直播推流界面和功能，包括：视频源控制、连麦功能、观众互动、横竖屏开播、观众管理。
﻿推流助手﻿
直播列表
展示直播列表界面和功能，包含直播列表，房间信息展示功能。
﻿直播列表﻿
常见问题
为什么接入 TUILiveKit 后，必须使用 HTTPS 协议部署？
如果您需要部署项目打包的 dist 文件，生产环境下必须使用 HTTPS 域名。TUILiveKit 底层依赖 WebRTC 功能，也可能访问用户的摄像头、麦克风、扬声器等物理设备，浏览器厂商为了保护用户数据安全和隐私安全，要求必须使用 HTTPS 协议。
注意：
URL 域名协议限制
由于浏览器安全策略的限制，使用 WebRTC 能力对页面的访问协议有严格的要求，请参照以下表格进行开发和部署应用。
应用场景
协议
接收（播放）
发送（上麦）
屏幕分享
备注
生产环境
HTTPS 协议
支持
支持
支持
推荐
生产环境
HTTP 协议
支持
不支持
不支持
-
本地开发环境
http://localhost
支持
支持
支持
推荐
本地开发环境
http://127.0.0.1
支持
支持
支持
-
本地开发环境
http://[本机IP]
支持
不支持
不支持
-
本地开发环境
file:///
支持
支持
支持
-

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

功能	描述	体验链接
主播开播	主播开播全流程功能，包括开播前的准备和开播后的各种互动。	主播开播
观众观看	实现观众进入主播的直播间后观看直播，实现观众连麦、直播间信息、在线观众、弹幕显示等功能。	观众观看
推流助手	提供了一整套开箱即用的直播推流界面和功能，包括：视频源控制、连麦功能、观众互动、横竖屏开播、观众管理。	推流助手
直播列表	展示直播列表界面和功能，包含直播列表，房间信息展示功能。	直播列表

应用场景	协议	接收（播放）	发送（上麦）	屏幕分享	备注
生产环境	HTTPS 协议	支持	支持	支持	推荐
生产环境	HTTP 协议	支持	不支持	不支持	-
本地开发环境	http://localhost	支持	支持	支持	推荐
本地开发环境	http://127.0.0.1	支持	支持	支持	-
本地开发环境	http://[本机IP]	支持	不支持	不支持	-
本地开发环境	file:///	支持	支持	支持	-