tencent cloud

Feedback

Integrating TUIPusher and TUIPlayer (Web)

Last updated: 2022-06-27 15:58:59

    Overview

    TUIPusher and TUIPlayer are our web-based open-source components for interactive live streaming (UI included). You can use them together with our basic SDKs such as TRTC and IM to quickly equip your live streaming applications (corporate live streaming, live shopping, vocational training, remote teaching, etc.) with web-based publishing and playback capabilities.

    Note:

    All components of TUIKit use two basic PaaS services of Tencent Cloud, namely TRTC and IM. When you activate TRTC, IM and the trial edition of the IM SDK (which supports only 100 DAUs) will be activated automatically. For the billing details of IM, see Pricing.

    Strengths:

    • A general-purpose live streaming solution with UI that includes common live streaming features such as device selection, beauty filters, publishing, playback, and live chat, helping you quickly bring your services to the market
    • Easy integration into Tencent Cloud’s basic SDKs, including TRTC, IM, and Superplayer, for excellent flexibility and scalability
    • Web-based, easy-to-use, and quick updates

    Demos

    We provide a TUIPusher Demo and a TUIPlayer Demo, with user and room management systems, for you to experiment with the features of the components.

    Note:

    You need to log in with two different accounts to try TUIPusher and TUIPlayer at the same time.

    TUIPusher features

    • Capturing and publishing streams from camera and mic
      • Customizing video parameters including frame rate, resolution, and bitrate
      • Applying beauty filters and setting beauty filter parameters
    • Capturing and publishing data from the screen
    • Publishing to the TRTC backend and Tencent Cloud’s CDNs
    • Text chatting with the anchor and other audience members
    • Getting the audience list and muting audience members

    TUIPlayer features

    • Playing the audio/video stream and screen sharing stream at the same time
    • Text chatting with the anchor and other audience members
    • Three playback options: Ultra-low-latency live streaming (300 ms latency), high-speed live streaming (latency within 1,000 ms), and standard live streaming (ultra-high concurrency)
    • Supports desktop and mobile browsers and landscape mode on mobile devices
    Note:

    If your browser does not support WebRTC and can play videos only using standard live streaming protocols, please use a different browser to try WebRTC playback.

    Integration

    Step 1. Create an application

    Note:

    • TUIPusher and TUIPlayer are based on TRTC and IM. Make sure you use the same SDKAppID for your TRTC and IM applications so that they can share your account and authentication information.
    • You can use the basic content filtering capability of IM to filter text messages. If you want to customize restricted words, go to the IM console > Content Filtering, and click Upgrade.
    • Local UserSig calculation is for development and local debugging only and not for official launch. 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 your server for a dynamic UserSig. For more information, see Generating UserSig.

    Step 1. Create a TRTC application

    1. Sign up for a Tencent Cloud account and activate TRTC and IM.
    2. In the TRTC console, click Application Management > Create Application to create an application.
      Create application

    Step 2. Get the TRTC key information

    1. In the application list, find the application created and click Application Info to view the SDKAppID.
    2. Select the Quick Start tab to view the application’s secret key.

    Note
  • Accounts creating their first application in the TRTC console will get a 10,000-minute free trial package.
  • After you create a TRTC application, an IM application with the same SDKAppID will be created automatically. You can configure package information for the application in the IM console.
  • Step 2. Prepare your project

    1. Download the code for TUIPusher and TUIPlayer at GitHub.

    2. Install dependencies for TUIPusher and TUIPlayer.

      cd Web/TUIPusher
      npm install
      cd Web/TUIPlayer
      npm install
      
    3. Paste SDKAppID and the secret key to the specified locations below in the TUIPusher/src/config/basic-info-config.js and TUIPlayer/src/config/basic-info-config.js files.

    4. Run TUIPusher and TUIPlayer in a local development environment.

      cd Web/TUIPusher
      npm run serve
      cd Web/TUIPlayer
      npm run serve
      
    5. You can open http://localhost:8080 and http://localhost:8081 to try out the features of TUIPusher and TUIPlayer.

    6. You can modify the room, anchor, and audience information in TUIPusher/src/config/basic-info-config.js and TUIPlayer/src/config/basic-info-config.js, but make sure the room and anchor information is consistent in the two files.

    Note:

    • You can now use TUIPusher and TUIPlayer for ultra-low-latency live streaming. If you want to support high-speed and standard live streaming too, see Step 3. Enable relay to CDN.
    • Local calculation of UserSig is for development and local debugging only and not for official launch. If your SECRETKEY is leaked, attackers will be able to steal your Tencent Cloud traffic.
    • 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 your server for a dynamic UserSig. For more information, see Calculating UserSig on the server.

    Step 3. Enable relay to CDN

    Because the high-speed and standard live streaming features of TUIPusher and TUIPlayer are powered by CSS, you need to enable relay to CDN to use these features.

    1. In the TRTC console, enable relay to CDN for your application. You can choose Specified-stream relay or Global relay based on your needs.
      img
    2. On the Domain Management page, add your playback domain name. For detailed directions, please see Adding Your Own Domain Names.
    3. Configure the playback domain name in TUIPlayer/src/config/basic-info-config.js.

    You can now use all features of TUIPusher and TUIPlayer, including ultra-low-latency live streaming, high-speed live streaming, and standard live streaming.

    Step 4. Apply in a production environment

    To apply TUIPusher and TUIPlayer to a production environment, in addition to integrating them into your project, you also need to do the following:

    • Create a user management system to manage user information such as user IDs, usernames, and profile pictures
    • Create a room management system to manage room information such as room IDs, room names, and anchors
    • Generate UserSig on your server
      Note:

      • In this document, UserSig is generated on the client based on the SDKAppID and secret key you provide. The secret key may be easily decompiled and reversed, and if your key is disclosed, attackers will be able to steal your traffic. Therefore, this method is for local debugging only.
      • 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 your server for a dynamic UserSig. For more information, see How do I calculate UserSig during production?.
    • Submit account information such as user information, room information, SDKAppID, and UserSig to store of vuex for global storage, as shown in TUIPusher/src/pusher.vue and TUIPlayer/src/player.vue. Then you will be able to use all publishing and playback features of the two components. The diagram below shows the workflow in detail:

    FAQs

    How do I use beauty filters on the web?

    See Enabling Beauty Filters.

    How do I implement the screen sharing feature on the web?

    See Screen Sharing.

    How do I implement the on-cloud recording feature on the web?

    1. For information about how to enable on-cloud recording, see On-Cloud Recording and Playback.
    2. If you enable specified user recording, you can start recording on the web by specifying userDefineRecordId when calling the TRTC.createClient API.

      How do I publish a stream to CDN on the web?

      See Publishing to CDN.

    How do I enable high-speed playback on the web?

    Publish streams to CDNs using the TRTC web SDK and play the streams over WebRTC.

    Notes

    Supported platforms

    Operating System Browser Required Version TUIPlayer TUIPusher TUIPusher Screen Sharing
    macOS Safari 11+ Supported Supported Supported (on Safari 13+)
    macOS Chrome 56+ Supported Supported Supported (on Chrome 72+)
    macOS Firefox 56+ Supported Supported Supported (on Firefox 66+)
    macOS Edge 80+ Supported Supported Supported
    macOS WeChat built-in browser - Supported Not supported Not supported
    macOS WeCom built-in browser - Supported Not supported Not supported
    Windows Chrome 56+ Supported Supported Supported (on Chrome 72+)
    Windows QQ Browser (WebKit core) 10.4+ Supported Supported Not supported
    Windows Firefox 56+ Supported Supported Supported (on Firefox 66+)
    Windows Edge 80+ Supported Supported Supported
    Windows WeChat built-in browser - Supported Not supported Not supported
    Windows WeCom built-in browser - Supported Not supported Not supported
    iOS WeChat built-in browser - Supported Not supported Not supported
    iOS WeCom built-in browser - Supported Not supported Not supported
    iOS Safari - Supported Not supported Not supported
    iOS Chrome - Supported Not supported Not supported
    Android WeChat built-in browser - Supported Not supported Not supported
    Android WeCom built-in browser - Supported Not supported Not supported
    Android Chrome - Supported Not supported Not supported
    Android QQ Browser - Supported Not supported Not supported
    Android Firefox - Supported Not supported Not supported
    Android UC Browser - Supported (only standard live streaming) Not supported Not supported

    Domain requirements

    For security and privacy reasons, only HTTPS URLs can access all features of TUIPusher and TUIPlayer. Therefore, please use the HTTPS protocol for the web page of your application in production environments.

    Note:

    You can use http://localhost for local development.

    The table below lists the supported domain names and protocols.

    Scenario Protocol TUIPlayer TUIPusher TUIPusher Screen Sharing Remarks
    Production HTTPS Supported Supported Supported Recommended
    Production HTTP Supported Not supported Not supported -
    Local development http://localhost Supported Supported Supported Recommended
    Development http://127.0.0.1 Supported Supported Supported -
    Local development http://[local IP address] Supported Not supported Not supported -

    Firewall configuration

    TUIPusher and TUIPlayer rely on the following ports and domain for data transfer, which should be added to the allowlist of your firewall.

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

    Summary

    In future versions, we plan to add support for communication between the web components and TRTC native SDKs (such as the iOS SDK and Android SDK), as well as introduce features such as co-anchoring, advanced filters, custom layout, relaying to multiple platforms, and image/text/music upload.

    If you have any requirements or feedback, contact colleenyu@tencent.com.

    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support