TWebLive Component

Last updated: 2021-08-30 11:53:24

    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

    Step 1: create a TRTC app

    On the left sidebar of the TRTC console, click Application Management > Create Application, enter an app name, and click Confirm. Take note of the SDKAppID of the app you have created.

    Note

    An IM app with the same SDKAppID will be created automatically.

    Step 2: enable relayed push

    1. In the TRTC console, click Application Management on the left sidebar, find the app you have created, and click Function Configuration.

    2. Click Enable Relayed Push, and select Global auto-relayed push for Relayed Push Mode. This will give each stream in a TRTC room a dedicated playback address.

      Note

      You can skip this step if you don't need to enable CDN live streaming.

    3. Click Quick Start to view and note your key.

    4. In the CSS console, configure the playback domain name and CNAME record. For detailed instructions, see CDN Relayed Live Streaming.

      Note

      You can skip this step if you don't need to enable CDN live streaming.

      Step 3: download and configure the demo source code

    5. Download the demo project of the TWebLive component here.

    6. Open the TWebLive/dist/debug/GenerateTestUserSig.js file and set the parameters as follows.

    • SDKAPPID: set it to the actual SDKAppID obtained in step 1.
    • SECRETKEY: enter the actual key obtained in step 2.
    • PUSHDOMAIN set a push domain name for CDN live streaming. Skip this if you don’t need the service.
    1. Install the latest tim-js-sdk, trtc-js-sdk, and tweblive via npm. If your project already has tim-js-sdk or trtc-js-sdk, upgrade it to the latest version.
      npm install tim-js-sdk --save
      npm install trtc-js-sdk --save
      npm install tweblive --save
      
    2. Import tweblive to your project.
      import TWebLive from 'tweblive'
      Vue.prototype.TWebLive = TWebLive
      
    3. If you want to install the demo source code by referring to external files in the script tag, copy tim-js.js, trtc.js, and tweblive.js to your project and import them in the order below.
      <script src="./trtc.js"></script>
      <script src="./tim-js.js"></script>
      <script src="./tweblive.js"></script>
      

      Note
      • 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 calculation code of UserSig into your server and provide an application-oriented API. When UserSig is needed, your application can send a request to the business server for a dynamic UserSig. For more information, see How do I calculate UserSig on the server?.

      Step 4: run the demo

      Open the index.html file in the dist directory with Chrome to run the demo.
      Note
      • Normally, the demo needs to be deployed on the server and then accessed through https://domain name/xxx. You can also build a server locally and access the demo through localhost:port.
      • Currently, the desktop version of Chrome offers better support for the features of TRTC SDK for desktop browsers; therefore, Chrome is recommended for the demo.
      • TWebLive uses the camera and mic to capture audio and video. During the demo run, when prompted by Chrome, you should click Allow.

    Architecture and Supported Platforms

    TWebLive architecture

    The figure below demonstrates TWebLive's architecture.
    img))
    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

    OS Browser Minimum Browser Version Requirement Receiving (Playback) Sending (Publish)
    macOS Safari (desktop) 11+ Supported Supported
    macOS Chrome (desktop) 56+ Supported Supported
    macOS Firefox (desktop) 56+ Supported Supported
    macOS Edge (desktop) 80+ Supported Supported
    Windows Chrome (desktop) 56+ Supported Supported
    Windows QQ browser (desktop, WebKit core) 10.4+ Supported Supported
    Windows Firefox (desktop) 56+ Supported Supported
    Windows Edge (desktop) 80+ Supported Supported
    iOS 11.1.2+ Safari (mobile) 11+ Supported Supported
    iOS 12.1.4+ WeChat embedded browser - Supported Not supported
    Android QQ browser (mobile) - Not supported Not supported
    Android UC browser (mobile) - Not supported Not supported
    Android WeChat embedded browser (TBS core) - Supported Supported
    Android WeChat embedded browser (XWEB core) - Supported Not supported
    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

    1. Only

    展开&收起

    TRTC SDK 6.6 (August 2019) and later versions use the new signature algorithm HMAC-SHA256. If your app was created before August 2019, you need to upgrade the signature algorithm to get a new secret key.

    2. What

    展开&收起

    It indicates that TRTC SDK for desktop browsers failed with regard to hole punching via Session Traversal Utilities for NAT (STUN). Please check your firewall policy against the environment requirements.

    3. What

    展开&收起

    This error indicates that TRTC SDK for desktop browsers failed to establish a media transport connection. Please check your firewall configuration against the environment requirements.

    4. What

    展开&收起

    If the "Join room failed result: 10006 error: service is suspended,if charge is overdue,renew it" error occurs, log in to the TRTC console, find the app you created, click Application Info, and check in the Application Info tab if your TRTC service is available.

    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: