embedding HTML5-RTSP player for IP cams

Embedding an RTSP player in a web page

A browser cannot play RTSP streams directly, therefore it is necessary to convert the RTSP stream into HTML5 on the WCS server’s side

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 an RTSP HTML5 player embedding

To embed an RTSP player in our web page, let’s create two empty files: player-min.html and player-min.js. These files will contain the minimal code for our player’s operation.

Let’s study the contents of the files

HTML

Place the necessary elements in player.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 of the player

<script type="text/javascript" src="player-min.js"></script>   

3. Add styles to properly display the 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 the div element that the video for the player will be added to

<div class="fp-Video">
   <div id="myVideo" class="display"></div>
</div>

6. Add the Play button, the clicking on which will initialize connection to the server and start playing the video

<button id="playBtn">PLAY</button>

The full code of the HTML page (file “player-min.html”) looks as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <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="player-min.js"></script>
    </head>
    <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>
    <body onload="init_api()">
        <div class="fp-Video">
            <div id="play" class="display"></div>
        </div>
        <br />
        <button id="playBtn">PLAY</button>
    </body>
</html>

JavaScript

1. Create the constants and variables for the server operation status, Websocket session and stream. 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 PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";

2. Initialize API when the HTML page is loaded, match the functions to clicking the corresponding buttons and connect to the WCS server via WebSocket. 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:8443" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });

    playBtn.onclick = playClick;
}

3. Connect to the WCS server via Websocket. In this example, we are using our demo server. To test your own server, replace “wss://demo.flashphoner.com” with your WCS address

function connect() {
    session = Flashphoner.createSession({urlServer: "wss://demo.flashphoner.com"}).on(SESSION_STATUS.ESTABLISHED, function(session){       
        console.log("connection established");
        playStream(session);
    });
}

4. 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. https://docs.flashphoner.com/display/WEBSDK2EN/Video+playback+on+mobile+devices

var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}

function playClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
            playStream();
        });
    } else {
        playStream();
    }
}

5. Then, create a session.createStream() stream and transmit the RTSP URL “rtsp://myrtspserver/stream1” and the element of myVideo as the parameters. Done, the video stream is played on the web page.

For everything to work correctly, replace “rtsp://myrtspserver/stream1” with the address of the required RTSP stream

function playStream() {
    session.createStream({
        name: "rtsp://myrtspserver/stream1", //specify the RTSP stream address
        display: document.getElementById("play"),
    }).play();
}

The full JavaScript code (file “player-min.js”) looks as follows:

//Status constants
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var PRELOADER_URL = "https://github.com/flashphoner/flashphoner_client/raw/wcs_api-2.0/examples/demo/dependencies/media/preloader.mp4";

//Init Flashphoner API on page load
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");
    });

    playBtn.onclick = playClick;
}

//Detect browser
var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}
/**
*
If browser is Safari, we launch the preloader before playing the stream.
Playback should start strictly upon a user's gesture (i.e. button click). This is limitation of mobile Safari browsers.
https://docs.flashphoner.com/display/WEBSDK2EN/Video+playback+on+mobile+devices
*
**/
function playClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
            playStream();
        });
    } else {
        playStream();
    }
}

//Playing stream
function playStream() {
    session.createStream({
        name: "rtsp://myrtspserver/stream1", //specify the RTSP stream address
        display: document.getElementById("play"),
    }).play();
}

As a result, we get a minimal player that is basically a div block with a frame and is able to request an RTSP stream and to play it via the server.

Player after clicking on play RTSP ipcams WebRTC

Download Web Call Server 5

System requirements: Linux x86_64, 1 core CPU, 2 Gb RAM, Java

    Download Now    

Installation:

  1. wget https://flashphoner.com/download-wcs5.2-server.tar.gz
  2. Unpack and install using 'install.sh'
  3. Launch server using command 'service webcallserver start'
  4. Open the web interface https://host:8444 and activate your license

 

If you are using Amazon EC2, you don't need to download anything.

Launch WCS5 on Amazon EC2

 

Web Call Server Monthly Subscription

$75 per month

 

   Purchase   

 


Related Articles