Web Player

Last update:2024-06-11 09:31:35

This guide provides rough instructions for developers on integrating and utilizing the WebRTC Player SDK effectively in web applications. It outlines setup, configuration, and usage steps to ensure stable video playback across various platforms.

Download SDK

WebRTC H5 Player SDK and Demo

How to Use the SDK

1. Create a Video Tag

Create a <video> tag in HTML with autoplay and control functionalities to support HTML5 video playback in modern browsers.

<video id="videotest" class="centeredVideo" controls autoplay width="1024" height="576">
    Your browser is too old to support HTML5 video.

2. Import the JavaScript File

Include the SDK’s JavaScript file in the HTML document to utilize its features.

<script src="wsrtcplayer.min.js"></script>

3. Set Event Callback Functions

Define robust event callback functions to manage playback events effectively. These functions help handle key situations such as playback interruptions, data reception, and network responses.

/***** Custom callback functions
@argument arguments[0]: Event type:
0 - Resuming playback from a buffer
1 - Buffering event occurs
2 - Server response with Session Description Protocol (SDP) data
@argument arguments[1]: SDP string from the server, only relevant for event type 2
function onEvent() {
    // Add robust event handling logic here
window.wsrtcplayer.callback = onEvent;

4. Initialize the Player

Initialize the player instance with the specified configuration options.

var option = {
    element: document.getElementById('videotest'),
    customerID: "XXXX",
    listener: onEvent
var player = window.wsrtcplayer.createWSRTCPlayer(option);

5. Start Playback

Use the signaling URL to initiate stream playback.

// @param signal_url: Signaling URL of the playback stream

In WebRTC, signaling is the process used to set up, manage, and terminate communication sessions. The signaling URL, which you can think of as the stream URL, is formatted as follows:

signal_url: http(s)://domain/appName/streamName.sdp
  • domain: Your domain name, which hosts the streaming service.
  • appName: The name of the application, used to differentiate between various types of live streams. This is also the base unit for setting configurations such as transcoding, taking screenshots, and recording.
  • streamName: The name of the live stream, which helps in identifying different streams.

6. Stop Playback

Call the close function to stop playback.



Refer to demo.html in the SDK for specific examples.

WebRTC Compatibility

Below is an overview of WebRTC compatibility:

Operating System Browser Type Minimum Version Requirement
Mac OS Desktop Safari 11+
Mac OS Desktop Chrome 47+
Windows Desktop Chrome 56+
Android Mobile Chrome 88+
iOS Mobile Safari 11+
iOS WeChat Embedded Browser 12+

Note: Browsers using the Chrome engine should refer to the corresponding version of Chrome. Browser compatibility on Android devices varies, and some models may not support H264 decoding.

Is the content of this document helpful to you?
I have suggestion
Submitted successfully! Thank you very much for your feedback, we will continue to strive to do better!