Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

On the screenshot below a stream is being played in Safari browser.

Image RemovedStream 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

Image Added

In the URL on the screenshot, 192demo.168flashphonr.1.9 com is the address of the WCS server.
Port 8082 8445 is used for HLS .
HLS files are saved to directory WCS_HOME/hls/streamName (streamName is the name of the stream being played).
When Apply button is clicked, video source is set to the stream URL and playback can be started.over HTTPS.

Code of the example

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

...

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 for 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:

...

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

1. Forming HLS server URL. line 2

getHLSUrl() code

Code Block
languagejs
themeRDark
function initPage() {
    $("#urlServer").val(getHLSUrl());

Function getHLSUrl() defined in utility script utils.js is used to set the URL to http://<address of the WCS server>:8082. line 50

2. Video source. line 6

When Apply button is clicked,

- source of the video element is set to the URL of HLS stream

Code Block


    ...
}

2. Player initializing

videojs() code

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

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

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

encodeURIComponent() code

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

4. Forming HLS stream URL and player starting

player.play() code

Code Block
languagejs
themeRDark
$remoteVideo.attr("src",function initPage() {
    ...
    var applyFn = function () {
        ...
        player.src({
            src: $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8",
            type: "application/vnd.apple.mpegurl");

- method load() is called to update the video element

Code Block
languagejs
themeRDark
$remoteVideo.load();
        });
        player.play();
    };
    $("#applyBtn").prop('disabled', false).click(applyFn);

}