Mute Eject Dot Net Documentation

8/10/2019 Mute Eject Dot Net Documentation

1/17

OOVOOMUTE-EJECTWEB VIDEO CHAT.NETSAMPLE

Specification

ooVoo 2009


2/17

Version 1.0

ooVoo 2009 ooVoo Mute-Eject Web Video Chat .NET Sample - Specification(v.1.0)

Page 2 of 2


3/17


4/17

1 INTRODUCTION

1.1Scope of the document

This document is intended to give comprehensive description of functional facilities ofooVoo 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.2Targeted Readers

Everyone who wants to embed ooVoo video chat room facilities in his/herapplication.


Page 4 of 4


5/17

2 COMMON APPLICATION FACILITIES

ooVoo Mute-Eject Web Video Chat .NET Sample provides possibilities to create web videoroom 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.1Entrance 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 incurrent video chat.

2.2Participants list

The participants list is built according to the list of current web video chat participants.

The participant info consists of the participants name. Also there are two links next to

name: Mute (Unmute) and Eject. The first link informs if the microphone of thisparticipant is active (inactive) and enables to switch on/off the microphone of thisparticipant. The second link helps to disconnect this participant from the current webvideo chat.

Each time the user leaves of join web video chat the participants list is refreshed.

2.3History list

The history list consists of participants that visited this web video room early. Theparticipant info consists of the participants name and his participation duration.

Each time any participant leaves web video chat the history list is refreshed.


Page 5 of 5


6/17

3 IMPLEMENTATION

ooVoo Mute-Eject Web Video Chat .NET Sample was built using next technologies andlibraries:

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 controlinto web page.

prototype.jslibrary was used to support asynchronous requests to the server.

MS SQL was used to store participants info.

ooVoo Mute-Eject Web Video Chat .NET Sample implementation contains next steps:

Create database and table to store participants 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 (reverseajax) pattern.

Build history list asynchronously using stored information in database and ooVooWeb Video Chat Room API events.

3.1Create 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 ofdefined participant, to check if participant with such name already active in current videochat.

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)


Page 6 of 6
http://www.prototypejs.org/http://www.prototypejs.org/


7/17

3.2Create 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 havegetter property for current participant name.

2)

It is necessary to check that user with such name does not active in a current videochat.

When the participant enter his/her name and click join the server code must executenext steps:

1) Check in database that participant with such name does not active in currentvideo chat.

To check this case you should retrieve from database all participants with suchname and without left time (the left time must be null). If this list does not emptyask the participant to take another name.

2) If the participant with such name does not active in current conference you shouldsave his/her info in database.

3) Redirect to (or make visible) the form with ooVoo Web Video Chat Room control.

3.3Embed 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 andinsert in your web page.


Page 7 of 7
https://secure.oovoo.com/Signin.aspx?ReturnUrl=%2fdefault.aspxhttps://secure.oovoo.com/oovooRooms/Rooms.aspx?roomid=-1https://secure.oovoo.com/oovooRooms/Rooms.aspx?roomid=-1https://secure.oovoo.com/oovooRooms/Rooms.aspx?roomid=-1https://secure.oovoo.com/Signin.aspx?ReturnUrl=%2fdefault.aspx


8/17

r oomPr ops. r oomI D = ' 61F68809BB973D17E04400244F7E8E22' ;

r oomPr ops. wi dt h = ' 536' ;r oomProps. hei ght = ' 445' ;r oomPr ops. backgr oundCol or = ' #666666' ;r oomProps. capt i onCol or = ' #FFFFFF' ;r oomProps. capt i onText = ' Ent er your capt i on her e' ;var myRoom=Creat eRoom( ) ;

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.

r oomPr ops. r oomI D = ' 61F08807BB973D17E04400144F7E8E22' ;r oomPr ops. wi dt h = ' 795' ;r oomProps. hei ght = ' 640' ;r oomPr ops. backgr oundCol or = ' #666666' ;r oomProps. capt i onCol or = ' #FFFFFF' ;r oomProps. capt i onText = ' ASP. NET ooVoo Web Room Sampl e' ;r oomPr ops. di spl ayName = "";var myRoom=Creat eRoom( ) ;

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.4Build participants list

To build participants list you should:

