CSS allows you to push streams over the web. You can generate a push URL quickly and push streams from the camera or screen or push a local file to test CSS features.
Your device has a camera installed and your browser allows Flash to access the camera.
Single stream
1. Log in to the CSS console and select Web Push.Click on Single stream.
2. Select the capturing source, which can be camera, screen, or local file.
Camera
Screen Sharing
Local File
Capture and publish audio/video from the camera/mic (which can be a peripheral device). Click Turn On for Camera/Mic. You need to grant your browser access to the camera/mic if it is the first time you perform this action.
Capture and publish streams from the screen. Click Select Screen to select a screen/window/browser tab to publish.
Publish a local file using the web push tool to CSS. Click Select to select a file to publish. Currently, you can publish only files in MP4 format.
Note：
You cannot change the capturing source after enabling camera preview or selecting screen content to share. To switch the source, disable camera preview or cancel screen sharing first.
3. Configure capturing data. The defaults are recommended settings, which vary with resolution. You can click Edit and select Custom to customize capturing data. For camera and screen sharing, the settings include resolution, video frame rate, and audio sample rate, while for local files, only the former two are applicable.
4. Configure push data. The defaults are recommended settings (the recommended video bitrate varies with resolution, and the audio bitrate is fixed). You can click Edit and select Custom to customize video and audio bitrates.
Note：
WebRTC push uses the Opus audio codec, and you are advised to play the streams pushed using LEB WebRTC URLs. If you use a standard live streaming protocol (RTMP, FLV, or HLS), the system will automatically convert the streams to AAC, which will incur transcoding fees. For details, see the billing document.
5. Preview streams. After completing the above steps, you can enable preview to preview the stream on the right.
6. Enter a WebRTC push URL or click Generate and complete the following configuration:
6.1 Select your push domain.
6.2 Enter a unique AppName for an application to distinguish it from other applications under the same domain name. AppName is live by default.
6.3 Enter a custom StreamName, such as test.
6.4 Select an expiration time, such as 2024-07-18 11:41:04.
6.5 Click Confirm, and a push URL is auto-generated.
7. Click Start Push to start streaming.
7.1 To enable/disable video or audio, click
or
. After you disable video/audio, data capturing will continue and push will still succeed, but the stream cannot be previewed and will have no video or audio.
Note：
You cannot enable or disable preview after push succeeds, and you may incur bandwidth/traffic costs or the costs of other value-added services for pushing streams.
8. After push succeeds, click View below the preview to view streaming statistics. You cannot obtain statistics or playback URLs for push URLs not under your account. Please use a push domain under your account to generate push URLs or relay streams to your account.
9. If you have added a playback domain in Domain Management, you can select the domain to generate a playback URL. If you need to generate a playback address with transcoding or adaptive transcoding configuration, you must first bind the playback domain to a transcoding template or adaptive transcoding template to generate a transcoded stream or adaptive transcoded stream.
A playback URL is made up of four parts, as shown below:
Supported protocols include RTMP, FLV, HLS, and UDP. You can also click the QR code icon and scan the QR code using the TCToolkit app to obtain the playback URL.
Note：
If HTTPS is enabled for the playback domain selected, the FLV and HLS URLs generated will start with https.
Multiple streams
Enter configuration
1. Log in to the CSS console and select Web Push.Click on Multiple streams.
2. In the input configuration, click Add. Choose the capture method. You can select from three capture methods: camera capture, screen sharing capture, and local file capture. You can also add text configuration for multi-stream mixed live streaming. Up to 10 input sources can be added.
Camera
Screen Sharing
Local File
Text
Camera capture is the process of capturing video and audio through a camera/microphone (external devices are supported). Click Enable Camera/ Enable Microphone, and the first time you enable it, you'll need to grant the browser permission to use the camera and microphone.
Screen sharing capture is the process of capturing a specific window or interface through the browser for sharing. Click Select Screen Sharing and choose the content to share, which can be the entire screen, a specific window, or a browser tab. You need to select the screen to share before you can save it.
Screen sharing capture supports selecting audio sources. Currently, only Chrome 74+ and Edge 79+ support capturing sound. On Windows systems, you can capture the entire system's sound, while on Linux and Mac, you can only capture the sound from a browser tab.
Local file capture is the process of capturing images from a specified local file and then pushing it to the cloud live streaming service using a Web-based push tool. Click Select Local File to choose the content to be pushed. Currently, MP4, MP3, JPG, PNG, and BMP file formats are supported. Click Enable Preview to save the settings.
Text configuration allows you to add text to the mixed streaming image and then push it to the cloud live streaming service using a Web-based push tool. Enter text in the text content field.
In the image configuration, you can set the font, color, shadow, transparency, thickness, and text coordinates. The default text coordinates are in the center of the page.
3. You can set capture configurations for camera capture, screen sharing capture, and local file capture. The default is the recommended configuration (different resolutions have different recommended configurations). Switching or modifying the configuration is not supported during the capture process. You need to make changes when the preview is closed.
4. You can set advanced configurations for camera capture, screen sharing capture, and local file capture. You can adjust the image, coordinates, mirroring, contrast, brightness, and saturation.
5. Click Save, and the input source will be added to the configuration.
Change setting
1. In the input configuration, you can perform operations on the configured input sources.
2. Select the input source you want to modify and click Configure. The right-side pop-up window will display the configuration information of this input source, and you can modify the configuration information again. Switching or modifying the configuration is not supported during the capture process. You need to make changes when the preview is closed.
3. You can adjust the display order of input sources by dragging the buttons on the left side of the input sources up or down.
4. Click Delete to remove the input source.
5. Click Disable Preview to close the preview of the input source, but you can still select the image for editing in the image editing area.
6. For input sources with audio, you can adjust the volume. Click "Adjust Volume", drag the volume slider, and click Confirm to confirm.
Push configuration
Push configuration: Set the push configuration, with the default being the recommended configuration (different resolutions have different recommended video bitrates, and audio bitrate cannot be modified). You can click Edit in the upper right corner to enter custom editing configuration, where you can customize and modify the video and audio bitrates.
Note：
The audio encoding method for web push is Opus encoding, and it is recommended to use the Live Event Broadcasting (LEB) WebRTC address for playback. If you use the playback address of the standard live streaming (RTMP/FLV/HLS), the system will automatically convert it to AAC encoding for normal playback, which will generate audio transcoding fees. For details, please refer to the Billing Documentation.
Screen editing
1. After confirming the input configuration and push configuration, you can see the preview image in the preview box on the right, and you can edit the image as needed.
2. Click Edit, select the image in the preview box that needs to be adjusted, and you can drag and resize the image as needed.
3. After adjusting, click Exit Edit. If you are in the middle of pushing the stream, saving the changes will continue pushing the stream with the new image layout.
Note：
When you enter the image editing mode, you can adjust the image layout in the preview box. Exiting the image editing mode allows you to view the preview image of the push stream in the preview box. Editing the page does not affect the real-time push stream, and the configuration will be saved only when you exit the editing mode.
Push address
1. Enter the WebRTC push address in the preview box below or click Generate, and configure the following information in the pop-up window:
1.1 Select your push domain.
1.2 Enter a unique AppName for an application to distinguish it from other applications under the same domain name. AppName is live by default.
1.3 Enter a custom StreamName, such as test.
1.4 Select an expiration time, such as 2024-07-18 12:41:06.
1.5 Click Confirm, and a push URL is auto-generated.
Start streaming
1. To enable/disable video or audio.
1.1 click
or
. After you disable video/audio, data capturing will continue and push will still succeed, but the stream cannot be previewed and will have no video or audio.
1.2 After push succeeds, click View below the preview to view streaming statistics. You cannot obtain statistics or playback URLs for push URLs not under your account. Please use a push domain under your account to generate push URLs or relay streams to your account.
1.3 If you have added a playback domain in Domain Management, you can select the domain to generate a playback URL. If you need to generate a playback address with transcoding or adaptive transcoding configuration, you must first bind the playback domain to a transcoding template or adaptive transcoding template to generate a transcoded stream or adaptive transcoded stream.
A playback URL is made up of four parts, as shown below:
Supported protocols include RTMP, FLV, HLS, and UDP. You can also click the QR code icon and scan the QR code using the TCToolkit app to obtain the playback URL.
Note：
If HTTPS is enabled for the playback domain selected, the FLV and HLS URLs generated will start with https.
