Introducing TWebLive: Tencent Cloud Web Live Interactive SDK

TWebLive is a new Web live‑interactive SDK released by Tencent Cloud's terminal R&D team. By integrating this SDK, developers can quickly enable Web push/stream, low‑latency WebRTC playback, CDN playback, and real‑time chat or bullet‑screen interaction without writing complex code.

The SDK bundles three core Tencent Cloud services: TRTC (real‑time audio/video), TIM (instant messaging) and TCPlayer (super player). It provides a simple set of APIs that cover common live‑streaming scenarios such as stream publishing, microphone/camera control, sharing, chat, likes, etc.

Architecture

The component’s architecture is illustrated in the original article (image omitted). It shows how the Pusher, Player and IM modules interact with TRTC, TIM and TCPlayer services.

Key Advantages

• Replaces Flash‑based streaming solutions, reducing development complexity and time. • Supports both push and pull streams with low latency. • Provides ready‑to‑use demo projects for PC and mobile browsers. • Open‑source on GitHub, allowing developers to fork, clone and run the demo with minimal modifications.

1. Push Stream (Pusher)

Creating a Pusher object and starting a push stream can be done in three steps:

<div id="pusherView" style="width:100%; height:auto;"></div>

<script>

// 1. Create Pusher object

let pusher = TWebLive.createPusher({ userID: 'your userID' });

// 2. Set render view and enable audio/video (default 720p)

pusher.setRenderView({ elementID: 'pusherView', audio: true, video: true }).then(() => {

// 3. Fill SDK parameters and start push

let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}&livedomainname=${liveDomainName}&streamid=${streamID}`;

pusher.startPush(url).then(() => { console.log('pusher | startPush | ok'); });

}).catch(error => { console.error('pusher | setRenderView | failed', error); });

</script>

2. Pull Stream (Player)

<div id="playerView" style="width:100%; height:auto;"></div>

<script>

// 1. Create Player object

let player = TWebLive.createPlayer();

// 2. Set render view

player.setRenderView({ elementID: 'playerView' });

// 3. Provide stream URL (CDN or WebRTC)

let url = 'https://flv=...&hls=...'; // replace with actual URLs

player.startPlay(url).then(() => { console.log('player | startPlay | ok'); }).catch(error => { console.error('player | startPlay | failed', error); });

</script>

3. Real‑time Interaction (IM)

// 1. Create IM object and register events

let im = TWebLive.createIM({ SDKAppID: 0 }); // replace 0 with your IM AppID

im.on(TWebLive.EVENT.IM_READY, function(){ im.sendTextMessage({ roomID: 'your roomID', text: 'hello from TWebLive' }); });

im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, function(event){ event.data.forEach(msg => console.log((msg.from || msg.nick) + ' : ', msg.payload.text)); });

// 2. Login

im.login({ userID: 'your userID', userSig: 'your userSig' }).then(res => { console.log(res.data); }).catch(err => { console.warn('im | login | failed', err); });

// 3. Join room

im.enterRoom('your roomID').then(res => { /* handle success */ }).catch(err => { console.warn('im | enterRoom | failed', err); });

Developers can install the SDK via npm:

npm i tweblive --save

Platform Support

Web push and low‑latency playback rely on WebRTC and are fully supported on desktop Chrome, desktop Safari, and mobile Safari. Other browsers (e.g., Android browsers) have limited support. For mobile, a Mini‑Program solution is recommended, and for education scenarios an Electron solution is suggested.

Precautions

The TRTC and IM applications must share the same SDKAppID.

IM’s basic content moderation can be upgraded to professional services for custom profanity filtering.

Never expose the UserSig generation code in client‑side production; generate UserSig on a secure server.

Due to H.264 licensing, Chrome on Huawei devices and Chrome‑based WebViews do not support the TRTC desktop SDK.

Conclusion

The article demonstrates how TWebLive enables developers to implement Web push, low‑latency playback, CDN playback, and real‑time interaction with minimal effort, replacing legacy Flash solutions. Detailed integration steps, demo projects, and online demos are provided for quick experimentation.

References and further reading are listed at the end of the original article.