1. Handle onParticipantJoined and onParticipantLeft events of Web Video

Chat Room API in JavaScript.f uncti on AddPar t i ci pant ( name)

{var par t i ci pant Li st = document . getEl ement ByI d( ' part i ci pantL i s t ' ) ;var l i = document . cr eat eEl ement ( ' l i ' ) ;l i . setAt t r i bute( ' name' , name) ;var t xt = document . cr eat eTextNode( name) ;l i . appendChi l d( t xt ) ;par t i ci pant Li st . appendChi l d( l i ) ;

}

f uncti on onPar t i ci pant J oi ned( par t i ci pant I nf o){

var name = Get Par t i ci pant NameFromI nf o(par t i ci pant I nf o) ;i f ( name ! = "") {

AddPar t i ci pant ( name) ;} el se {

return f al se;}

}


Page 8 of 8
http://oovoo.com/Developers/WebAPI.aspxhttp://oovoo.com/Developers/WebAPI.aspx


9/17

f uncti on onPar t i ci pant Lef t ( par t i ci pant I nf o){

var name = par t i ci pant I nf o. subst r ( par t i ci pant I nf o. l ast I ndexOf ( " : " ) +1) ;

var par t i ci pant Li st = document . get El ement ByI d( ' part i ci pant Li s t ' ) ;var l i s = part i ci pant Li st . getEl ement sByTagName( ' l i ' ) ;

f or ( var i =0; i < l i s. l engt h; i ++) {pname = l i s[ i ] . get At t r i but e( ' name' ) ;i f ( pname ! = nul l && pname == name) {

part i c i pant Li st . r emoveChi l d( l i s [ i ] ) ;break;

}}

}

3.5Implement 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 acurrent 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 throughthe server.

4. Web Video Chat Room API calls onPar t i ci pant J oi ned method for each

participant. We should render Mute(Unmute)/Eject controls during participantlist 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 throughlong-polling connection to other participants.

7. Other participants get this information, process it and set-up a new long-poling connection.

3.5.1 Render Mute/Eject controls

To render Mute/Eject controls we should expand AddParticipant method that is called by

onParticipantJoined method:f uncti on AddPar t i ci pant ( name){

var par t i ci pant Li st = document . getEl ement ByI d( ' part i ci pant Li s t ' ) ;/ / Render part i ci pant namevar l i = document . cr eat eEl ement ( ' l i ' ) ;l i . setAt t r i bute( ' name' , name) ;var t xt = document . cr eat eText Node(name + " " ) ;l i . appendChi l d( t xt ) ;

/ / Render Mut e Cont r ol


Page 9 of 9


10/17

var amut e = document . cr eat eEl ement ( ' a' ) ;

/ / Check the mi cr ophone st at us of cur r ent par t i ci pantvar i smute = ( Par t i ci pant I sMute( name) == "true" ) ;i f ( i smut e){

/ / Set up event handl er of Unmut e eventamute. oncl i ck= f uncti on( ) { unmute( name) ; };amut e. i nner HTML="Unmut e" ;

}el se{

/ / Set up event handl er of Mut e eventamute. oncl i ck= f uncti on( ) { mut e(name) ; };amut e. i nner HTML="Mut e";

}amut e. href ="#";l i . appendChi l d( amut e) ;

var spacer = document . cr eat eText Node( " " ) ;l i . appendChi l d( spacer ) ;

/ / Render Ej ect Cont r olvar aEj ect = document . cr eat eEl ement ( ' a' ) ;/ / Set up event handl er of Ej ect eventaEj ect . oncl i ck= f uncti on( ) { ej ect ( name) ; };aEj ect. hr ef ="#" ;aEj ect . i nnerHTML="Ej ect" ;l i . appendChi l d( aEj ect) ;part i ci pant Li st . appendChi l d( l i ) ;

}

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 client-server connections. The best way to implement such watcher is to use event anddelegate objects of .NET lirbrary.

