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 Chat 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 Chat. When you activate TRTC, Chat and the trial edition of the Chat SDK (which supports only 100 DAUs) will be activated automatically. For the billing details of Chat, 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, Chat, 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 Chat. Make sure you use the same SDKAppID for your TRTC and Chat applications so that they can share your account and authentication information.
You can use the basic content filtering capability of Chat to filter text messages. If you want to customize restricted words, go to the Chat 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.
2. In the TRTC console, click Application Management > Create Application to create an 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.
explain
Accounts creating their first application in the TRTC console will get a 10,000-minute free trial package.
After you create a TRTC application, a Chat application with the same SDKAppID will be created automatically. You can configure package information for the application in the Chat console.
Step 1. Create a Chat application
1. Log in to the Chat console, and click Create Application.
2. In the pop-up window, enter an application name and click Confirm.
3. Go to the overview page to view the status, edition, SDKAppID, creation time, and expiration time of the application created. Note down the SDKAppID.
Step 2. Obtain the key and activate TRTC
1. On the overview page, click the application created to go to the Basic Configuration page. In the Basic Information section, click Display key, and copy and save the key.
Note
Please store the key information properly to prevent disclosure.
2. On the Basic Configuration page, activate TRTC.
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
npminstall
cd Web/TUIPlayer
npminstall
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.
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:
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
Firewall restrictions may cause audio/video calls to fail. To avoid this, add the ports and domains specified in Firewall Restrictions to the allowlist of your firewall.
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.
