专为以下场景打造：ELECTRON

Electron 直播 UI Kit

使用 Tencent RTC 的 Electron Live Streaming UI Kit 构建桌面导播工作室。排列摄像头、屏幕和图片源，预览布局，然后开始直播。

开始构建探索 Live 演示

开发者资源

Electron 直播 UI Kit 文档与示例

组件参考

探索 Electron 直播 UI Kit 组件。

探索组件用户身份验证

接入指南

安装 Electron 直播 UI Kit 并连接用户。

Electron 集成快速入门

示例与源码

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

探索 Live 演示查看 Electron 源代码

使用 Electron 制作直播活动

在桌面端预览中组合摄像头和屏幕来源。开播前为直播演示准备好布局。

探索活动直播

将您的演播室连接到 Web 观众

将桌面端导播台与观众端实现配合使用。在桌面端保留制作控制，在观众应用中提供观看控制。

探索 Vue 直播 UI Kit

ELECTRON LIVE 功能

Electron 直播功能

构建场景

摄像头和屏幕源
图像和窗口输入源

筹备节目

开播前预览
编排信号源布局

开始直播

桌面端制作工作流
连接观众端客户端

探索 Electron Live Studio

使用媒体源、场景布局和预览功能准备桌面端直播，然后再正式开播。

Studio 项目

从官方导播台开始

以 Electron 示例为基础构建桌面端直播工作流。

阅读文档

git clone https://github.com/Tencent-RTC/ultra-live-electron.git

项目设置

将直播工作室带到桌面端

配置应用前，请先安装项目依赖项。

阅读文档

cd ultra-live-electron
npm install

运营直播间

开播前预览

启动已配置的应用，添加信号源并选择布局。

阅读文档

npm run start

个性化定制

自定义您的 Electron 播出演播室

根据转播需求，在桌面端布局中组织摄像头、屏幕和图片信号源。

您的视觉品牌形象

使用平台提供的自定义选项调整视觉呈现。

阅读文档

开始使用

打造您的 Electron 直播工作室

01
创建您的应用
为应用和测试用户启用 Live。
打开 Live 控制台
02
添加 Electron 直播 UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
连接到您的第一个房间
配置示例、添加信号源并预览直播。
配置身份验证

Electron Live UI Kit

git clone https://github.com/Tencent-RTC/ultra-live-electron.git

cd ultra-live-electron
npm install
npm run start

Electron 直播 UI Kit 常见问题

Electron Live Streaming UI Kit 是观众应用还是导播工作室？

Electron Live Streaming UI Kit 是一款桌面直播工作室，支持多个媒体源和布局控制。将其与观众端实现搭配使用，即可观看生成的直播流。

Vue 直播 UI Kit

试用该界面前需要准备什么？

启用 Live 服务并使用有效的 UserSig 登录。完成平台指南中的配置，包括原生权限或浏览器 HTTPS 要求，并使用不同的主播和观众账号进行测试。

如何验证 Electron Live Streaming UI Kit 的用户身份？

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

阅读身份验证指南

Electron Live Streaming UI Kit 可以免费使用吗？

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

查看 Live 定价

如何将 Electron 直播 UI Kit 集成到 Electron 项目中？

遵循桌面包与原生依赖要求，在打包的桌面应用中测试设备访问、窗口变化和资源清理。

阅读平台指南

发布应用前如何测试 Electron 直播 UI Kit？

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

阅读平台指南

如何定制 Electron 直播 UI Kit 的界面？

自定义 ultra-live-electron 桌面直播工作台源码及其媒体源布局。例如，将屏幕采集画面放在较小的摄像头画面后方，再通过工作台控件移动、缩放、旋转媒体源或调整其层级。文档中的 Demo 支持 Windows 10 及以上版本，仅提供主播推流功能。观众体验需单独构建或集成；React 或 Vue 浏览器端 UI Kit 的主题 props 无法配置这个 Electron 示例。

查看定制指南

Electron Live 集成支持

集成问题

获取 Electron 直播 UI Kit 的配置帮助。

查看开发者文档

讨论您的应用

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

联系销售人员

创建您的 Electron 直播工作室

从 Electron Live Streaming UI Kit 项目开始，准备您的首场直播。

免费开始查看 UI Kit 指南

Electron 直播 UI Kit

Electron 直播 UI Kit 文档与示例

组件参考

接入指南

示例与源码

使用 Electron 制作直播活动

将您的演播室连接到 Web 观众

Electron 直播功能

构建场景

筹备节目

开始直播

探索 Electron Live Studio

从官方导播台开始

将直播工作室带到桌面端

开播前预览

自定义您的 Electron 播出演播室

您的视觉品牌形象

评论与内容

打造您的 Electron 直播工作室

创建您的应用

添加 Electron 直播 UI Kit

连接到您的第一个房间

Electron 直播 UI Kit 常见问题

Electron Live Streaming UI Kit 是观众应用还是导播工作室？

试用该界面前需要准备什么？

如何验证 Electron Live Streaming UI Kit 的用户身份？

Electron Live Streaming UI Kit 可以免费使用吗？

如何将 Electron 直播 UI Kit 集成到 Electron 项目中？

发布应用前如何测试 Electron 直播 UI Kit？

如何定制 Electron 直播 UI Kit 的界面？

Electron Live 集成支持

集成问题

讨论您的应用

创建您的 Electron 直播工作室