publ i c cl ass WebRoomEvent Wat cher{

pr i vat e st at i c WebRoomEvent Wat cher _i nst ance;pr ot ect ed WebRoomEvent Wat cher ( ) {}publ i c st at i c WebRoomEvent Wat cher I nst ance( ){

i f ( _i nst ance == nul l ){

_i nst ance = new WebRoomEvent Wat cher ( ) ;}return _i nst ance;

}publ i c cl ass WebRoomEvent Args : Event Ar gs

{pr i vat e st r i ng _user Name;pr i vat e st r i ng _eventType;


Page 10 of 10


11/17

publ i c WebRoomEvent Args( St r i ng name, St r i ng t ype){

_user Name = name;_eventType = t ype;

}publ i c st r i ng User Name

{get { return _user Name; }}

publ i c st r i ng Event Type{get { return _event Type; }}

}publ i c del egate voi d WebRoomEvent Handl er ( Obj ect sender ,

WebRoomEvent Args ar gs);publ i c event WebRoomEvent Handl er WebRoomEvent ;publ i c vi rt ual voi d OnWebRoomEvent ( WebRoomEvent Args e){

i f ( WebRoomEvent ! = nul l ){

WebRoomEvent ( t hi s, e ) ;

}}

}

We create the class that have a link to the event and this event is the only for thisapplication (as we user singleton pattern). Any page can subscribe to this event any ofits 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 theclient and send some information to the client when any event occurs. In ASP.Netmodel it can be any *.aspx page.

publ i c par t i al cl ass Wat cher : Syst em. Web. UI . Page{

pr i vat e bool _break = f al se;WebRoomEvent Wat cher wat cher = WebRoomEvent Wat cher . I nstance( ) ;pr ot ect ed voi d Page_Load( obj ect sender , Event Ar gs e){

/ / Set up t i mout t o br eak l ong pol l i ng connect i on i n case of l ongi nact i on.

Dat eTi me t i meout = Dat eTi me. Now. AddMi nut es( 5) ;Response. Buf f er = f al se;/ / Subscr i be met hod t o handl e event s f r om other cl i ent s.wat cher . WebRoomEvent += t hi s. Handl eWebRoomEvent ;/ / Check whi l e event occur s or t i meout happens.whi l e ( ! _break && Dat eTi me. Now < t i meout ){

Syst em. Thr eadi ng.Thread. Sl eep( 500) ;}/ / End l ong pol l i ng r equest .Response. Fl ush( ) ;Response. End( ) ;

}

pr ot ect ed voi d Handl eWebRoomEvent ( Obj ect sender ,WebRoomEvent Wat cher . WebRoomEvent Args args)

{

/ / Unsubscr i be to handl e event s.wat cher . WebRoomEvent - = t hi s. Handl eWebRoomEvent ;


Page 11 of 11


12/17

/ / Send i f or mat i on t o the cl i ent about event .Response. Wr i t e(St r i ng. Format( "{0}/ {1}", args. UserName,

ar gs. Event Type) ) ;/ / Set t he f l ag t o br eak cur r ent r equest .

_break = true;}

}

3. Create handler that will get any client events and notify about them other clientsthrough event watcher:

publ i c par t i al cl ass Not i f i er : Syst em. Web. UI . Page{

pr ot ect ed voi d Page_Load( obj ect sender , Event Ar gs e){

Str i ng t ype = Request [ " t ype" ] ;St r i ng name = Request [ "name" ] ;/ / Get event t ype f r om r equest .i f ( ! St r i ng. I sNul l Or Empt y( t ype) && ! St r i ng. I sNul l Or Empt y( name)){

swi t ch (type){

case " l ef t " :/ / Case par t i ci pant has l ef t - set l ef t t i me i n DB.RoomDao. I nst ance. Updat ePar t i ci pant ( name) ;break;

case "mut e" :case "unmut e" :

/ / Case mut e/ unmut e/ / not i f y subscr i ber s about i t .Noti f y(name, t ype) ;/ / Save st atus t o DB

RoomDao. I nst ance. UpdatePart i ci pant ( name, t ype =="mut e") ;

break;def aul t :

/ / Case ej ect/ / not i f y subscr i ber s about i t .Noti f y(name, t ype) ;break;

}}

}

pr i vat e voi d Not i f y( St r i ng name, St r i ng t ype)

{/ / Get r ef er ence to t he event wat cher .WebRoomEvent Wat cher wat cher = WebRoomEvent Wat cher . I nstance( ) ;l ock ( wat cher ){

/ / Not i f y al l subscr i ber s about event .wat cher . OnWebRoomEvent ( new

WebRoomEvent Wat cher . WebRoomEvent Args( name, t ype) ) ;}

}

}

