HLS player example

This example can be used for HLS playback of the following types of streams published on Web Call Server

The example uses HLS player built in a browser and should be used with browsers supporting HLS, e.g. iOS Safari and Android Chrome.

Stream transcoding to HLS will start automatically when client requests the stream published on server by HLS URL, for example, https://demo.flashphoner.com:8445/e442/e442.m3u8 for the stream e442 on screenshot below

In the URL on the screenshot, demo.flashphonr.com is the address of the WCS server.
Port 8445 is used for HLS over HTTPS.

Code of the example

The path to the source code of the example on WCS server is:

/usr/local/FlashphonerWebCallServer/client/examples/demo/streaming/hls-player

hls-player.css - file with styles
video-js.css - file with HLS player styles
hls-player.html - page of the player
hls-player.js - script or running the player
video.js - script providing functionality of the player (http://videojs.com/, Apache License Version 2.0)
videojs-hls.min.js - script providing functionality of the player (minimized version)

This example can be tested using the following address:

http://host:9091/client/examples/demo/streaming/hls-player/hls-player.html

Here host is the address of the WCS server.

Work with code of the example

To analyze the code, let's take the version of file hls-player.js with hash 66cc393, which is available here and can be downloaded with corresponding build 0.5.28.2753.133.

1. Forming HLS server URL.

getHLSUrl() code

function initPage() {
    $("#urlServer").val(getHLSUrl());

    ...
}

2. Player initializing

videojs() code

<div>-element name to play the stream passed to the player

function initPage() {
    $("#urlServer").val(getHLSUrl());
    var player = videojs('remoteVideo');
    ...
}

3. Stream name definition (the stream must be published on server)

encodeURIComponent() code

function initPage() {
    ...
    var applyFn = function () {
        var streamName = $("#playStream").val();
        streamName = encodeURIComponent(streamName);
        ...
    };
    ...
}

4. Forming HLS stream URL and player starting

player.play() 

code

function initPage() {
    ...
    var applyFn = function () {
        ...
        var src = $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8";
        var key = $('#key').val();
        var token = $("#token").val();
        if (key.length > 0 && token.length > 0) {
            src += "?" + key + "=" + token;
        }
        player.src({
            src: src,
            type: "application/vnd.apple.mpegurl"
        });
        player.play();
    };
    $("#applyBtn").prop('disabled', false).click(applyFn);

}