This document introduces you to our web-based interactive live streaming solutions TUIPusher
and TUIPlayer
(UI included). You can integrate them into Tencent Cloud’s 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.
Strengths:
See below for a demonstration of the components’ features. We also provide a TUIPusher Demo and a TUIPlayer Demo, with user and room management systems, for you to experiment with the features.
Note:You need to log in with two different accounts to try
TUIPusher
andTUIPlayer
at the same time.
You can download TUIPusher
and TUIPlayer
from the following links:
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.
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.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 the business server for a dynamic UserSig
. For more information, see Generating UserSig.SDKAppID
.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.
Download the code for TUIPusher
and TUIPlayer
at GitHub.
Install dependencies for TUIPusher
and TUIPlayer
.
cd Web/TUIPusher
npm install
cd Web/TUIPlayer
npm install
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.
Run TUIPusher
and TUIPlayer
in a local development environment.
cd Web/TUIPusher
npm run serve
cd Web/TUIPlayer
npm run serve
You can open http://localhost:8080
and http://localhost:8081
to try out the features of TUIPusher
and TUIPlayer
.
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
andTUIPlayer
for ultra-low-latency live streaming. If you want to support high-speed and standard live streaming too, see Step 3. Enable relayed push.- Local calculation of
UserSig
is for development and local debugging only and not for official launch. If yourSECRETKEY
is leaked, attackers will be able to steal your Tencent Cloud traffic.- The correct
UserSig
distribution method is to integrate the calculation code ofUserSig
into your server and provide an application-oriented API. WhenUserSig
is needed, your application can send a request to the business server for a dynamicUserSig
. For more information, see How do I calculate UserSig on the server?.
Because the high-speed and standard live streaming features of TUIPusher
and TUIPlayer
are powered by CSS, you need to enable relayed push to use these features.
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.
To apply TUIPusher
and TUIPlayer
to a production environment, in addition to integrating them into your project, you also need to do the following:
UserSig
on your server
Note:
- In this document,
UserSig
is generated on the client based on theSDKAppID
and secret key you provide. The secret key may be easily decompiled and reversed, and if your key is leaked, 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 ofUserSig
into your server and provide an application-oriented API. WhenUserSig
is needed, your application can send a request to the business server for a dynamicUserSig
. For more information, see How do I calculate UserSig on the server?.
SDKAppID
, and UserSig
to store
of vuex
for global storage, as in TUIPusher/src/pusher.vue
and TUIPlayer/src/player.vue
, and you will be able to use all features of the two components on publishing and playback clients. The diagram below shows the process in detail:See Screen Sharing.
userDefineRecordId
when calling the TRTC.createClient API.See Publishing to CDN.
Publish streams to CDNs using the TRTC Web SDK and play the streams using WebRTC.
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 |
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: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 | - |
TUIPusher
and TUIPlayer
rely on the following ports and domain for data transfer, which should be added to the allowlist of your firewall.
In future versions, we plan to add support for communication between the web components and the TRTC SDKs for iOS, Android, etc. and 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.
Was this page helpful?