Recently Gmail Introduced Video Chat. For a platform, to support the video chat you need to install the flash activex plugin.

You can get the plugin from http://mail.google.com/videochat

But when you click on Install voice and video chat button, Some of you see the page which shows

“The installer should complete in seconds.

 

If you are having trouble with the download, click here. “ 

But some other see a auto installer page which downloads the Setup.exe file and automatically start installation and prompts you to restart the browser.

Who did this installation without any security problem or violation and we saw a different window which shows the progress bar of the installation. This happens only when , if you have google tool bar installed on your browser , or google desktop, or google gears. For those browsers if the above three is not present, the previous message gets result , and which provide the direct link of the GoogleVoiceAndVideoSetup.exe

It is http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe

My Chrome browser does not support automatic installation. Because it is a new guest for my OS and the google additional plugin installation happend before its arrival. So Only Download and manual installation works in that case.

 

Then what the script exectued behind is 

 

window.google.update.oneclick.install (install via click) 

and 

 

location.href =  http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe (install manually )

Note the first bit of script window.google , A new object for google, which is created as the result of any one of the above mentioned google services. My Chrome Browser (Since he is a new member) does not know about the window.google (he knows the default methods like window.location, window.document)

Thats allabout the installation part. 

Now About the Video Chat. Obviously it is a flash based video chat mechanism , but the difference is it uses rtcp and udp protocol for video /audio chatting. Did you check the speed of your video chat ? Amaze  rite ?

 

 

Then lets check about the video chat request.

When you request someone for a video chat, google ajax posts the following data

 

req4_jid c2143377409

req4_json            ["jc","xyz@gmail.com","c2143377409",[["192.168.1.100","3801","video_rtp","dgE9SG8VMVdQFrYo","gyB0pRw5dkoEtq21","1","udp","0","local","0"]]]

req4_type          j

req5_jid c2143377409

req5_json            ["jc","xyz@gmail.com","c2143377409",[["116.68.66.85","3784","rtcp","iqV9/3HhhqkjQ4kp","wMSi7BsiOVNtnbJR","0.9","udp","0","stun","0"]]]

req5_type          j

Here xyz@gmail.com is the person , to whom you are going to chat. It sends the video_rtp protocol parameters. To know more about rtcp and udp go to: http://www.javvin.com/protocolRTCP.html

Here 192.168.1.100 is my local area ip (LAN) and 116.68.66.85 is my internet IP address and the numbers starts in 3000 are the port number for the protocol

In addition to this, google also sends its usual parameters like mouse movement detector (To know the state of a chatter, idle or busy / normal )

It also sends the cpu speed info to google server to know about the video processing time. And your bandwidth and speed of internet is already there in google’s hand (See my post on Gmail Architecture to know about the 1pix speed calculation method of gmail)

 

 

 

count    3

req0_evtype       mousemove

req0_time          263866

req0_type          i

req1_focused     1

req1_type          cf

req2_jid

req2_json          ["mf","mf1.0","1.0.2.0",2,{"caps":7,"cpuSpeed":1664,"cpus":2}]

req2_type          j

 

 

Gmail sends request for every 3 seconds, and if your counterpart accepts the video chat invitation, your chat iframe loads with a flash object tag .

 

<embed id=”flash_yj_c_player2″ wmode=”window” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” seamlesstabbing=”false” allowfullscreen=”true” allowscriptaccess=”sameDomain” bgcolor=”#000000″ flashvars=”dbg=true&ap=player&nm=yj_c_player2&cb=Recv_yj_c_player2&os=windows&plugin=true&” src=”im/media-player.swf?ver=1.1.6″ style=”width: 100%; height: 100%;” name=”yj_c_player2″ quality=”high”/>

And this flash application does the later works.  This flash application communicate with google media server with Real Time Protocol and your video chat happens that way. The flash activex plugin support helps in accessing your webcam and mic.  Good day , have a nice chat … 

Mail Me for more information

Thanks and Regards

Sajith

 

 

 

Tags: architecture, behind, chat, desktop, featured, flash, gear, gmail, google, rtp, toolbar, udp, video, work

Gmail is the best application website i ever seen. Simple implementation, Super Ajax, Cute Chatting, Status Messages, Fast Mail Checking, Live updating and its features are endless as my wordpress database wont withstand

