Web Player

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.
</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
player.open(signal_url);

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.

player.close();

Example

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

WebRTC Compatibility

Below is an overview of WebRTC compatibility:

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.