功能预览
TUILiveKit 是一个功能全面的直播组件，集成后可快速实现以下功能模块：
准备工作
开通服务
环境要求
Vue 3 + Composition API：利用 Vue 3 的最新特性，构建高性能、可维护的应用。
TypeScript：通过静态类型检查，提升代码质量和开发效率。
SCSS Module：实现模块化样式管理，有效避免样式冲突。
配置要求
Node.js: ≥ 18.19.1 (推荐使用官方 LTS 版本)
Vue: ≥ 3.4.21
现代浏览器: 支持 WebRTC APIs 的现代浏览器
代码集成
步骤1：安装依赖
您可选择以下任一方式安装依赖：
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 | |
UserID | String | 当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，请勿使用 1、123 等简单 ID。 |
userSig | String | 用于腾讯云鉴权的票据。请注意： 开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 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:// | 支持 | 支持 | 支持 | - |
