Embedding snapshot slicing in an HTML page
What scripts are required for embedding snapshot slicing and what dependencies should be taken into account when embedding
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 snapshot slicing on your web page
To embed snapshot slicing of a video stream into our web page, create two empty files stream-snapshot-min.html and stream-snapshot-min.js. These files will contain the minimum code.
Let’s analyze the contents of the files
HTML
Place the necessary elements in stream-snapshot-min.html:
1. 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>
2. Import the script for slicing snapshots:
<script type="text/javascript" src="stream-snapshot-min.js"></script>
3. Add styles to properly display video in div elements:
<style>
.fp-Video {
border: 1px double black;
width: 322px;
height: 242px;
}
.display {
width: 100%;
height: 100%;
display: inline-block;
}
.display > video,
object {
width: 100%;
height: 100%;
}
</style>
4. Initialize the API on page load:
<body onload="init_api()">
5. Add a div element in which the broadcast video stream will be displayed:
<div class="fp-Video"> <div id="localVideo" class="display"></div> </div>
6. Add the “Start” button, clicking on which will initiate a connection to the server and begin broadcasting the stream:
<button id="publishBtn">Start</button>
7. Then add the “Take a snapshot” button, clicking on which will create a snapshot:
<button id="snapshotBtn">Take a snapshot</button>
8. Now add the div element in which the created snapshot will be displayed:
<div style="width:320px;height:240px;border: solid 1px"><img id="snapshotImg"/></div>
View of the created web page:
The full code of the HTML page looks as follows (file «stream-snapshot-min.html»):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<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="stream-snapshot-min.js"></script>
<style>
.fp-Video {
border: 1px double black;
width: 322px;
height: 242px;
}
.display {
width: 100%;
height: 100%;
display: inline-block;
}
.display > video,
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="init_api()">
<div class="fp-Video">
<div id="localVideo" class="display"></div>
</div>
<button id="publishBtn">Start</button>
<br />
<br />
<button id="snapshotBtn">Take a snapshot</button>
<div style="width: 320px; height: 240px; border: solid 1px;"><img id="snapshotImg" /></div>
</body>
</html>
JavaScript
1. Create the constants and variables for the server operation status, WebSocket session, and stream name. (In our example “stream1”. For correct testing, specify your values). To work with the iOS Safari browser, we need a preloader, which can be downloaded from GitHub:
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS; var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS; var session; var streamName = "stream1" var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";
2. We initialize the API when loading the HTML page and connect to the WCS server via WebSocket and bind functions to the events of pressing the corresponding buttons. In this example, we are using our demo server. To test your own server, replace “wss://demo.flashphoner.com” with your WCS address:
function init_api() {
Flashphoner.init({});
//Connect to WCS server over websockets
session = Flashphoner.createSession({
urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
}).on(SESSION_STATUS.ESTABLISHED, function(session) {
console.log("ESTABLISHED");
});
publishBtn.onclick = publishClick;
snapshotBtn.onclick = getSnapshot;
}
3. We detect the browser, and if the browser is Safari, we launch the preloader. Playback should start strictly upon a user’s gesture (i.e. button click). This is limitation of mobile Safari browsers. More:
var Browser = {
isSafari: function() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
},
}
function publishClick() {
if (Browser.isSafari()) {
Flashphoner.playFirstVideo(document.getElementById("localVideo"), true, PRELOADER_URL).then(function() {
publishStream(session);
});
} else {
publishStream(session);
}
}
4. Next, create a session.createStream() stream and pass the stream name and div element “localVideo” as parameters. Publish the stream:
function publishStream(session) {
session.createStream({
name: streamName,
display: document.getElementById("localVideo"),
}).publish();
}
5. The following function creates a snapshot using a REST request. The resulting snapshot is displayed on the page in the div element “snapshotImg”:
function getSnapshot() {
fetchUrl = "https://demo.flashphoner.com:8444/rest-api/stream/snapshot";
const options = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"streamName": streamName,
}),
}
fetch(fetchUrl, options)
.then(function(response) {
response.json().then(function(data) {
document.getElementById("snapshotImg").src = "data:image/png;base64," + data.data;
});
});
}
he full JavaScript code looks as follows (file «stream-snapshot-min.js»):
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var streamName = "stream1"
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";
function init_api() {
Flashphoner.init({});
//Connect to WCS server over websockets
session = Flashphoner.createSession({
urlServer: "wss://demo.flashphoner.com" //specify the address of your WCS
}).on(SESSION_STATUS.ESTABLISHED, function(session) {
console.log("ESTABLISHED");
});
publishBtn.onclick = publishClick;
snapshotBtn.onclick = getSnapshot;
}
var Browser = {
isSafari: function() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
},
}
function publishClick() {
if (Browser.isSafari()) {
Flashphoner.playFirstVideo(document.getElementById("localVideo"), true, PRELOADER_URL).then(function() {
publishStream(session);
});
} else {
publishStream(session);
}
}
function publishStream(session) {
session.createStream({
name: streamName,
display: document.getElementById("localVideo"),
}).publish();
}
function getSnapshot() {
fetchUrl = "https://demo.flashphoner.com:8444/rest-api/stream/snapshot";
const options = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
"streamName": streamName,
}),
}
fetch(fetchUrl, options)
.then(function(response) {
response.json().then(function(data) {
document.getElementById("snapshotImg").src = "data:image/png;base64," + data.data;
});
});
}
Thus, we embedded the snapshot of the broadcast on the web page.
Download minimal examples
1. Download archive. 2. Unpack the example files to your Web server. Default directory for Apache: for Nginx: or see the documentation for your web server. 3. Run the minimal example in a browser using a link like Warning! The web page must be opened via https to get examples working./var/www/html
/usr/local/nginx/html
https://your.web.server/min-example-file-name.html
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.
