功能预览
TUILiveKit 是一个功能全面的直播组件，集成后可快速实现以下功能模块：
准备工作
1. 开通服务
2. 环境要求
Vue 3 + Composition API：利用 Vue 3 的最新特性，构建高性能、可维护的应用。
TypeScript：通过静态类型检查，提升代码质量和开发效率。
SCSS Module：实现模块化样式管理，有效避免样式冲突。
3. 配置要求
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 域名。
注意：
