专为以下场景打造：WEB

Web 直播 SDK

使用 Tencent RTC 的 Web Live Streaming SDK for Vue 3 构建浏览器直播。将 AtomicXCore 房间 API 和视频视图与您自定义的主播及观众界面相结合。

开始构建探索 Live 演示

开发者资源

Web 直播 SDK 文档与示例

API 参考

探索 Web 直播 SDK API。

探索 API 用户身份验证

接入指南

安装 Web 直播 SDK 并连接用户。

Web 集成快速入门

示例与源码

查看产品的实际运行效果并了解其实现方式。

探索 Live 演示查看 Web 源代码

Web 端实时产品演示

让观众观看创作者的商品演示并参与对话。您的应用负责管理商品目录和购买体验。

探索直播购物

Web 端直播活动观看体验

将演示文稿及其观众带入您的 Web 应用。将观看屏幕连接到房间，让人们可以观看直播活动。

探索活动直播

WEB LIVE 功能

Web 直播功能

开始直播

主播和观众角色
房间生命周期管理

让人们相聚

直播视频播放
观众参与

打造属于您的产品体验

灵活的应用布局
平台专属构建模块

探索 Web 直播 API

将 AtomicXCore 视频视图和房间状态连接到 Web 主播端与观众端界面。

视频画布

添加 Web 直播视频视图

将 AtomicXCore 视频视图放入您的 Web 布局。将其绑定到直播间状态，同时由您的应用提供周边控件和导航。

阅读文档

<script setup>
import { StreamMixer } from "tuikit-atomicx-vue3";
</script>

<template><StreamMixer /></template>

开始直播

在 Web 中开始直播

验证主播身份，准备本地音视频，并创建直播房间。媒体视图和房间生命周期应使用同一个房间 ID。

阅读文档

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

const { createLive } = useLiveListState();
await createLive({ liveId, liveName: 'Studio sessions' });

加入房间

让观众身临其境

使用相同的房间 ID 连接观众。

阅读文档

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

const { joinLive } = useLiveListState();
await joinLive({ liveId });

个性化定制

自定义您的 Web Live 界面

在 Web 应用中围绕直播体验组织视频、观众互动和导航。

您的布局

围绕核心视频画布和房间状态构建界面。

阅读文档

开始使用

为您的 Web 应用添加直播

01
创建您的应用
为应用和测试用户启用 Live。
打开 Live 控制台
02
添加 Web 直播 SDK
按照平台指南连接您的项目。
按照集成指南操作
03
连接到您的第一个房间
使用一个账户开播，另一个账户观看。
配置身份验证

Web Live SDK

npm install tuikit-atomicx-vue3

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

const { login } = useLoginState();
await login({ sdkAppId: SDKAppID, userId: userID, userSig });

Web 直播 SDK 常见问题

Web Live Streaming SDK 是否包含视频视图？

Web Live Streaming SDK 包含 AtomicXCore 视频视图和房间状态 API。您的应用围绕这些视图提供主播端和观众端界面；如需开箱即用的界面，请选择 TUILiveKit。

此 SDK 如何与 UI Kit 配合使用？

使用 SDK API 构建自定义界面。如果需要现成的页面和控件，请选择 UI Kit。

Vue 直播 UI Kit

此集成使用哪种 Web 框架？

链接的 Core SDK 指南使用 tuikit-atomicx-vue3。如需开箱即用的 React 观众端体验，请使用 React Live UI Kit。

React 直播 UI Kit

如何对 Web Live Streaming SDK 的用户进行身份验证？

在您的服务器上创建 UserSig，并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。

阅读身份验证指南

Web Live Streaming SDK 可以免费使用吗？

该界面与托管式 Live 服务承担不同的职责。请为您的应用开通该服务，并查看当前套餐、功能可用性和使用费用。

查看 Live 定价

如何将 Web 直播 SDK 集成到浏览器应用项目中？

按指南配置浏览器并满足受支持环境要求。在计划支持的实际浏览器中测试所用权限、导航和清理。

阅读平台指南

发布应用前如何测试 Web 直播 SDK？

测试主播与观众角色、支持的推流或播放事件及重连行为。

阅读平台指南

如何定制 Web 直播 SDK 的界面？

使用支持的主播与观众 API 构建自己的界面。电商、票务或播放权限流程由应用负责。

阅读平台指南

Web Live 集成支持

集成问题

获取 Web 直播 SDK 的配置帮助。

查看开发者文档

讨论您的应用

讨论您的产品、预期用量和集成需求。

联系销售人员

为您的 Web 应用加入直播功能

使用 Web Live Streaming SDK 及其平台指南连接创作者与观众。

免费开始查看 SDK 指南

Web 直播 SDK

Web 直播 SDK 文档与示例

API 参考

接入指南

示例与源码

Web 端实时产品演示

Web 端直播活动观看体验

Web 直播功能

开始直播

让人们相聚

打造属于您的产品体验

探索 Web 直播 API

添加 Web 直播视频视图

在 Web 中开始直播

让观众身临其境

自定义您的 Web Live 界面

您的布局

观众互动

为您的 Web 应用添加直播

创建您的应用

添加 Web 直播 SDK

连接到您的第一个房间

Web 直播 SDK 常见问题

Web Live Streaming SDK 是否包含视频视图？

此 SDK 如何与 UI Kit 配合使用？

此集成使用哪种 Web 框架？

如何对 Web Live Streaming SDK 的用户进行身份验证？

Web Live Streaming SDK 可以免费使用吗？

如何将 Web 直播 SDK 集成到 浏览器应用 项目中？

发布应用前如何测试 Web 直播 SDK？

如何定制 Web 直播 SDK 的界面？

Web Live 集成支持

集成问题

讨论您的应用

为您的 Web 应用加入直播功能

如何将 Web 直播 SDK 集成到浏览器应用项目中？