embedding Streaming from an RTMP Live Encoder

Embedding a broadcasting from RTMP Live Encoder to an HTML page

Web Call Server receives the RTMP video stream from the Live Encoder device in H.264 and AAC codecs and distributes this video stream to browsers and mobile devices

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.

The page contains an HTML code that links to several JavaScript files and other dependencies. As a result, the RTMP Live Encoder broadcasts video from the web camera and displays the video on the page using HTML5.

Step-by-step instructions for embedding player to an HTML page

To embed an 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. Initialize the API on page load

<body onload="init_api()">

4. Add the div element that the video for the player will be added to

<div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div>

5. Add the Play button, to initialize connection to the server and start video playback by buton click

<input type="button" onclick="connect()" value="PLAY"/>

player before clicking on play RTSP ipcams WebRTC

The full code of the HTML page 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>

<body onload="init_api()">
<div id="myVideo" style="width:320px;height:240px;border: solid 1px"></div>
<br/><input type="button" onclick="connect()" value="PLAY"/>
</body>
</html> 

JavaScript

1. Create the constants for the player operation status

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;

2. Create the variable for the Websocket session

var session;

3. Initialize API when the HTML page is loaded

function init_api() {
    Flashphoner.init({});
}

4. 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) {
        playStream(session);
    });
}

5. Next, create a session.createStream() stream and pass the name of the stream “live_stream”, which we set in the encoder program,  and the HTML element “myVideo” as parameters. Done, the video stream is played on the web page

function playStream(session) {
    session.createStream({
        name: "live_stream",
        display: document.getElementById("myVideo"),
    }).play();
}

The full JavaScript code looks as follows:

//Status constants
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;

//Websocket session 
var session;

//Init Flashphoner API on page load
function init_api() {
    Flashphoner.init({});
}

//Connect to WCS server over websockets
function connect() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        playStream(session);
    });
}

//Play stream 
function playStream(session) {
    session.createStream({
        name: "live_stream",
        display: document.getElementById("myVideo"),
    }).play();
}

As a result, the server will convert the RTMP stream received from the Live Encoder to WebRTC and the player will play the stream via WebRTC

player after clicking play live encoder RTMP WebSocket API WCS

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