4.

Add client script to set up comet request on ooVoo Video Chat Room page:


Page 12 of 12


13/17

/ *** Comet - cl ass f or Rever se AJ AX cal l i ng* @t ype {Obj ect }*/

var Comet = Cl ass. cr eate( ) ;Comet . prot ot ype = {

ur l : ' comet . aspx' ,noer r or : t rue,

i ni t i al i ze: f uncti on( ) { },

connect : f uncti on( ){

var l ong_pol l i ng_ur l = t hi s. ur l + ' ?' + ' r nd=' +Math. r ound( Math. r andom( ) *10000) ;

/ / Cr eat e comet r equest

t hi s. aj ax = new Aj ax. Request ( l ong_pol l i ng_ur l ,{

met hod: ' get ' ,onSuccess: f uncti on( r esponse){

/ / Handl e comet r esponcevar r esponseText = r esponse. r esponseText ;t hi s. comet . handl eResponse( r esponseText ) ;t hi s. comet . noer r or = true;

},onCompl et e: f uncti on( r esponse){

/ / Reconnect l ong pol l i ng r equest i n case t he pr evi ous has ended.

i f ( ! t hi s. comet . noer r or) {set Ti meout ( f uncti on( ) { comet . connect ( ) }, 5000) ;

}el se

t hi s. comet . connect ( ) ;},onFai l ur e: f uncti on( ){

t hi s. comet . noer r or = f al se;}

}) ;t hi s. aj ax. comet = t hi s;

},

handl eResponse: f uncti on( r esponse){

i f( Updat eDat a){

Updat eData( r esponse) ;}

}

}

/ / Cr eat e comet r equest dur i ng f i r st page l oadi ngvar comet = new Comet ( ) ;comet . connect ( ) ;


Page 13 of 13


14/17

5.

Add client script to notify server about current client events:

f uncti on mut e( name){

not i f y( "mut e" , name) ;}

f uncti on unmut e( name){not i f y( "unmut e" , name) ;}

f uncti on ej ect ( name){not i f y( "ej ect " , name) ;}

f uncti on r ooml ef t ( name){not i f y( " l ef t " , name) ;}

f uncti on noti f y( t ype, name){

var r andom = Mat h. r ound( Mat h. r andom( ) *10000) ;new Aj ax. Request ( ' not i f i er . aspx' ,{

met hod: ' get ' ,par amet ers: {type: t ype, name: name, r andom : r andom}

}) ;

}

3.5.3 Handle comet/reverse ajax response from the server.

To handle comet response from the server you should implement JavaScript method thatis called in handleResponsemethod 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 inresponse information:

f uncti on Updat eDat a( r esponse)

{/ / Check i f r espose cont ai ns i nf or mat i on.i f ( r esponse. l engt h > 0 & r esponse. i ndexOf ( " / " ) ! = "-1"){

var separ at orI ndex = r esponse. l ast I ndexOf ( " / " ) ;/ / Get t he name of part i ci pant t o whi ch event must operat e.var name = r esponse. subst r i ng( 0, separ at or I ndex) ;/ / Get t he type of event .var t ype = r esponse. subst r i ng( separ ator I ndex + 1) ;/ / Ver i f y i f event deal s wi t h cur r ent user .var cur r ent user = ( name == r oomPr ops. di spl ayName) ;

var par t i ci pant Li st = document . getEl ement ByI d( ' part i ci pantL i s t ' ) ;

i f ( t ype == "mut e" | | t ype == "unmut e" )


Page 14 of 14


15/17

{var di vs = par t i ci pant Li st . getEl ement sByTagName( ' l i ' ) ;/ / Fi nde i n t he l i st t he par t i ci pant t o whi ch event must

oper at e.f or ( var i =0; i < di vs. l engt h; i ++){

pname = di vs[ i ] . get At t r i but e( ' name' ) ;i f ( pname ! = nul l && pname == name){

/ / Cal l mut e f uncti on f or def i ned par t i ci pant .var amut e = di vs[ i ] . get El ement sByTagName( ' a' ) [ 0 ] ;mut eRoom( amut e, cur r ent user , t ype == "mut e" , name) ;

}}

}/ / I f event i s type of "ej ect"el se{

/ / I f curr ent par t i ci pant i s tar get par t i ci pant

i f ( cur r ent user ){/ / cal l Web Vi deo Chat RoomAPI t o ej ect usermyRoom. endCal l ( ) ;/ / cl ear par t i ci pants ' l i s tpar t i ci pant Li st . i nner HTML = "" ;/ / not i f y ser ver t hat t he user has l ef t t he r oom

r ooml ef t ( name) ;/ / ref resh hi story l i s tset Ti meout ( ' gethi s tory( ) ' , 2000) ;

}}

}}

