Scribd
Upload
50 views5 pages

The EasyRTC Framework Consists of A Client or Browser2

The document describes how to build a basic video conferencing application using the EasyRTC framework. It explains how to initialize the application, display local and remote video streams, detect when other users connect and disconnect, and initiate calls between users with just a few lines of code. Key steps include initializing EasyRTC, attaching callbacks to handle connections and calls, and using EasyRTC methods like easyApp() and call() to simplify the process.

Uploaded by

Nenad Femic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views5 pages

The EasyRTC Framework Consists of A Client or Browser2

The document describes how to build a basic video conferencing application using the EasyRTC framework. It explains how to initialize the application, display local and remote video streams, detect when other users connect and disconnect, and initiate calls between users with just a few lines of code. Key steps include initializing EasyRTC, attaching callbacks to handle connections and calls, and using EasyRTC methods like easyApp() and call() to simplify the process.

Uploaded by

Nenad Femic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

The EasyRTC framework consists of a client or browser-side JavaScript library and a backend JavaScript server built

on top of a node.js. Because the WebRTC libraries is built into each browser there is no need for a browser plug-in.

Google's Chrome browser has the broadest support for the WebRTC API. Opera is now using the same engine as
Chrome and hence mimics it's behavior. Firefox provides excellent support for data communications but only basic
support for video chats (it lacks the ability to set the camera resolution, programmatically allow screen sharing, or
do statistics gathering).

WebRTC has the potential once it is fully standardized to support audio and video chats and conferencing,
multiplayer games and many other audio, video and data-based applications.

As is often the case with software, with power comes complexity. WebRTC has a learning curve that is
likely to hamper its use by web developers. To hide that complexity, Priologic has built the EasyRTC
framework.

A WebRTC application usually needs to do most of the following steps.

 Get access to the local camera and microphone in the form of a "media stream".
 Establish a connection to a signaling server.
 Initiate a call to a person on another browser.
 Connect media streams to video tags.

Using the EasyRTC framework, several of these steps can be collapsed into a single call, vastly
simplifying the developers job, particularly if the web developer is trying to support multiple platforms.

This document is a tutorial for writing applications with the EasyRTC framework. It does not cover the
entire EasyRTC API.

Terminology
 Callback - A JavaScript function supplied to a library so that the library will call it when a
particular event occurs.
 Media Stream - An object encapsulating a video track and/or one or more audio tracks.
 Peer Connection - A connection between two different browsers that enables peer to peer
communication.
 Server - The Node.js server plus some JavaScript code we supply provides the server side of the
EasyRTC framework.

Video Conferencing - Easy-Side Up


This section shows you how to build a page that supports two-way (person to person) audio/visual
conversations with as little developer effort as possible.

1
Include the below four lines in the <head> section of your HTML file. The first two scripts are needed
by EasyRTC, while the third will be your own application logic. The CSS file provides some styling for an
error messages dialog.

<head>
...
<link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
<script type="text/javascript" src="mylogic.js"></script>
...
</head>

Put two video tags (one to display video from the local camera, one to display video from somebody else's
camera) with id attributes in the &lt;body> section of your html file, like the below. The second video tag
should be in a &lt;div> block with a CSS position value of "relative" to help position it's hangup button.
There is no hangup button for the self video.

<body>
...
<video style="float:left" id="self" width="300" height="200"
muted="muted"></video>
<div style="position:relative;float:left;width:300px">
<video id="caller" width="300" height="200"></video>
</div>
...
</body>

Now we have to start writing some application logic for the application.js file, starting with an
initialization function that will be called when the page gets loaded. The primary responsibility of the
initialization function is to call the EasyRTC.easyApp method. It takes the following arguments:

 applicationName - some literal string like "CompanyChatLine".


 self-video-id - a string containing the id of the first video tag.
 array-of-caller-video-ids - an array containing the id of the second video tag.
 successCallback - a function to call on successful connection.

The initialization function is also a good place to register a callback to find out who else is hooked up to
the server. The callback is registered using EasyRTC.setRoomOccupantListener.

Here is an example initialization function:

function my_init() {
easyrtc.setRoomOccupantListener( loggedInListener);
easyrtc.easyApp("Company_Chat_Line", "self", ["caller"],
function(myId) {
console.log("My easyrtcid is " + myId);
}
);
2
}

The callback will be called whenever somebody else connects to or disconnects from the
"CompanyChatLine", and immediately after the call to easyrtc.easyApp.

The callback is passed two arguments:

 a room name
 a map whose keys are the ids (easyrtcids) of the other people connected to the server using the
same application name.

In our example, the callback will maintain a list of buttons to call the other people connected to the
"CompanyChatLine". We'll add a &lt;div> to the &lt;body> to hold these buttons.

<body>
...
<div id="otherClients"> </div>
...
</body>

The text for the loggedInListener is below:

function loggedInListener(roomName, otherPeers) {


var otherClientDiv = document.getElementById('otherClients');
while (otherClientDiv.hasChildNodes()) {
otherClientDiv.removeChild(otherClientDiv.lastChild);
}
for(var i in otherPeers) {
var button = document.createElement('button');
button.onclick = function(easyrtcid) {
return function() {
performCall(easyrtcid);
}
}(i);

label = document.createTextNode(i);
button.appendChild(label);
otherClientDiv.appendChild(button);
}
}

Most applications can ignore the roomName parameter; it is only of interest if your application can access
several rooms simultaneously.

Of course, in a real application, we wouldn't be using the easyrtcids for button labels. Instead, we would
have some application logic to map the easyrtcids to more permanent identifiers like name, job title, and
profile picture.

To actually initiate a call to a person, all we need to do is call the easyrtc.call method, passing it the
easyrtcid of the person, and three callbacks:

 function successCallback(easyrtcid) - called when the initiation succeeds.


 function errorCallback(errorCode, errorText) - called on error.

3
 function accepted(wasAccepted,easyrtcid) - called to indicate whether the call was accepted or not.

Here is some code for the actual call initiation:

function performCall(easyrtcid) {
easyrtc.call(
easyrtcid,
function(easyrtcid) { console.log("completed call to " + easyrtcid);},
function(errorMessage) { console.log("err:" + errorMessage);},
function(accepted, bywho) {
console.log((accepted?"accepted":"rejected")+ " by " + bywho);
}
);
}

Now we just have to modify the body tag of our html file to actually call the my_init function.

<body onload="my_init()">

Here is the complete HTML and JavaScript for this solution.

The HTML file:


<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
<script type="text/javascript" src="js/mylogic.js"></script>
</head>
<body onload="my_init()">
<div id="otherClients"> </div>
<video style="float:left" id="self" width="300" height="200"></video>
<div style="position:relative;float:left;width:300px">
<video id="caller" width="300" height="200"></video>
</div>
</body>
</html>

The mylogic.js file:


function my_init() {
easyrtc.setRoomOccupantListener( loggedInListener);
easyrtc.easyApp("Company_Chat_Line", "self", ["caller"],
function(myId) {
console.log("My easyrtcid is " + myId);
}
);
}

function loggedInListener(roomName, otherPeers) {


var otherClientDiv = document.getElementById('otherClients');
while (otherClientDiv.hasChildNodes()) {
otherClientDiv.removeChild(otherClientDiv.lastChild);
}
for(var i in otherPeers) {
var button = document.createElement('button');
button.onclick = function(easyrtcid) {
return function() {
4
performCall(easyrtcid);
}
}(i);

label = document.createTextNode(i);
button.appendChild(label);
otherClientDiv.appendChild(button);
}
}

function performCall(easyrtcid) {
easyrtc.call(
easyrtcid,
function(easyrtcid) { console.log("completed call to " + easyrtcid);},
function(errorMessage) { console.log("err:" + errorMessage);},
function(accepted, bywho) {
console.log((accepted?"accepted":"rejected")+ " by " + bywho);
}
);
}

You might also like