openj-gate.com

lechoixdeslibraires.com

open4u.co.uk

argosnear.me

sarf3omlat.com

opencities.ca

australia-opening-times.com

Embedding Video Stream Mixing

Embedding Multipoint Conference Unit (MCU)

To embed Multipoint Conference Unit (MCU), you need to embed HTML code and dependent API scripts in your website

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 to perform the tests.

Step-by-step instructions for embedding Multipoint Conference Unit (MCU)

To embed Multipoint Conference Unit (MCU), we will create two empty files mcu-client-min.html and mcu-client-min.js. These files will contain the minimum code.

Let’s analyze the contents of the files

HTML

Place the necessary elements in mcu-client-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 script for minimum MCU:

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

3. Specify styles for the “display” class. This is necessary for the further correct display of the video in the div element:

<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 to display a preview of the local stream, which does not appear on the page, but is needed for correct operation:

<div id="localDisplay" style="display: none"></div>

6. Add a div element to output MCU stream:

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

7. Add a field to enter a username:

<input id="login" type="text" placeholder="Login"/>

8. Add a button to add the user to the MCU and start playing the stream:

<button id="joinBtn">Join</button>

The full code of the HTML page looks as follows (file «mcu-client-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="mcu-client-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 id="localDisplay" style="display: none"></div>
        <div class="fp-Video">
            <div id="remoteVideo" class="display"></div>
        </div>
        <br />
        <input id="login" type="text" placeholder="Login"/>
    	<button id="joinBtn">Join</button>
    </body>
</html>

View of the resulting web page in the screenshot below

before click join WCS WebRTC browser conference MCU realtime mixer

JavaScript

1. We create 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";
var conferenceStream;
var publishStream;

2. We initialize the API when loading the HTML page 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" //specify the address of your WCS
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log("ESTABLISHED");
    });
 
    joinBtn.onclick = joinBtnClick;
    var remoteVideo = document.getElementById("remoteVideo");
    var localDisplay = document.getElementById("localDisplay");
}

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 joinBtnClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
            startStreaming(session);
        });
    } else {
        startStreaming(session);
    }
}

4. The function “startStreaming()” starts publishing the local video stream to WCS. When creating a stream, the following parameters are passed:

  • streamName – the name of the stream published by the conference participant (in this case, login + “#” + room1, where login is the name of the participant);
  • localDisplay – the div element required to display the preview of the local video stream;
  • constraints – parameters for the presence of audio and video.

 

function startStreaming(session) {
    var login = document.getElementById("login").value;
    var streamName = login + "#" + "room1";
    var constraints = {
        audio: true,
        video: true
    };
    publishStream = session.createStream({
        name: streamName,
        display: localDisplay,
        receiveVideo: false,
        receiveAudio: false,
        constraints : constraints,
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        playStream(session);
    })
    publishStream.publish();
}

5. The “playStream()” function starts playback of the MCU stream. The following data is transmitted as parameters for playing a stream:

  • streamName – name of the mixer that will be played for the participant (in this case room1 + “-” + login + room1, where login is the name of the participant);
  • remoteVideo – the div element in which the video will be displayed;
  • constraints – parameters for the presence of audio and video in the playback.
function playStream(session) {
    var login = document.getElementById("login").value;
    var streamName = "room1" + "-" + login +"room1";
    var constraints = {
        audio: true,
        video: true
    };
    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: constraints,
         
    }).on(STREAM_STATUS.PLAYING, function (stream) {})
    conferenceStream.play();
}

The full JavaScript code looks as follows (file «mcu-client-min.js»):

//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";
var conferenceStream;
var publishStream;
 
//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");
    });
 
    joinBtn.onclick = joinBtnClick;
    var remoteVideo = document.getElementById("remoteVideo");
    var localDisplay = document.getElementById("localDisplay");
}
 
//Detect browser
var Browser = {
    isSafari: function() {
        return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    },
}

function joinBtnClick() {
    if (Browser.isSafari()) {
        Flashphoner.playFirstVideo(document.getElementById("play"), true, PRELOADER_URL).then(function() {
            startStreaming(session);
        });
    } else {
        startStreaming(session);
    }
}
 
function startStreaming(session) {
    var login = document.getElementById("login").value;
    var streamName = login + "#" + "room1";
    var constraints = {
        audio: true,
        video: true
    };
    publishStream = session.createStream({
        name: streamName,
        display: localDisplay,
        receiveVideo: false,
        receiveAudio: false,
        constraints : constraints,
    }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
        playStream(session);
    })
    publishStream.publish();
}

function playStream(session) {
    var login = document.getElementById("login").value;
    var streamName = "room1" + "-" + login +"room1";
    var constraints = {
        audio: true,
        video: true
    };
    conferenceStream = session.createStream({
        name: streamName,
        display: remoteVideo,
        constraints: constraints,
         
    }).on(STREAM_STATUS.PLAYING, function (stream) {})
    conferenceStream.play();
}

View of the web pages during a Multipoint Conference Unit (MCU) for three users

after click join WCS WebRTC browser conference MCU realtime mixer

Thus, you can embed a Multipoint Conference Unit (MCU) into your web project using a minimum code.

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