3.6Create history list.

To create history list you should:

1. Create method that retrieves from database the list of participant that have not anullable left time.

2. Create handler that returns the list of these participants on request:publ i c par t i al cl ass Hi story : Syst em. Web. UI . Page{

pr ot ect ed voi d Page_Load( obj ect sender , Event Ar gs e)

{Response. Buf f er = f al se;St r i ngBui l der r esponse = new St r i ngBui l der ( ) ;/ / Get par t i ci pant s t hat have al r eady l ef t r oom.Dat aTabl e hi st or y = RoomDao. I nst ance. Get NoActi vePar t i ci pant s( ) ;/ / Cr eat e ht ml mar kup f or t he l i st of par t i ci pant sf or ( i nt i = 0; i < hi st ory. Rows. Count ; i ++){

Dat aRow i t em = hi story. Rows[i ] ;Ti meSpan dur at i on =

Dat eTi me. Par se( ( i t em[ "l ef t Ti me"] . ToSt r i ng( ) ) ) -Dat eTi me. Par se( ( i t em[ "j oi nTi me"] . ToSt r i ng( ) ) ) ;

St r i ng name = i t em[ "user name"] . ToSt r i ng( ) ;

r esponse. Append( "" ) ;r esponse. AppendFormat ( "{0} {1}" , name, dur at i on) ;r esponse. Append( "" ) ;


Page 15 of 15


16/17

}/ / Ret ur n markup i n t he responce.Response. Wr i t e( r esponse. ToSt r i ng( ) ) ;Response. Fl ush( ) ;Response. End( ) ;

}}

3.

Request history list on page loading and each time the participant leaves video chatroom:

f uncti on get hi story(){

var r andom = Mat h. r ound( Mat h. r andom( ) *10000) ;new Aj ax. Request ( ' hi story. aspx' ,{

met hod: ' get ' ,par ameters: {r andom : r andom},onSuccess: f uncti on( r esponse){

Updat eHi st ory( r esponse. r esponseText ) ;}

}) ;

}f uncti on Updat eHi st or y(dat a){

i f ( dat a != nul l & dat a ! = ""){

var hi st oryLi st = document . getEl ement ByI d( ' hi s toryLi st ' ) ;hi st oryLi st . i nner HTML = dat a;

}

}

f uncti on onPar t i ci pant Lef t ( par t i ci pant I nf o){

var name = par t i ci pant I nf o. subst r ( par t i ci pant I nf o. l ast I ndexOf ( " : " ) +1) ;

var par t i ci pant Li st = document . get El ement ByI d( ' part i ci pant Li s t ' ) ;var l i s = part i ci pant Li st . getEl ement sByTagName( ' l i ' ) ;f or ( var i =0; i < l i s. l engt h; i ++) {

pname = l i s[ i ] . get At t r i but e( ' name' ) ;i f ( pname ! = nul l && pname == name) {

part i c i pant Li st . r emoveChi l d( l i s [ i ] ) ;break;

}}

get hi story() ;}

Hi st or y:

get hi stor y( ) ;


Page 16 of 16


17/17

ooVoo 2009 ooVoo Mute-Eject Web Video Chat .NET Sample - Specification(v 1 0)

Page 17 of 17

3.7Notes

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 onunl oad event of body element:

f uncti on r ooml ef t ( name)

{

not i f y( " l ef t " , name) ;

}

2. The application does not handle event when user switch on/off microphone orleaves chat in ooVoo web video room control.

3.

There are always some delay between user action and page response on itbecause of comet and asynchronous requests.

Mute Eject Dot Net Documentation

Documents

Transcript of Mute Eject Dot Net Documentation