openj-gate.com

lechoixdeslibraires.com

open4u.co.uk

argosnear.me

sarf3omlat.com

opencities.ca

australia-opening-times.com

embedding Live broadcasting from a web-cam

Embed a live video feed from a webcam to a webpage

This example shows how to play a video stream while publishing another stream using one web page

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 on how to embed for live video feed from a webcam to an HTML page

To embed the video broadcast on your web page, let’s create two empty files: two-way-streaming-min.html and two-way-streaming-min.js. These files will contain the minimal code.

Let’s study the contents of the files

HTML

Place the necessary elements in two-way-streaming.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 video broadcast

<script type="text/javascript" src="two-way-streaming.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 a div element in which the video stream captured from the webcam will be displayed

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

6. Add a div element in which the video stream from your server will be played

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

7. Add the “Publish” button, clicking on which will initiate a connection to the server and begin broadcasting your stream

<button id="publishBtn">Publish</button

8. Add a “Play” button, clicking on which will play the video stream from your server

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

9. Add the “Stop” button, clicking on which will stop the publication and playback of the stream

<button id="stopBtn">Stop</button>

 

page_before_clicking_publis_play_WebRTC_browser_WCS

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

<!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="two-way-streaming-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="publish" class="display"></div>
        </div>
        <br />
        <button id="publishBtn">Publish</button><br />
        <br />
        <div class="fp-Video">
            <div id="play" class="display"></div>
        </div>
        <br />
        <br />
        <button id="playBtn">Play</button><br />
        <br />
        <button id="stopBtn">Stop</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 stream;
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");
    });

    publishBtn.onclick = publishClick;
    playBtn.onclick = playClick;
    stopBtn.onclick = stopPublish;
}

3. Next, create a stream using the session.createStream () function and pass the stream name “stream” and the HTML element “publish” as parameters. We publish a stream with these parameters.

function publishStream(session) {
    stream = session.createStream({
        name: "stream",
        display: document.getElementById("publish"),
    });
	stream.publish();
}

4. In the second div of the web page, the video stream will be played. Specify the name of the stream “stream” and the HTML element “play” in the parameters of the Session.createStream () function

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

5. Function stop publishing and playback

function stopPublish() {
	stream.stop();
}

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

//Constants
var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var session;
var stream;
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:8443" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });

    publishBtn.onclick = publishClick;
    playBtn.onclick = playClick;
    stopBtn.onclick = stopPublish;
}

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

/**
*
If browser is Safari, we launch the preloader before publishing or playing the stream.
Publishing or 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 publishClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("publish"), true, PRELOADER_URL).then(function() {
            publishStream();
        });
    } else {
        publishStream();
    }
}

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

//Publish stream
function publishStream() {
    stream = session.createStream({
        name: "stream",
        display: document.getElementById("publish"),
    });
    stream.publish();
}

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

//Stopping stream
function stopPublish() {
    stream.stop();
}

page_after_clicking_publish_play_WebRTC_browser_WCS

Download minimal examples

    Download    

1. Download archive.

2. Unpack the example files to your Web server.

Default directory for Apache:

/var/www/html

​ for Nginx:

/usr/local/nginx/html

​ or see the documentation for your web server.

3. Run the minimal example in a browser using a link like

https://your.web.server/min-example-file-name.html

Warning! The web page must be opened via https to get examples working.

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

$145 per month

 

   Purchase   

 


Related Articles