BUILT FOR ELECTRON
Electron Live Streaming UI Kit
Build a desktop studio with Tencent RTC’s Electron Live Streaming UI Kit. Arrange camera, screen, and image sources, preview your layout, and start a broadcast.
DEVELOPER RESOURCES
Electron Live Streaming UI Kit Docs & Examples
Integration Guides
Install the Electron Live Streaming UI Kit and connect your users.
Examples & Source
See the product in action and explore its implementation.
Produce Live Events with Electron
Combine camera and screen sources in a desktop preview. Prepare the layout for a live presentation before starting the broadcast.
Connect Your Studio to Web Viewers
Pair the desktop broadcasting studio with an audience implementation. Keep production controls on the desktop and viewing controls in your audience app.
ELECTRON LIVE CAPABILITIES
Electron Live Broadcasting Features
Build the scene
- Camera and screen sources
- Image and window inputs
Prepare the show
- Preview before broadcasting
- Arrange source layouts
Go live
- Desktop production workflow
- Connect an audience client
Explore the Electron Live Studio
Prepare a desktop broadcast with media sources, scene layouts, and a preview before going live.
Start with the official studio
Use the Electron sample as the foundation for a desktop broadcasting workflow.
Read the Documentationgit clone https://github.com/Tencent-RTC/ultra-live-electron.gitBring the studio to your desktop
Install the project dependencies before configuring your application.
Read the Documentationcd ultra-live-electron
npm installPreview before you broadcast
Start the configured app, add your sources, and choose a layout.
Read the Documentationnpm run startCUSTOMIZATION
Customize Your Electron Broadcast Studio
Arrange camera, screen, and image sources in the desktop layout your broadcast needs.
Your visual identity
Adjust the visual presentation using the customization options available on your platform.
Read the DocumentationComments & content
Arrange camera, screen, window, and image sources for your broadcast.
Read the DocumentationGET STARTED
Build Your Electron Live Streaming Studio
- 01
- 02
Add the Electron Live Streaming UI Kit
Follow the platform guide to connect your project.
Follow the Integration Guide - 03
Connect your first room
Configure the sample, add a source, and preview your broadcast.
Set Up Authentication
git clone https://github.com/Tencent-RTC/ultra-live-electron.gitcd ultra-live-electron
npm install
npm run startElectron Live Streaming UI Kit FAQs
Is the Electron Live Streaming UI Kit a viewer app or a broadcasting studio?
The Electron Live Streaming UI Kit is a desktop broadcasting studio with multiple media sources and layout controls. Pair it with an audience implementation to watch the resulting live stream.
What do I need before trying the interface?
Enable the Live service and sign in with a valid UserSig. Complete the platform guide, including native permissions or browser HTTPS requirements, and test with separate host and audience accounts.
How do I authenticate users of the Electron Live Streaming UI Kit?
Create a UserSig on your server and pass it to the client after your own sign-in flow. Keep the application secret on your server.
Is the Electron Live Streaming UI Kit free to use?
The interface and the hosted Live service have different roles. Activate the service for your application and review the current plan, feature availability, and usage charges.
How do I integrate Electron Live Streaming UI Kit with Electron?
Follow the desktop package and native dependency requirements. Test device access, window changes and resource cleanup in your packaged desktop application.
How do I test Electron Live Streaming UI Kit before releasing my app?
Test the host and viewer roles, supported publishing or playback events and reconnect behavior.
How do I customize the interface for Electron Live Streaming UI Kit?
Customize the ultra-live-electron desktop studio source and its media-source layout. For example, place a screen capture behind a smaller camera view, then move, resize, rotate, or reorder the sources using the studio controls. The documented demo supports Windows 10 or later and provides broadcasting only. Build or integrate the viewer experience separately; React or Vue browser UI Kit theme props do not configure this Electron sample.
Electron Live Integration Support
Integration questions
Get setup help for the Electron Live Streaming UI Kit.
View Developer DocumentationTalk about your application
Discuss your product, expected usage, and integration needs.
Contact SalesCreate Your Electron Broadcast Studio
Start with the Electron Live Streaming UI Kit project and prepare your first broadcast.

