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
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
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
function initPageplayBtnClick() { ... var applyFn = function ()if (validateForm()) { var streamName = $("'#playStream"').val(); streamName = encodeURIComponent(streamName); ... }; ... } |
4. Forming HLS stream URL forming and player startinglaunching
If authentication key and token are set, they will be inclueded to stream URL
Code Block | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
function stopBtnClick() { $("#applyBtn").prop('disabled', false).click(applyFn); if (player != null) { console.log("Stop VideoJS player"); player.pause(); } onStopped(); } |