tencent cloud

Cloud Streaming Services

Release Notes and Announcements
Announcements
User Guide
Product Introduction
Overview
CSS Products
Concepts
Features
Use Cases
Strengths
Use Limits
Purchase Guide
Billing Overview
Basic Service Fee
Value-Added Service Fee
Prepaid plan
Purchase Process
Changing Billing Modes
Refund Policy
Viewing Bills
Renewal
Processing for Overdue Payments
Billing FAQs
Live Video Broadcasting (LVB)
Overview
Use Cases
Getting Started
SDK Integration
Live Event Broadcasting (LEB)
Overview
LEB Versus LVB
Use Cases
Getting Started
SDK Integration
Live Video Caster
Overview
Application Scenarios
Feature Area Introduction
Managing Live Video Caster
General Cloud Director
Configuring Program Lists and Automated Broadcasting
Console Guide
Console Overview
Overview
Domain Management
Stream Management
Package Management
AI Features
Feature Configuration
Relay
Billing Usage Statistics
Monitoring
Toolkit
OOTB live
CAM-Based Access Control
Feature Guide
Push and Playback
Features
Practices in Typical Scenarios
Cloud Native Recording
Live Streaming Security
Global CSS Service
Callback Notifications
User Guides for Common Third-Party Tools
SDK Guide
0. SDK Integration Guide
1. Stream Push
2. Playback
3. Advanced Features
API Documentation
History
Introduction
API Category
Making API Requests
Live Pad APIs
Live Stream Mix APIs
Time Shifting APIs
Monitoring Data Query APIs
Billing Data Query APIs
Live Transcoding APIs
Delayed Playback Management APIs
Domain Name Management APIs
Watermark Management APIs
Certificate Management APIs
Stream Pulling APIs
Recording Management APIs
Live Callback APIs
Screencapturing and Porn Detection APIs
Authentication Management APIs
Live Stream Management APIs
Data Types
Error Codes
Ops Guide
Video Stuttering
Troubleshooting Push Failure
Troubleshooting Playback Failure
CLS Assists in Live Stream Troubleshooting
Troubleshooting High Latency
Troubleshooting Poor Quality of Pulled Video
Authorizing CSS to Store Screenshots in a COS Bucket
Troubleshooting
Live Stream Mixing Error `InvalidParameter.OtherError`
About Pushing
Generating Push URLs
PC Push
Playing Method
Web Player
Live Streaming Quiz
FAQs
Service Region
Live Streaming Basics
Push and Playback
CSS Billing
Global CSS Service
Live Recording
On-Cloud Stream Mix
Domain Configuration
Related to Live Video Caster
Compatibility with Apple ATS
Difference Between Stream Interruption and Stream Suspension
SLA
CSS Service Level Agreement
CSS Policy
Privacy Policy
Data Processing And Security Agreement
Glossary
DocumentationCloud Streaming ServicesFeature GuidePush and PlaybackWebRTC Protocol Push StreamWeb Push

Web Push

PDF
Focus Mode
Font Size
Last updated: 2023-11-30 16:18:27
The TXLivePusher SDK is used to push streams for LEB (ultra-low latency streaming). It can push audio and video the browser captures from the camera, screen, or a local media file to live streaming servers via WebRTC.
You can use the WebRTC protocol for live streaming on the web. On the PC side, you can also use the OBS tool for WebRTC live streaming. For specific operation methods, please refer to the OBS WebRTC Live Streaming related content.
The advantage of using Web for WebRTC live streaming is that there is no need to install additional software, and you can operate directly in the browser. This article will introduce the operation method for live streaming using Web.
Note
With WebRTC, each push domain name can be used for up to 1000 concurrent streams by default. If you want to push more streams, please submit a ticket.

Basics

Below are some basics you need to know before integrating the SDK.

Splicing push URLs

To use Tencent Cloud live streaming services, you need to splice push URLs in the format required by Tencent Cloud, which consists of four parts.



An authentication key is not required. You can enable push authentication if you need hotlink protection. For details, see Splicing Live Streaming URLs.

Browser support

Web live streaming is based on WebRTC implementation and relies on the operating system and browser support for WebRTC. Currently, the latest versions of Chrome, Edge, Firefox, and Safari browsers support Web live streaming.
Note：
The audio/video capturing feature is poorly supported on mobile browsers. For example, mobile browsers do not support screen recording, and only iOS 14.3 and later allow requesting camera access. Therefore, the push SDK is mainly used on desktop browsers. The latest version of Chrome, Firefox, and Safari all support push for LEB.

