Overview

TWebLive is Tencent Cloud's interactive live streaming component for web. A new SDK developed by Tencent Cloud's terminal R&D team, it integrates TRTC, IM, and TCPlayer, and offers features common for web-based interactive live streaming, including stream publishing, mic on/off, camera on/off, sharing and watch on WeChat, chatting, and liking. It also comes with easy-to-use APIs that can be used for stream publishing, playback, and real-time chatting.

Strengths

The TWebLive SDK offers a substitute for flash streaming and significantly simplifies the process of implementing web-based stream publishing, web-based low-latency playback, CDN streaming, and real-time chatting (or on-screen comments). The example below guides you through the implementation process.

1. Push

To use the stream pushing feature, you need to create a pusher object. A simple stream pushing feature takes only three steps to implement:

<div id="pusherView" style="width:100%; height:auto;"></div>
<script>
// 1. Create a pusher object.
let pusher = TWebLive.createPusher({ userID: 'your userID' });
// 2. Set the rendering view and have the mic capture audio and the camera capture video (720p by default).
pusher.setRenderView({
elementID: 'pusherView',
audio: true,
video: true
.then(() => {
// 3. Enter the SDKAppID, room ID, and other information, and push streams.
// The URL must start with `room://`.
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

To use the stream pulling feature, you need to create a player object. A simple stream pulling feature takes only three steps to implement:

<div id="playerView" style="width:100%; height:auto;"></div>
<script>
// 1. Create a player object.
let player = TWebLive.createPlayer();
// 2. Set the rendering view.
player.setRenderView({ elementID: 'playerView' });
// 3. Enter an FLV or HLS URL and other information and pull CDN streams for playback. The URL must start with `https://`.
// Alternatively, enter the SDKAppID, room ID, and other information and pull WebRTC low-latency streams for playback. The URL must start with `room://`.
let url = 'https://'
+ 'flv=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.flv' + '&' // Replace it with a valid playback URL.
+ 'hls=https://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8' // Replace it with a valid playback URL.
// let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}`;
player.startPlay(url).then(() => {
console.log('player | startPlay | ok');
}).catch((error) => {
console.error('player | startPlay | failed', error);
});
</script>

3. Live streaming interaction

To allow the anchor and audience to chat with each other, you need to create an IM object. A simple message sending/receiving feature takes only three steps to implement:

// 1. Create an IM object and listen for events.
let im = TWebLive.createIM({
SDKAppID: 0 // Replace 0 with the SDKAppID of your IM app when connecting.
});
// Listen for events including `IM_READY`, `IM_TEXT_MESSAGE_RECEIVED`, etc.
let onIMReady = function(event) {
im.sendTextMessage({ roomID: 'your roomID', text: 'hello from TWebLive' });
};
let onTextMessageReceived = function(event) {
event.data.forEach(function(message) {
  console.log((message.from || message.nick) + ' : ', message.payload.text);
});
};
// Listen for this event on the access side, and call the SDK to send messages or enable other features.
im.on(TWebLive.EVENT.IM_READY, onIMReady);
// Text message received and displayed on screen
im.on(TWebLive.EVENT.IM_TEXT_MESSAGE_RECEIVED, onTextMessageReceived);
// 2. Log in to the IM console
im.login({userID: 'your userID', userSig: 'your userSig'}).then((imResponse) => {
console.log(imResponse.data); // Login successful
if (imResponse.data.repeatLogin === true) {
  // This indicates that the account is already logged in
  console.log(imResponse.data.errorInfo);
}
}).catch((imError) => {
console.warn('im | login | failed', imError); // Message about failed login
});
// 3. Enter the live streaming room
im.enterRoom('your roomID').then((imResponse) => {
switch (imResponse.data.status) {
  case TWebLive.TYPES.ENTER_ROOM_SUCCESS: // Room entry successful
    break;
  case TWebLive.TYPES.ALREADY_IN_ROOM: // Already in the room
    break;
  default:
    break;
}
}).catch((imError) => {
console.warn('im | enterRoom | failed', imError); // Message about failed room entry
});
</script>

To help you reduce development and labor costs, in addition to the TWebLive SDK, we have published a demo applicable for both desktop and mobile browsers on GitHub. You can fork and clone the demo project to your local environment and run it after minor modifications, or integrate the demo into your own project for official launch.

Using TWebLive

Architecture and Supported Platforms

TWebLive architecture

The figure below demonstrates TWebLive's architecture.
))
Web-based stream pushing and low-latency playback use the WebRTC technology.

• If your app scenario is mainly in the education sector, consider using TRTC SDK for Electron, which supports two-channel big/small video images, with more flexible screen sharing schemes and better recovery capabilities on poor network connections.

  Note：

  Proposed by Google, the WebRTC technology is well supported by Chrome (desktop), Edge (desktop), Firefox (desktop), and Safari (desktop and mobile), but poorly or not supported by other platforms such as browsers on Android.

Supported platforms

Note：

Due to H.264 copyright restrictions, Chrome and Chrome WebView-based browsers on Huawei devices do not support TRTC SDK for desktop browsers.

Notes

• TRTC and IM can share your account and authentication information only if you enter the same SDKAppID for your TRTC and IM apps.
• The IM app provides the basic-edition content filtering capability for text messages. If you want to use to the restricted word customization feature, click Upgrade.
• The local UserSig calculation method is used for local development and debugging only. Do not publish it to your online systems. Once your SECRETKEY is disclosed, attackers can use your Tencent Cloud traffic without authorization. The correct UserSig distribution method is to integrate the computing code of UserSig into your server and provide an app-oriented API. When UserSig is required, your app can send a request to the business server to obtain the dynamic UserSig. For more information, please see "Generating a UserSig on the Server" in Generating UserSig.

FAQ

Summary

This document describes Tencent Cloud's new web-based interactive live streaming component TWebLive. The SDK offers an ideal substitute for the traditional Flash streaming and allows you to quickly implement web-based stream pushing, web-based low-latency streaming, CDN streaming, real-time chatting (or on-screen comments), and other features.

We also provide a detailed connection solution and an online demo for you to try out. Currently, TWebLive is well supported by mainstream desktop browsers as well as Mini Programs on mobile devices.

In the future, we plan to integrate more live streaming features into the component, for example, screen sharing on the push end, image messaging, multi-line (WebRTC low-latency and CDN) watching, and co-anchoring between anchors and viewers.

References:

• TWebLive API Guide
• Online demos