Embedding of playback using the HLS technology
WebRTC streams are converted on the server side to HLS and played in a regular HLS player
Use these instructions for quick installation and configuration of the server. In addition to that, you can connect to our demo server demo.flashphoner.com via the Websockets protocol to perform the tests.
Step-by-step instructions for embedding the player for playing streams over HLS on web page
To implement playback of WebRTC streams via HLS to your web page, you can use one of the two options below.
Option 1: Using Video.js player
The scripts necessary for further work can be downloaded from the official website of the Video.js project or from our demo-server using the links below:
To embed the HLS player on your web page, create two empty files hls-player-min.html and hls-player-min.js. These files will contain the minimum code for the operation of our player.
Let us examine the contents of files
hls-player-min.html
Place the necessary elements in hls-player-min.html:
1. Import the script of the Video.js player
<link rel="stylesheet" href="video-js.css"> <script src="video.js"></script> <script src="videojs-hls.min.js"></script>
2. Import the script of the main API
<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
3. Import the script of the minimal player
<script type="text/javascript" src="hls-player-min.js"></script>
4. Initialize the API on page load
<body onload="initPage()">
5. Add the HTML element “Video”
<video id="remoteVideo" width="320" height="240" class="video-js vjs-default-skin"
controls="controls"
type="application/vnd.apple.mpegurl">
</video>
6. Add the “Play” button, clicking which will start playing the video
<button id="applyBtn" type="button">Play</button>
The result here is the player
The full code of the HTML page looks as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="video-js.css">
<script src="video.js"></script>
<script src="videojs-hls.min.js"></script>
<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
<script type="text/javascript" src="hls-player-min.js"></script>
</head>
<body onload="initPage()">
<video id="remoteVideo" width="320" height="240" class="video-js vjs-default-skin"
controls="controls"
type="application/vnd.apple.mpegurl">
</video>
<button id="applyBtn" type="button">Play</button>
</body>
</html>
hls-player-min.js
In this file, there will be requiring the following parameters
1. The path to connect to our WCS server. For correct operation, specify the address of your WCS
var urlServer = "https://demo.flashphoner.com:8445";
2. The name of the required stream. For correct operation, specify the name of your WebRTC stream
var streamName = "stream1";
3. The function then generates a reference stream for playback over HLS and starts playback in the player
var applyFn = function() {
var streamName = "stream1";
streamName = encodeURIComponent(streamName);
var src = urlServer + "/" + streamName + "/" + streamName + ".m3u8";
player.src({
src: src,
type: "application/vnd.apple.mpegurl"
});
player.play();
};
The full JavaScript code looks as follows:
function initPage() {
var urlServer = "https://demo.flashphoner.com:8445";
var player = videojs('remoteVideo');
var applyFn = function () {
var streamName = "stream1";
streamName = encodeURIComponent(streamName);
var src = urlServer + "/" + streamName + "/" + streamName + ".m3u8";
player.src({
src: src,
type: "application/vnd.apple.mpegurl"
});
player.play();
};
applyBtn.onclick = applyFn
}
As a result, we obtain a universal player that can play WebRTC video stream over HLS in browsers on PC and mobile devices
Option 2. Native player for mobile devices
To implement the WebRTC HLS player for mobile devices on our web page, create two empty files hls-min.html and hls-min.js. These files will contain the minimum code for the operation of our player.
Let us examine the contents of files
hls-min.html
We place the necessary elements in hls-min.html:
1. Import the script of the minimum player
<script type="text/javascript" src="hls-min.js"></script>
2. Add HTML element “Video”. We have specified a link to the stream in the properties of the element. For correct operation, replace the link “https://demo.flashphoner.com:8445/stream1/stream1.m3u8”
<video id="videoPlayer" width="600" height="400" src="https://demo.flashphoner.com:8445/stream1/stream1.m3u8" controls="controls" type="application/vnd.apple.mpegurl"> </video>
3. Add the button “Play”, clicking on which will start playback
<button onclick="play()">Play</button>
The result here is this player
The full code of the HTML page looks as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="hls-min.js"></script>
</head>
<body>
<video id="videoPlayer" width="600" height="400"
src="https://demo.flashphoner.com:8445/stream1/stream1.m3u8"
controls="controls"
type="application/vnd.apple.mpegurl">
</video>
<button onclick="play()">Play</button>
</body>
</html>
hls-min.js
In this case, the script processes the click on the “Play” button and starts playback of the WebRTC stream in the player via HLS.
Let’s study the contents of the files
1. Declare a variable “video”
var video;
2. When you load a page, call a function that refers to the player as an HTML element
window.onload = function() {
video = document.getElementById("videoPlayer");
}
3. Then create the function that starts video playback on clicking “Play” button
function play() {
video.play();
}
The full JavaScript code looks as follows:
var video;
window.onload = function() {
video = document.getElementById("videoPlayer");
}
function play() {
video.play();
}
In the screenshot below, a view of the native player on iOS with playback of WebRTC stream via HLS
Download Web Call Server 5
System requirements: Linux x86_64, 1 core CPU, 2 Gb RAM, Java
Installation:
- wget https://flashphoner.com/download-wcs5.2-server.tar.gz
- Unpack and install using 'install.sh'
- Launch server using command 'service webcallserver start'
- Open the web interface https://host:8444 and activate your license
If you are using Amazon EC2, you don't need to download anything.