SDK Integration

Step 1. Prepare the page

Add an initialization script to the (desktop) page from which streams are to be pushed.
<script src="https://video.sdk.qcloudecdn.com/web/TXLivePusher-2.1.1.min.js" charset="utf-8"></script>
Note
The script needs to be imported into the body part of the HTML code. If it is imported into the head part, an error will be reported.

Step 2. Add a container to the HTML page

Add a player container to the section of the page where local video is to be played. This is achieved by adding a div and giving it a name, for example, id_local_video. Local video will be rendered in the container. To adjust the size of the container, style the div using CSS, Below is an example code:
<div id="id_local_video" style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>

Step 3. Push streams

1. Generate an instance of the push SDK:
Generate an instance of the global object TXLivePusher. All subsequent operations will be performed via the instance.
const livePusher = new TXLivePusher();
2. Specify the local video player container: Specify the div for the local video player container, which is where audio and video captured by the browser will be rendered.
livePusher.setRenderView('id_local_video');
Note
The video element generated via setRenderViewis unmuted by default. To mute video, obtain the video element using the code below.
livePusher.videoView.muted = true;=
3. Set audio/video quality: Audio/video quality should be set before capturing. You can specify quality parameters if the default settings do not meet your requirements.
// Set video quality
livePusher.setVideoQuality('720p');
// Set audio quality
livePusher.setAudioQuality('standard');
// Set the frame rate
4. Capture streams: You can capture streams from the camera, mic, screen and local media files. If capturing is successful, the player container will start playing the audio/video captured.
// Turn the camera on
livePusher.startCamera();
// Turn the mic on
livePusher.startMicrophone();
5. Push streams: Pass in the LEB push URL to start pushing streams. For the format of push URLs, see Splicing Live Streaming URLs. You need to replace the prefix rtmp:// with webrtc://.
livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
Note
Before push, make sure that audio/video streams are captured successfully, or you will fail to call the push API. You can use the code below to push streams automatically after audio/video is captured, that is, after the callback for capturing the first audio or video frame is received. If both audio and video are captured, push starts only after both the callback for capturing the first audio frame and that for the first video frame are received.
// Automatically push the stream after collecting the camera footage
livePusher.startCamera()
.then(function () {
 livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
})
.catch(function (error) {
 console.log('Failed to open camera: '+ error.toString());
});

// Automatically push the stream after collecting the camera and microphone
Promise.all([livePusher.startCamera(), livePusher.startMicrophone()])
.then(function() {
 livePusher.startPush('webrtc://domain/AppName/StreamName?txSecret=xxx&txTime=xxx');
});
6. Stop push:
livePusher.stopPush();
7. Stop capturing audio and video:
// Turn the camera off
livePusher.stopCamera();
// Turn the mic off
livePusher.stopMicrophone();

Advanced Features

Compatibility

The SDK provides a static method to check whether a browser supports WebRTC.
TXLivePusher.checkSupport().then(function(data) {  
  // Whether WebRTC is supported  
  if (data.isWebRTCSupported) {    
    console.log('WebRTC Support');  
  } else {    
    console.log('WebRTC Not Support');  
  }  
  // Whether H.264 is supported  
  if (data.isH264EncodeSupported) {    
    console.log('H264 Encode Support');  
  } else {    
    console.log('H264 Encode Not Support');  
  }
});


Event callbacks

The SDK supports callback event notifications. You can set an observer to receive callbacks of the SDK’s status and WebRTC-related statistics.
livePusher.setObserver({
  // Warnings for push
  onWarning: function(code, msg) {
    console.log(code, msg);
  },
  // Push status
  onPushStatusUpdate: function(status, msg) {
    console.log(status, msg);
  },

Device management

You can use a device management instance to get the device list, switch devices, and perform other device-related operations.
const deviceManager = livePusher.getDeviceManager();
let cameraDeviceId = null;

// Get device list
deviceManager.getDevicesList().then(function(data) {
  data.forEach(function(device) {
    console.log(device.type, device.deviceId, device.deviceName);

    if (device.type === 'video') {
      cameraDeviceId = device.deviceId;
    }
  });

  // Switch camera device
  if (cameraDeviceId) {
    deviceManager.switchCamera(cameraDeviceId);
  }
});

Previous Topic: OBS WebRTC live streamingNext Topic: RTMP supports AV1 encoding streaming and playback

Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback