1. technology and computing
2. internet technology
3. chat

OOVOO
MUTE-EJECT WEB VIDEO CHAT
.NET SAMPLE
Specification
ooVoo © 2009
Version 1.0
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 2 of 2
Table of Contents
1 INTRODUCTION .................................................................................................. 4 1.1 Scope of the document .......................................................................................................................... 4 1.2 Targeted Readers .................................................................................................................................. 4 2 COMMON APPLICATION FACILITIES ............................................................... 5 2.1 Entrance point ....................................................................................................................................... 5 2.2 Participants list ...................................................................................................................................... 5 2.3 History list .............................................................................................................................................. 5 3 IMPLEMENTATION ............................................................................................. 6 3.1 3.2 3.3 3.4 3.5 Create database ..................................................................................................................................... 6 Create entrance page ............................................................................................................................ 7 Embed web video room control ........................................................................................................... 7 Build participants’ list .......................................................................................................................... 8 Implement Mute/Eject functional ........................................................................................................ 9 3.5.1 Render Mute/Eject controls........................................................................................................... 9 3.5.2 Set-up long-polling request (comet/reverse ajax)........................................................................ 10 3.5.3 Handle comet/reverse ajax response from the server. ................................................................. 14 3.6 Create history list. ............................................................................................................................... 15 3.7 Notes 17 ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 3 of 3
1 INTRODUCTION
1.1 Scope of the document
This document is intended to give comprehensive description of functional facilities of
ooVoo Mute-Eject Web Video Chat .NET Sample application.
This document provides full implementation description of ooVoo Mute-Eject Web Video
Chat .NET Sample using ASP.NET, Web Video Chat Room API, JavaScript, MS SQL.
1.2 Targeted Readers
•
Everyone who wants to embed ooVoo video chat room facilities in his/her
application.
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 4 of 4
2 COMMON APPLICATION FACILITIES
ooVoo Mute-Eject Web Video Chat .NET Sample provides possibilities to create web video
room up to six at the same time on your web application. There is the list of common
features of the application:
¾
Video conference up to six people at the same time
¾
The list of current web video room participants
¾
Possibility to mute/unmute any participant from the participants list
¾
Possibility to eject any participant from the participants list
¾
The history list with duration of participation
2.1 Entrance point
ooVoo Mute-Eject Web Video Chat .NET Sample has an entrance form. This form requires
entering participant name and checks that participant with such name does not exist in
current video chat.
2.2 Participants list
The participants list is built according to the list of current web video chat participants.
The participant info consists of the participant’s name. Also there are two links next to
name: Mute (Unmute) and Eject. The first link informs if the microphone of this
participant is active (inactive) and enables to switch on/off the microphone of this
participant. The second link helps to disconnect this participant from the current web
video chat.
Each time the user leaves of join web video chat the participants list is refreshed.
2.3 History list
The history list consists of participants that visited this web video room early. The
participant info consists of the participant’s name and his participation duration.
Each time any participant leaves web video chat the history list is refreshed.
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 5 of 5
3 IMPLEMENTATION
ooVoo Mute-Eject Web Video Chat .NET Sample was built using next technologies and
libraries:
•
ASP.NET was used to design web pages and .NET was used to build server
business logic.
•
ooVoo Web Video Chat Room API was used to embed ooVoo video chat control
into web page.
•
prototype.js library was used to support asynchronous requests to the server.
•
MS SQL was used to store participant’s info.
ooVoo Mute-Eject Web Video Chat .NET Sample implementation contains next steps:
•
Create database and table to store participant’s information.
•
Create entrance page for web video room
•
Create web video room control using ooVoo Web Video Chat Room API
•
Build participants list using ooVoo Web Video Chat Room API.
•
Implement Mute/Eject functional using prototype.js library and comet (reverse
ajax) pattern.
•
Build history list asynchronously using stored information in database and ooVoo
Web Video Chat Room API events.
3.1 Create database
ooVoo Mute-Eject Web Video Chat .NET Sample uses database to store participants’
information. This information is necessary to build history list, to get actual status of
defined participant, to check if participant with such name already active in current video
chat.
The database consists of a table with the next fields:
•
Unique Id (default primary key)
•
Participant Name
•
The date time when participant joins the video chat room
•
The date time when participant leaves the video chat room
•
Actual microphone status of participant (mute/unmute)
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 6 of 6
3.2 Create entrance page
The entrance page has two core goals:
1) It is necessary to store username as ooVoo Web Video Chat Room API does not have
getter property for current participant’ name.
2) It is necessary to check that user with such name does not active in a current video
chat.
When the participant enter his/her name and click “join” the server code must execute
next steps:
1) Check in database that participant with such name does not active in current
video chat.
To check this case you should retrieve from database all participants with such
name and without left time (the left time must be null). If this list does not empty
ask the participant to take another name.
2) If the participant with such name does not active in current conference you should
save his/her info in database.
3) Redirect to (or make visible) the form with ooVoo Web Video Chat Room control.
3.3 Embed web video room control
To embed web video room control into your page you should:
1) Get video room id:
a. Sign in https://secure.oovoo.com/
b. Click Set up your "Video Chat Rooms"
c. Create video chat room and activate it
d. Click “Embedded code” link opposite your video chat room, copy it and
insert in your web page.
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 7 of 7
<script type="text/javascript"
src="http://videocallroom.oovoo.com/oovoomelink/codelib/oovoorooms.js"></sc
ript>
<script src='http://java.com/js/deployJava.js'></script>
<script type='text/javascript'>
roomProps.roomID = '61F68809BB973D17E04400244F7E8E22';
roomProps.width = '536';
roomProps.height = '445';
roomProps.backgroundColor = '#666666';
roomProps.captionColor = '#FFFFFF';
roomProps.captionText = 'Enter your caption here';
var myRoom=CreateRoom();
</script>
2) Set the caption of web video room (roomProps.captionText). For more
customization visit http://oovoo.com/Developers/WebAPI.aspx.
3) The next step is to set the name of the participant that has been entered before.
To do it – use inline ASP.NET code.
<script type='text/javascript'>
roomProps.roomID = '61F08807BB973D17E04400144F7E8E22';
roomProps.width = '795';
roomProps.height = '640';
roomProps.backgroundColor = '#666666';
roomProps.captionColor = '#FFFFFF';
roomProps.captionText = 'ASP.NET ooVoo Web Room Sample';
roomProps.displayName = "<%= CurrentUser %>";
var myRoom=CreateRoom();
</script>
NOTE: If you do not set the displayName property the control provides this functional
itself. And in this case you will not be able to get to know current username.
3.4 Build participants’ list
To build participants’ list you should:
1. Handle onParticipantJoined and onParticipantLeft events of Web Video
Chat Room API in JavaScript.
function AddParticipant(name)
{
var participantList = document.getElementById('participantList');
var li = document.createElement('li');
li.setAttribute('name',name);
var txt = document.createTextNode(name);
li.appendChild(txt);
participantList.appendChild(li);
}
function onParticipantJoined(participantInfo)
{
var name = GetParticipantNameFromInfo(participantInfo);
if (name != "") {
AddParticipant(name);
} else {
return false;
}
}
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 8 of 8
function onParticipantLeft(participantInfo)
{
var name = participantInfo.substr(participantInfo.lastIndexOf(":")+1);
var participantList = document.getElementById('participantList');
var lis = participantList.getElementsByTagName('li');
for (var i=0; i < lis.length; i++){
pname = lis[i].getAttribute('name');
if (pname != null && pname == name){
participantList.removeChild(lis[i]);
break;
}
}
}
3.5 Implement Mute/Eject functional
To implement Mute/Eject functional you should execute next steps:
1. Add Mute/Eject controls to each participant in list.
2. Implement comet (Ajax) pattern to support long-polling connection of the client
and server.
3. Implement asynchronous request to notify server about any client event.
The interaction model is the next:
1. The user enters the name and clicks “join”
2. The server checks that the participant with such name does not active in a
current web room chat and redirects user to the web room page
3. When the page is loaded the client script set-ups long-polling connection with
the server and subscribes to receive events from other participants through
the server.
4. Web Video Chat Room API calls onParticipantJoined method for each
participant. We should render Mute(Unmute)/Eject controls during participant
list creation.
5. When any participant click Mute/Eject the client script sends asynchronous
request to the server to notify other participants about this event.
6. The server handles this request and sends some information about it through
long-polling connection to other participants.
7. Other participants get this information, process it and set-up a new longpoling connection.
3.5.1 Render Mute/Eject controls
To render Mute/Eject controls we should expand AddParticipant method that is called by
onParticipantJoined method:
function AddParticipant(name)
{
var participantList = document.getElementById('participantList');
//Render participant name
var li = document.createElement('li');
li.setAttribute('name',name);
var txt = document.createTextNode(name + " ");
li.appendChild(txt);
//Render Mute Control
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 9 of 9
var amute = document.createElement('a');
//Check the microphone status of current participant
var ismute = (ParticipantIsMute(name) == "true");
if (ismute)
{
//Set up event handler of Unmute event
amute.onclick= function() { unmute(name); };
amute.innerHTML="Unmute";
}
else
{
//Set up event handler of Mute event
amute.onclick= function() { mute(name); };
amute.innerHTML="Mute";
}
amute.href="#";
li.appendChild(amute);
var spacer = document.createTextNode(" ");
li.appendChild(spacer);
//Render Eject Control
var aEject = document.createElement('a');
//Set up event handler of Eject event
aEject.onclick= function() { eject(name); };
aEject.href="#";
aEject.innerHTML="Eject";
li.appendChild(aEject);
participantList.appendChild(li);
}
As a result we get next view:
3.5.2 Set-up long-polling request (comet/reverse ajax)
To implement comet (Ajax) pattern we should execute next steps:
1. Create event watcher object that will be available for all active long-polling clientserver connections. The best way to implement such watcher is to use event and
delegate objects of .NET lirbrary.
public class WebRoomEventWatcher
{
private static WebRoomEventWatcher _instance;
protected WebRoomEventWatcher(){}
public static WebRoomEventWatcher Instance()
{
if (_instance == null)
{
_instance = new WebRoomEventWatcher();
}
return _instance;
}
public class WebRoomEventArgs : EventArgs
{
private string _userName;
private string _eventType;
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 10 of 10
public WebRoomEventArgs(String name, String type)
{
_userName = name;
_eventType = type;
}
public string UserName
{get { return _userName; }}
public string EventType
{get { return _eventType; }}
}
public delegate void WebRoomEventHandler(Object sender,
WebRoomEventArgs args);
public event WebRoomEventHandler WebRoomEvent;
public virtual void OnWebRoomEvent(WebRoomEventArgs e)
{
if (WebRoomEvent != null)
{
WebRoomEvent(this, e);
}
}
}
We create the class that have a link to the event and this event is the only for this
application (as we user singleton pattern). Any page can subscribe to this event any of
its methods and also any page can generate event (i.e to notify all subscribers about this
event).
2. Create handler that will subscribe to the event watcher, keep connection with the
client and send some information to the client when any event occurs. In ASP.Net
model it can be any *.aspx page.
public partial class Watcher : System.Web.UI.Page
{
private bool _break = false;
WebRoomEventWatcher watcher = WebRoomEventWatcher.Instance();
protected void Page_Load(object sender, EventArgs e)
{
//Set up timout to break long polling connection in case of long
inaction.
DateTime timeout = DateTime.Now.AddMinutes(5);
Response.Buffer = false;
//Subscribe method to handle events from other clients.
watcher.WebRoomEvent += this.HandleWebRoomEvent;
//Check while event occurs or timeout happens.
while (!_break && DateTime.Now < timeout)
{
System.Threading.Thread.Sleep(500);
}
//End long polling request.
Response.Flush();
Response.End();
}
protected void HandleWebRoomEvent(Object sender,
WebRoomEventWatcher.WebRoomEventArgs args)
{
//Unsubscribe to handle events.
watcher.WebRoomEvent -= this.HandleWebRoomEvent;
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 11 of 11
//Send iformation to the client about event.
Response.Write(String.Format("{0}/{1}", args.UserName,
args.EventType));
//Set the flag to break current request.
_break = true;
}
}
3. Create handler that will get any client events and notify about them other clients
through event watcher:
public partial class Notifier : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String type = Request["type"];
String name = Request["name"];
//Get event type from request.
if (!String.IsNullOrEmpty(type) && !String.IsNullOrEmpty(name))
{
switch (type)
{
case "left":
//Case participant has left - set left time in DB.
RoomDao.Instance.UpdateParticipant(name);
break;
case "mute":
case "unmute":
//Case mute/unmute
//notify subscribers about it.
Notify(name, type);
//Save status to DB
RoomDao.Instance.UpdateParticipant(name, type ==
"mute");
break;
default:
//Case eject
//notify subscribers about it.
Notify(name, type);
break;
}
}
}
private void Notify(String name, String type)
{
//Get reference to the event watcher.
WebRoomEventWatcher watcher = WebRoomEventWatcher.Instance();
lock (watcher)
{
//Notify all subscribers about event.
watcher.OnWebRoomEvent(new
WebRoomEventWatcher.WebRoomEventArgs(name, type));
}
}
}
4. Add client script to set up comet request on ooVoo Video Chat Room page:
<!-- include third party js library for asynchronous requests-->
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 12 of 12
<script type="text/javascript" src='/js/prototype.js'></script>
<script type='text/javascript'>
/**
* Comet - class for Reverse AJAX calling
* @type {Object}
*/
var Comet = Class.create();
Comet.prototype = {
url: 'comet.aspx',
noerror: true,
initialize: function() { },
connect: function()
{
var long_polling_url = this.url + '?' + 'rnd=' +
Math.round(Math.random()*10000);
//Create comet request
this.ajax = new Ajax.Request(long_polling_url,
{
method: 'get',
onSuccess: function(response)
{
//Handle comet responce
var responseText = response.responseText;
this.comet.handleResponse(responseText);
this.comet.noerror = true;
},
onComplete: function(response)
{
//Reconnect long polling request in case the previous has ended.
if (!this.comet.noerror){
setTimeout(function(){ comet.connect() }, 5000);
}
else
this.comet.connect();
},
onFailure: function()
{
this.comet.noerror = false;
}
});
this.ajax.comet = this;
},
handleResponse: function(response)
{
if(UpdateData)
{
UpdateData(response);
}
}
}
//Create comet request during first page loading
var comet = new Comet();
comet.connect();
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 13 of 13
</script>
5. Add client script to notify server about current client events:
<script type='text/javascript'>
function mute(name)
{
notify("mute",name);
}
function unmute(name)
{
notify("unmute",name);
}
function eject(name)
{
notify("eject",name);
}
function roomleft(name)
{
notify("left",name);
}
function notify(type, name)
{
var random = Math.round(Math.random()*10000);
new Ajax.Request('notifier.aspx',
{
method: 'get',
parameters: {type: type, name: name, random : random}
});
}
</script>
3.5.3 Handle comet/reverse ajax response from the server.
To handle comet response from the server you should implement JavaScript method that
is called in handleResponse method of Comet class. In our case the method name is
UpdateData.
This method should call some methods of Web Video Chat Room API. It depends in
response information:
function UpdateData(response)
{
//Check if respose contains information.
if (response.length > 0 & response.indexOf("/") != "-1")
{
var separatorIndex = response.lastIndexOf("/");
//Get the name of participant to which event must operate.
var name = response.substring(0, separatorIndex);
//Get the type of event.
var type = response.substring(separatorIndex + 1);
//Verify if event deals with current user.
var currentuser = (name == roomProps.displayName);
var participantList = document.getElementById('participantList');
if (type == "mute" || type == "unmute")
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 14 of 14
{
var divs = participantList.getElementsByTagName('li');
//Finde in the list the participant to which event must
operate.
for (var i=0; i < divs.length; i++)
{
pname = divs[i].getAttribute('name');
if (pname != null && pname == name)
{
//Call mute function for defined participant.
var amute = divs[i].getElementsByTagName('a')[0];
muteRoom(amute, currentuser, type == "mute", name);
}
}
}
//If event is type of "eject"
else
{
//If current participant is target participant
if (currentuser)
{
//call Web Video Chat Room API to eject user
myRoom.endCall();
//clear participants' list
participantList.innerHTML = "";
//notify server that the user has left the room
roomleft(name);
//refresh history list
setTimeout('gethistory()',2000);
}
}
}
}
3.6 Create history list.
To create history list you should:
1. Create method that retrieves from database the list of participant that have not a
nullable left time.
2. Create handler that returns the list of these participants on request:
public partial class History : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Buffer = false;
StringBuilder response = new StringBuilder();
//Get participants that have already left room.
DataTable history = RoomDao.Instance.GetNoActiveParticipants();
//Create html markup for the list of participants
for (int i = 0; i < history.Rows.Count; i++)
{
DataRow item = history.Rows[i];
TimeSpan duration =
DateTime.Parse((item["leftTime"].ToString())) DateTime.Parse((item["joinTime"].ToString()));
String name = item["username"].ToString();
response.Append("<li>");
response.AppendFormat("{0}&nbsp;{1}", name, duration);
response.Append("</li>");
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 15 of 15
}
//Return markup in the responce.
Response.Write(response.ToString());
Response.Flush();
Response.End();
}}
3. Request history list on page loading and each time the participant leaves video chat
room:
<script type='text/javascript'>
function gethistory()
{
var random = Math.round(Math.random()*10000);
new Ajax.Request('history.aspx',
{
method: 'get',
parameters: {random : random},
onSuccess: function(response)
{
UpdateHistory(response.responseText);
}
});
}
function UpdateHistory(data)
{
if (data != null & data != "")
{
var historyList = document.getElementById('historyList');
historyList.innerHTML = data;
}
}
function onParticipantLeft(participantInfo)
{
var name = participantInfo.substr(participantInfo.lastIndexOf(":")+1);
var participantList = document.getElementById('participantList');
var lis = participantList.getElementsByTagName('li');
for (var i=0; i < lis.length; i++){
pname = lis[i].getAttribute('name');
if (pname != null && pname == name){
participantList.removeChild(lis[i]);
break;
}
}
gethistory();
}
</script>
<b>History:</b>
<div id="history">
<ul id="historyList">
<script type="text/javascript">
gethistory();
</script>
</ul>
</div>
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 16 of 16
3.7 Notes
There is the list of some notes in the application you should pay attention to:
1. To handle the event when user leaves video chat room by closing browser you
should process onunload event of body element:
<body onunload="roomleft('<%= CurrentUser %>')">
<script type='text/javascript'>
function roomleft(name)
{
notify("left",name);
}
</script>
2. The application does not handle event when user switch on/off microphone or
leaves chat in ooVoo web video room control.
3. There are always some delay between user action and page response on it
because of comet and asynchronous requests.
ooVoo © 2009
ooVoo Mute-Eject Web Video Chat .NET Sample - Specification
(v.1.0)
Page 17 of 17