when you type: www.gmail.com, the following action will happen. See it is very interesting.

Script1
It first load the javascript file : https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy

It checks the browser type, os etc

the function navigator.userAgent.toLowerCase() checks with opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2 etc browsers

that is script 1′s job.

Script 2 calculate the round trip time for a 1 pixel image. This is for finding the internet speed of the user

function GetRoundtripTimeFunction(start)
{
return function()
{
var end = (new Date()).getTime();
SetGmailCookie(“GMAIL_RTT”, (end – start));

}
}

Since gmail uses iframes , this script also make sure to load the actual home
top.location = self.location.href

It also set cookie to show which of the google service is using.

Then loads the login form and set focus on password field.

Script 3 handles the https connection and cookie settings for secured login

Yet the web 2.0 concept is on the peak, gmail uses table layout design instad of div style designs

Gmail’s login form ‘s action is pointing to “https://www.google.com/accounts/ServiceLoginAuth?service=mail”

This is the general url for google account login. Here service=mail parameter indicates , this is gmail logging

When the logging verification done, the page is redirected into corresponding service by javascript:

location.replace(“http://www.google.co.in/accounts/SetSID?……etc etc”);

After setting proper session and cookies for login, the non secured site http://mail.google.com/mail page automatically get refresh by this meta tag:
<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/>

When loading the mail page after setting proper login sessions, around 28 ajax web request begin to start, and load all the mails, labels, channels etc

The above mentioned all javascript is also here in this mail loading page

The first division (div) inside the body tag is that for loading. A while text “loading…” with red backgroud.
<div class=”msg”> Loading… </div>

This is the waiting symbol for all the ajax call to load

There is also a timer is working to check the loading time of ajax requests. If it takes more time than expected (or calculated), it show this error “This seems to be taking longer than usual”

Automatically they provide navigation links for basic html version.

The total page of gmail is created by a set of iframes
viz

HIST_IFRAME
SOUND_IFRAME
CANVAS_IFRAME
JS_IFRAME

The Sound_Iframe session loads a flash object (shock wave file) for playing the sound , when chat works. (Google chat indicator)

<embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/>

Gmail saves each sections- labels, inbox, mails etc in array with a unique id. This unique id is for checking the updations on the fly using ajax.

For example : http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox

The above url pics all the data as javascript array format. Check this link after logging in gmail. You can see your labels, your from email accounts, your settings,
your last arrived 70 emails subject and from etc information in javascript array format.

This is the url which is to be called when you click older and newer mail (pagination below)

Gmail always call this url : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1

(leave the parameters value) for checking updatations. This is gmails rpc checking for new updations .

If there is any updation new rpc with post method automatically called to get new data. The calling url is same , the one above
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox

It results new data as javascript array format. The rest of the arrangements are handled by the script from client side.

Whenever you open a mail from inbox, the browser send another request for loading the sponsered links (advtisement) though this rpc
http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox

The CANVAS_IFRAME is the main iframe contains all the layout of gmail

It contains the left side chat, main inbox or mails right side ads, and all the controls

The left side chat is created using table.

JS_IFRAME contains all the javascripts files for gmail full implementation. There are around 89 js files.

When you chat with somebody, the url calling is : http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1

as POST method with parameters:
req2_text <your chat>
req2_to <sender’s email address>
req0_type cf
req1_cmd a
req0_focused 1

Now,

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=531&RID=rpc&SID=48DD6BA8E1D3A326&CI=1&AID=176&TYPE=xmlhttp&zx=m0iiwn-ok5jqr&t=1

the above url return the chat friends and theire status messages

==========================================================

Same url is using for getting the chat messages.

For example when kenney.jacob@gmail chat with me , the message comes as an array like this:

[184,["m","kenney.jacob@gmail.com","730DFDF6F013F640_161","active","hi da","hi da",1206444193169,

,,0,0,0,0,[]

,”square”]

Here active implies the chat is active or not (the window with orange color) and with a chat alert if the window is not active.

http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1

The above url checks whether the chat is enable or not. which returns an array:
["b","chatenabled"]

Gmails file uploading is another interesting thing. I already posted ajax file uploading : http://www.sajithmr.com/upload-files-like-gmail/

I will post more about gmail architecture soon .

Tags: , ajax, architecture, gmail, mail