Quick TWebLive Run

Last updated: 2021-08-30 16:17:52

    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. You can use the demo to try out the features.

    Strengths

    The 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.

    To use the push feature, you need to create a pusher object. A simple push 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=<span class="hljs-subst">${SDKAppID}</span>&amp;roomid=<span class="hljs-subst">${roomID}</span>&amp;userid=<span class="hljs-subst">${userID}</span>&amp;usersig=<span class="hljs-subst">${userSig}</span>&amp;livedomainname=<span class="hljs-subst">${liveDomainName}</span>&amp;streamid=<span class="hljs-subst">${streamID}</span>;
    pusher.startPush(url).then(() => {
    console.log('pusher | startPush | ok');
    });
    .catch(error => {
    console.error('pusher | setRenderView | failed', error);
    });
    </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.

    Directions

    Step 1: create an 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.

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

    Step 2: activate the TRTC service and get the key

    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.

      >? 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.
      >? You can skip this step if you don't need to enable CDN live streaming.

    Step 3: download and configure the demo source code

    1. Download the demo project of the TWebLive component here.
    2. 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.
    3. 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
    4. Import tweblive to your project.
      import TWebLive from 'tweblive'
      Vue.prototype.TWebLive = TWebLive
    5. If you want to use script tags to import JS files, 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 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.

    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.

    Web-based stream pushing and low-latency playback use the WebRTC technology.

    • For mobile devices, the Mini Program solution is recommended, which is supported by both WeChat and Mobile QQ. This solution is implemented through native technologies of corresponding platforms to deliver excellent audio/video performance and specifically adapted to major mobile phone brands.
    • 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.

    Note

    • TRTC and IM can share your account and authentication information only if you enter the same SDKAppID for your TRTC and IM apps.
    • 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.

    FAQs

    1. Only

    展开&收起

    By default, TRTC and IM apps (SDKAppID) created before August 2019 use the ECDSA-SHA256 algorithm for signature calculation, which uses public and private keys. You are strongly advised to upgrade to the HMAC-SHA256 algorithm.

    2. What

    展开&收起

    This error indicates that TRTC SDK for desktop browsers failed with regard to Session Traversal Utilities for NAT (STUN). Please configure your firewall policy against the environment requirements. You can use the demo to check whether the configuration has taken effect.

    • TCP port: 8687
    • UDP ports: 8000, 8080, 8800, 843, 443, 16285
    • Domain name: qcloud.rtc.qq.com

    3. What

    展开&收起

    This error indicates that TRTC SDK for desktop browsers failed with regard to Session Traversal Utilities for NAT (STUN). Please configure your firewall policy against the environment requirements. You can use the demo to check whether the configuration has taken effect.

    • TCP port: 8687
    • UDP ports: 8000, 8080, 8800, 843, 443, 16285
    • Domain name: qcloud.rtc.qq.com

    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.

    5. What

    展开&收起
    1. Upgrade the TWebLive SDK to 1.2.0.
    2. After calling player.startPlay(), listen for the PLAYER_AUTOPLAY_NOT_ALLOWED callback, which indicates that the browser forbids autoplay.
    3. After the callback is received, display a play button, and trigger resumePlay() upon clicking of the button to start playback.
      >?For how to deal with iOS restrictions on autoplay, please see Suggested Solutions for Autoplay Restrictions.

    Summary

    This document describes Tencent Cloud’s new web-based interactive live broadcasting 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 detailed integration instructions and online demos for you to explore the component. Currently, TWebLive is well supported by mainstream desktop browsers as well as Mini Program 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.

    References: