HLS Player

HLS player example

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.

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

In the URL on the screenshot, 192.168.1.9 is the address of the WCS server.
Port 8082 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.

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
hls-player.html - page of the player
hls-player.js - script providing functionality for the player

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 aad42ec93f01dd5ce8b50125d46273d27dfd3853, which is available here and can be downloaded with corresponding build 0.5.7.1894.

1. Forming HLS URL. line 2

$("#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

$remoteVideo.attr("src", $("#urlServer").val() + "/" + streamName + "/" + streamName + ".m3u8");

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

$remoteVideo.load();