embedding WebRTC video conferences

Embedding WebRTC video conference into your own web project

What scripts are required to embed a video conference and what dependencies should be taken into account when implementing

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 embedding video conferencing on a web page

To implement video conferencing on your web page, create two empty files conference-min.html and conference-min.js. These files will contain the minimum code to implement simple video conferencing.

Let’s analyze the contents of the files

HTML

We place the necessary elements in conference-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 the conference script

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

3. Initialize the API on page load

<body onload="init_page()">

4. Add two div elements: element at the top will display the video stream of your interlocutor, the lower one – your local video stream

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

5. Add a field for entering user nickname

<label>Login</label>
<input type="text" style="border: 1px solid" id="login">

6. We add the “Join” button, clicking on which will initiate a connection to the server, create a chat room for the first connected user and start broadcasting his video stream. For a user following an invite link, the “Join” button initiates a connection to an existing chat room and the exchange of video streams

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

7. Add a field in which the generated invite link will be displayed to connect the interlocutors to the chat room

<div id="inviteAddress" style="border: 1px solid">Not connected</div>

The full code of the HTML page looks as follows

<!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="conference-min.js"></script>   
</head>
<body onload="init_page()">
<div id="participant1Display" style="width:320px;height:240px;border: solid 1px"></div>
<br/>
<div id="local" style="width:320px;height:240px;border: solid 1px"></div>
<br/>
<label>Login</label>
<input type="text" style="border: 1px solid" id="login">
<br/><br/>
<button id="joinBtn">Join</button>
<br/><br/>
<div id="inviteAddress" style="border: 1px solid">Not connected</div>
</body>
</html> 

before join WebRTC conference RoomAPI WebSocket WCS

JavaScript

1. Create constants for server status and chat room

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var ROOM_EVENT = Flashphoner.roomApi.events;
var participants = 2
var url = "wss://demo.flashphoner.com:8443";
const id = `f${(~~(Math.random()*1e8)).toString(16)}`;

2. Create a variable for the Websocket session

var connection;

3. Initialize API when the HTML page is loaded

function init_page() {
    Flashphoner.init({});
	joinBtn.onclick = connect;
}

4. We are connected to the Room API of 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. As parameters for connecting to the chat room, we pass the WCS server URL and user login. Connection is initiated by clicking the “Join” button. After successful connection, the function “joinRoom ()” is launched

function connect() {   
    connection = Flashphoner.roomApi.connect({
        urlServer: url,
        username: document.getElementById("login").value
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        joinRoom();
    });
}

5. We are connected to the conference. When connected, we get the name of the room (generated randomly for the creator of the room or taken from the parameter in the URL for the user who connected via an invite link). Next, we get the status of the room from the WCS server and start publishing

function joinRoom() {
    connection.join({ name: getRoomName()})
	.on(ROOM_EVENT.STATE, function(room) {
        var participants = room.getParticipants();
        setInviteAddress(room.name());
        if (participants.length > 0) {
            for (var i = 0; i < participants.length; i++) {
                playParticipantsStream(participants[i]);
            }
        }
        publishLocalMedia(room);
    }).on(ROOM_EVENT.JOINED, function(participant) {
        playParticipantsStream(participant);
        console.log(participant.name(), "joined");
    }).on(ROOM_EVENT.PUBLISHED, function(participant) {
       playParticipantsStream(participant);
    });
}

6. We publish the local video stream using “room.publish ()”. As the parameters for publishing the stream, we pass the HTML element “local” and the object “constraints” which contains the parameters of the stream

function publishLocalMedia(room) {
    var constraints = {
        audio: true,
        video: true
    };
    var display = document.getElementById("local");
    room.publish({
        display: display,
        constraints: constraints,
    }).on(STREAM_STATUS.PUBLISHING, function(stream) {});
}

7. We get and play the video stream of the interlocutor. Specify the HTML element “participant1Display” to play the stream on the web page

function playParticipantsStream(participant) {
	if (participant.getStreams().length > 0) {
		participant.getStreams()[0].play(document.getElementById("participant1Display")).on(STREAM_STATUS.PLAYING, function(playingStream) {});
	}
}

8. Create and display on the web page an invite link for connecting to the conference

function getParamUrl(name, url) {
    url = url.match(new RegExp(name + '=([^&=]+)'));
    return url ? url[1] : false;
}

function getRoomName() {
    var name = window.location.search;
	if (name != "") {
		return getParamUrl("roomName", name);
    }
	return "room-" + id;
}
 
function setInviteAddress(name) {
    var inviteURL = window.location.href;
    document.getElementById("inviteAddress").textContent = (inviteURL.split("?")[0] + "?roomName=" + name);
}

The full JavaScript code looks as follows:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var ROOM_EVENT = Flashphoner.roomApi.events;
var participants = 2
var connection; 
var url = "wss://demo.flashphoner.com:8443";
const id = `f${(~~(Math.random()*1e8)).toString(16)}`;

function init_page() {
    Flashphoner.init({});
	joinBtn.onclick = connect;
}
 
function connect() {   
    connection = Flashphoner.roomApi.connect({
        urlServer: url,
        username: document.getElementById("login").value
    }).on(SESSION_STATUS.ESTABLISHED, function(session) {
        joinRoom();
    });
}
 
function joinRoom() {
    connection.join({ name: getRoomName()})
	.on(ROOM_EVENT.STATE, function(room) {
        var participants = room.getParticipants();
        setInviteAddress(room.name());
        if (participants.length > 0) {
            for (var i = 0; i < participants.length; i++) {
                playParticipantsStream(participants[i]);
            }
        }
        publishLocalMedia(room);
    }).on(ROOM_EVENT.JOINED, function(participant) {
        playParticipantsStream(participant);
        console.log(participant.name(), "joined");
    }).on(ROOM_EVENT.PUBLISHED, function(participant) {
       playParticipantsStream(participant);
    });
}
 
function playParticipantsStream(participant) {
    if (participant.getStreams().length > 0) {
        participant.getStreams()[0].play(document.getElementById("participant1Display"))
		.on(STREAM_STATUS.PLAYING, function(playingStream) {});
    }
}
 
function getParamUrl(name, url) {
    url = url.match(new RegExp(name + '=([^&=]+)'));
    return url ? url[1] : false;
}

function getRoomName() {
    var name = window.location.search;
	if (name != "") {
		return getParamUrl("roomName", name);
    }
	return "room-" + id;
}
 
function setInviteAddress(name) {
    var inviteURL = window.location.href;
    document.getElementById("inviteAddress").textContent = (inviteURL.split("?")[0] + "?roomName=" + name);
}
 
//publish local video
function publishLocalMedia(room) {
    var constraints = {
        audio: true,
        video: true
    };
    var display = document.getElementById("local");
    room.publish({
        display: display,
        constraints: constraints,
    }).on(STREAM_STATUS.PUBLISHING, function(stream) {});
}

Web page view with one connected user

after join WebRTC conference RoomAPI WebSocket WCS

View of the conference for two users

user2 join WebRTC conference RoomAPI WebSocket 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