Table of Contents |
---|
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.
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
...
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 http://localhost:8082/test/test.m3u8 on the screenshot below
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 - file with stylesplayer page styles file
video-js.css - HLS player styles file
hls-player.html - player page of the player
hls-player.js - script providing functionality for the playerThis player launch script
player-page.html - common player page elements for three HLS playback examples
video.js - player script (http://videojs.com/, Apache License Version 2.0)
videojs-hls.min.js - player script (minimized)
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 aad42ec93f01dd5ce8b50125d46273d27dfd3853 ecbadc3, which is available here and can be downloaded with corresponding in build 2.0.5212.7.1894.
1. Forming A server HLS URL . line 2detection
getHLSUrl() code
Code Block | ||||
---|---|---|---|---|
| ||||
function initPage() { $("#header").text("HLS VideoJS Player Minimal"); $("#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,
...
...
} |
2. Player initialization
videojs() code
A div element for stream playback is passed to player
Code Block | ||||
---|---|---|---|---|
| ||||
function initPage() {
...
var remoteVideo = document.getElementById('remoteVideo');
remoteVideo.className = "video-js vjs-default-skin";
player = videojs(remoteVideo);
} |
3. Stream name detection (the stream should be published to server)
encodeURIComponent() code
Code Block | ||||
---|---|---|---|---|
| ||||
function playBtnClick() {
if (validateForm()) {
var streamName = $('#playStream').val();
streamName = encodeURIComponent(streamName);
...
}
} |
4. HLS stream URL forming and player launching
player.play() code
If authentication key and token are set, they will be included to stream URL
Code Block | ||||
---|---|---|---|---|
| ||||
$remoteVideo.attr("src",function playBtnClick() { if (validateForm()) { ... var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8'; var key = $('#key').val(); var token = $("#urlServer#token").val(); if (key.length > 0 && token.length > 0) { videoSrc += "/?" + streamNamekey + "/=" + streamName + ".m3u8"); |
...
token;
}
player.src({
src: videoSrc,
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
Code Block | ||||
---|---|---|---|---|
| ||||
function stopBtnClick() {
if (player != null) {
console.log("Stop VideoJS player");
player.pause();
}
onStopped();
} |
6. New div contaioner tag creation after previous player was removed
Code Block | ||||
---|---|---|---|---|
| ||||
$remoteVideo.load();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); } |