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 , httpshttp://demo.flashphoner.com:8445/e442/e442.m3u8 for the stream e442 on localhost:8082/test/test.m3u8 on the 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

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

1. Forming A server HLS server URL .detection

getHLSUrl()   code

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

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

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 included to stream URL

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.dispose() code

This method removes the div container tag where player was initialized from the page

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

6. New div contaioner tag creation after previous player was removed

code

function createRemoteVideo(parent) {
    remoteVideo = document.createElement("video");
    remoteVideo.id = "remoteVideo";
    remoteVideo.width=852;
    remoteVideo.height=480;
    remoteVideo.controls="controls";
    remoteVideo.autoplay="autoplay";
    remoteVideo.type="application/vnd.apple.mpegurl";
    remoteVideo.className = "video-js vjs-default-skin";
    parent.appendChild(remoteVideo);
    player = videojs(remoteVideo);
}