Versions Compared

Key

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

An example of stream convertion to HLS

...

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

  • WebRTC
  • RTMP
  • RTMFP

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

...

and playing it in browser using VideoJS

The player shows how to convert stream published on WCS server to HLS and play it in browser. HLS stream cut starts automatically when strea is requested by HLS URL, for example, example https://demo.flashphoner.com:8445/e442test/e442test.m3u8 for  on the stream e442 on screenshot below

Image Removed

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 isImage Added

The code of the example

The source code can be accessed on server by the following path:

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

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

This The example can be tested using the following addressfiollowing URL:

httphttps://host:90918888/clientclient2/examples/demo/streaming/hls-player/hls-player.html

Here Where host is the address of the WCS server .address

...

Analyzing the code of the example

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

1. Forming A server HLS server URL .detection

getHLSUrl()   code

Code Block
languagejs
themeRDark
function initPage() {
    $("#header").text("HLS VideoJS Player Minimal");
    $("#urlServer").val(getHLSUrl());

    ...
}

2. Player initializinginitialization

videojs()   code

<div>-element name to play the stream A div element for stream playback is passed to the player

Code Block
languagejs
themeRDark
function initPage() {
    $("#urlServer").val(getHLSUrl());...
    var playerremoteVideo = videojsdocument.getElementById('remoteVideo');
    ...remoteVideo.className = "video-js vjs-default-skin";
    player = videojs(remoteVideo);
}

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

encodeURIComponent()   code

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

4. Forming HLS stream URL forming and player startinglaunching

player.play()  code code

If authentication key and token are set, they will be inclueded to stream URL

Code Block
languagejs
themeRDark
function initPageplayBtnClick() {
    ...
    var applyFn = function (if (validateForm()) {
        ...
        var srcvideoSrc = $("#urlServer").val() + "'/"' + streamName + "'/"' + streamName + "'.m3u8"';
        var key = $('#key').val();
        var token = $("#token").val();
        if (key.length > 0 && token.length > 0) {
            srcvideoSrc += "?" + key + "=" + token;
        }
        player.src({
            src: srcvideoSrc,
            type: "application/vnd.apple.mpegurl"
        });
        console.log("Play with VideoJs");
        player.play();
    };    onStarted();
    }
}

5. Playback stopping

player.pause() code

Code Block
languagejs
themeRDark
function stopBtnClick() {
    $("#applyBtn").prop('disabled', false).click(applyFn);
if (player != null) {
        console.log("Stop VideoJS player");
        player.pause();
    }
    onStopped();
}