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

Let’s place the necessary elements in mcu-client-min.html:

1. Import the main API script

<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>
	.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_page()">

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 id="remoteVideo" class="display" style="width:640px;height:480px;border:solid 1px"></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 HTML code of the page looks like this

<!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="mcu-client-min.js"></script>
	<style>
		.display {
			width: 100%;
			height: 100%;
			display: inline-block;  
		}
 
		.display > video, object {
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body onload="init_page()">
    <div id="localDisplay" style="display: none"></div>
	<div id="remoteVideo" class="display" style="width:640px;height:480px;border:solid 1px"></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 for the status of a streaming session on the WCS

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

2. We create global variables for streams and URL. In this example, we use our demo server. To test your own server, replace “wss://demo.flashphoner.com” with your WCS address

var conferenceStream;
var publishStream;
var url = "wss://demo.flashphoner.com:8443";

3. In the function “init_page()”, we initialize the API, specify the function that will be executed when the “Join” button is clicked and define div elements to display the preview and MCU stream

function init_page() {
    Flashphoner.init({});
    joinBtn.onclick = joinBtnClick;
    var remoteVideo = document.getElementById("remoteVideo");
    var localDisplay = document.getElementById("localDisplay");
}

4. The function “joinBtnClick()” creates a connection to WCS via WebSocket.

function joinBtnClick() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        startStreaming(session);
    });
}

5. 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();
}

6. 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:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var conferenceStream;
var publishStream;
var url = "wss://demo.flashphoner.com:8443";

function init_page() {
    Flashphoner.init({});
    joinBtn.onclick = joinBtnClick;
    var remoteVideo = document.getElementById("remoteVideo");
    var localDisplay = document.getElementById("localDisplay");
}

function joinBtnClick() {
    session = Flashphoner.createSession({
        urlServer: "wss://demo.flashphoner.com"
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        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 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