BUILT FOR WEB

Web Live Streaming SDK

Build browser broadcasts with Tencent RTC’s Web Live Streaming SDK for Vue 3. Combine AtomicXCore room APIs and video views with your own host and audience interface.

Start Building Explore Live Demo

DEVELOPER RESOURCES

Web Live Streaming SDK Docs & Examples

API Reference

Explore the Web Live Streaming SDK APIs.

Explore the APIs User Authentication

Integration Guides

Install the Web Live Streaming SDK and connect your users.

Web Integration Quick Start

Examples & Source

See the product in action and explore its implementation.

Explore Live Demo View Web Source

Live Product Demos in Web

Let viewers follow a creator’s product demonstration and join the conversation. Your application manages the catalog and purchasing experience.

Explore Live Shopping

Live Event Viewing in Web

Bring a presentation and its audience into your Web app. Connect the viewing screen to the room so people can follow the live event.

Explore Event Streaming

WEB LIVE CAPABILITIES

Web Live Streaming Features

Go live

Host and audience roles
Room lifecycle management

Bring people together

Live video playback
Audience participation

Make it yours

Flexible application layout
Platform-specific building blocks

Explore Web Live Streaming APIs

Connect AtomicXCore video views and room state to your Web host and audience interface.

Video canvas

Add a Web Live Video View

Place the AtomicXCore video view in your Web layout. Bind it to room state while your application supplies the surrounding controls and navigation.

Read the Documentation

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

<template><StreamMixer /></template>

Go live

Start Live Streaming in Web

Authenticate the host, prepare local audio and video, and create the live room. Use the same room ID for the media view and room lifecycle.

Read the Documentation

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

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

Join a room

Bring viewers into the moment

Use the same room ID to connect your audience.

Read the Documentation

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

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

CUSTOMIZATION

Customize Your Web Live Interface

Arrange video, audience interactions, and navigation around the live experience in your Web app.

Your layout

Build your interface around the core video canvas and room state.

Read the Documentation

GET STARTED

Add Live Streaming to Your Web App

01
Create your app
Enable Live for your application and test users.
Open Live Console
02
Add the Web Live Streaming SDK
Follow the platform guide to connect your project.
Follow the Integration Guide
03
Connect your first room
Use one account to broadcast and another to watch.
Set Up Authentication

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 Live Streaming SDK FAQs

Does the Web Live Streaming SDK include a video view?

The Web Live Streaming SDK includes AtomicXCore video views and room state APIs. Your app supplies the host and audience interface around those views; choose TUILiveKit for ready-made screens.

How does this SDK fit with UI Kit?

Use the SDK APIs to build your own interface. Choose the UI Kit when you want ready-made screens and controls.

Vue Live Streaming UI Kit

Which web framework does this integration use?

The linked Core SDK guide uses tuikit-atomicx-vue3. For a ready-made React viewer experience, use the React Live UI Kit.

React Live Streaming UI Kit

How do I authenticate users of the Web Live Streaming SDK?

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.

Read the Authentication Guide

Is the Web Live Streaming SDK 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.

View Live Pricing

How do I integrate Web Live Streaming SDK with a browser application?

Follow the browser setup and supported environment requirements. Test permissions where used, navigation and cleanup in the actual browsers you intend to support.

Read the platform guide

How do I test Web Live Streaming SDK before releasing my app?

Test the host and viewer roles, supported publishing or playback events and reconnect behavior.

Read the platform guide

How do I customize the interface for Web Live Streaming SDK?

Use supported host and viewer APIs with your own interface. Your app owns commerce, ticketing or playback-rights workflows.

Read the platform guide

Web Live Integration Support

Integration questions

Get setup help for the Web Live Streaming SDK.

View Developer Documentation

Talk about your application

Discuss your product, expected usage, and integration needs.

Contact Sales

Bring Live Streaming to Your Web App

Connect creators and audiences with the Web Live Streaming SDK and its platform guides.

Get started for free View the SDK Guide

Web Live Streaming SDK

Web Live Streaming SDK Docs & Examples

API Reference

Integration Guides

Examples & Source

Live Product Demos in Web

Live Event Viewing in Web

Web Live Streaming Features

Go live

Bring people together

Make it yours

Explore Web Live Streaming APIs

Add a Web Live Video View

Start Live Streaming in Web

Bring viewers into the moment

Customize Your Web Live Interface

Your layout

Audience interactions

Add Live Streaming to Your Web App

Create your app

Add the Web Live Streaming SDK

Connect your first room

Web Live Streaming SDK FAQs

Does the Web Live Streaming SDK include a video view?

How does this SDK fit with UI Kit?

Which web framework does this integration use?

How do I authenticate users of the Web Live Streaming SDK?

Is the Web Live Streaming SDK free to use?

How do I integrate Web Live Streaming SDK with a browser application?

How do I test Web Live Streaming SDK before releasing my app?

How do I customize the interface for Web Live Streaming SDK?

Web Live Integration Support

Integration questions

Talk about your application

Bring Live Streaming to Your Web App