<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Programming Ideas, Logics, Tips and Tricks &#187; architecture</title>
	<atom:link href="http://www.sajithmr.me/tag/architecture/feed" rel="self" type="application/rss+xml" />
	<link>http://www.sajithmr.me</link>
	<description></description>
	<lastBuildDate>Mon, 23 Jan 2012 15:44:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>How Gmail Video Chat Works ?</title>
		<link>http://www.sajithmr.me/how-gmail-video-chat-works</link>
		<comments>http://www.sajithmr.me/how-gmail-video-chat-works#comments</comments>
		<pubDate>Tue, 18 Nov 2008 10:16:29 +0000</pubDate>
		<dc:creator>Mr Me</dc:creator>
				<category><![CDATA[webworld]]></category>
		<category><![CDATA[architecture]]></category>
		<category><![CDATA[behind]]></category>
		<category><![CDATA[chat]]></category>
		<category><![CDATA[desktop]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[gear]]></category>
		<category><![CDATA[gmail]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[rtp]]></category>
		<category><![CDATA[toolbar]]></category>
		<category><![CDATA[udp]]></category>
		<category><![CDATA[video]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://www.sajithmr.com/?p=368</guid>
		<description><![CDATA[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 &#8220;The installer should complete in seconds.   If you [...]]]></description>
			<content:encoded><![CDATA[<p>Recently Gmail Introduced Video Chat. For a platform, to support the video chat you need to install the flash activex plugin.</p>
<p>You can get the plugin from http://mail.google.com/videochat</p>
<p>But when you click on Install voice and video chat button, Some of you see the page which shows</p>
<p><strong><em>&#8220;The installer should complete in seconds.</em></strong></p>
<p><em> </em></p>
<p> </p>
<p><strong><em>If you are having trouble with the download, click here. &#8220; </em></strong></p>
<p>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.</p>
<p><a href="http://www.sajithmr.com/wp-content/uploads/2008/11/downloading-the-chat.jpg"><img class="alignnone size-full wp-image-369" title="downloading-the-chat" src="http://www.sajithmr.com/wp-content/uploads/2008/11/downloading-the-chat.jpg" alt="" width="500" height="346" /></a></p>
<p>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<strong> google tool bar</strong> installed on your browser , or <strong>google desktop</strong>, or<strong> google gears</strong>. 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</p>
<p>It is<a href="http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe" target="_blank"> http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe</a></p>
<p>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.</p>
<p> </p>
<p>Then what the script exectued behind is </p>
<p> </p>
<p class="MsoNormal"><span><strong><span style="color: #ff6600;">window.google.update.oneclick.install (install via click) </span></strong></span></p>
<p class="MsoNormal">and </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"><span><strong><span style="color: #ff6600;">location.href =</span></strong><span><strong><span style="color: #ff6600;">  </span></strong></span><strong><span style="color: #ff6600;">http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe</span></strong> (install manually )</span></p>
<p class="MsoNormal">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)</p>
<p class="MsoNormal">Thats allabout the installation part. </p>
<p class="MsoNormal">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 ?</p>
<p> </p>
<p> </p>
<p>Then lets check about the video chat request.</p>
<p>When you request someone for a video chat, google ajax posts the following data</p>
<p> </p>
<p class="MsoNormal"><span><span style="color: #3366ff;">req4_jid</span><span><span style="color: #3366ff;"> </span></span><span style="color: #3366ff;">c2143377409</span><span style="color: #3366ff;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #3366ff;">req4_json</span><span><span style="color: #3366ff;">            </span></span><span style="color: #3366ff;">["jc","xyz@gmail.com","c2143377409",[["192.168.1.100","3801","video_rtp","dgE9SG8VMVdQFrYo","gyB0pRw5dkoEtq21","1","udp","0","local","0"]]]</span><span style="color: #3366ff;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #3366ff;">req4_type</span><span><span style="color: #3366ff;">          </span></span><span style="color: #3366ff;">j</span><span style="color: #3366ff;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #3366ff;">req5_jid</span><span><span style="color: #3366ff;"> </span></span><span style="color: #3366ff;">c2143377409</span><span style="color: #3366ff;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #3366ff;">req5_json</span><span><span style="color: #3366ff;">            </span></span><span style="color: #3366ff;">["jc","xyz@gmail.com","c2143377409",[["116.68.66.85","3784","rtcp","iqV9/3HhhqkjQ4kp","wMSi7BsiOVNtnbJR","0.9","udp","0","stun","0"]]]</span><span style="color: #3366ff;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #3366ff;">req5_type</span><span><span style="color: #3366ff;">          </span></span><span style="color: #3366ff;">j</span></span></p>
<p class="MsoNormal"><a href="http://www.sajithmr.com/wp-content/uploads/2008/11/chatstarts.jpg"><img class="alignnone size-full wp-image-370" title="chatstarts" src="http://www.sajithmr.com/wp-content/uploads/2008/11/chatstarts.jpg" alt="" width="230" height="374" /></a></p>
<p class="MsoNormal">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: <a href="http://www.javvin.com/protocolRTCP.html" target="_blank">http://www.javvin.com/protocolRTCP.html</a></p>
<p class="MsoNormal"><span>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</span></p>
<p class="MsoNormal">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 )</p>
<p class="MsoNormal">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&#8217;s hand (See my post on <a href="http://www.sajithmr.com/gmail-architecture/" target="_blank">Gmail Architecture</a> to know about the 1pix speed calculation method of gmail)</p>
<p> </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"><span><span style="color: #008080;">count</span><span><span style="color: #008080;">    </span></span><span style="color: #008080;">3</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req0_evtype</span><span><span style="color: #008080;">       </span></span><span style="color: #008080;">mousemove</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req0_time</span><span><span style="color: #008080;">          </span></span><span style="color: #008080;">263866</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req0_type</span><span><span style="color: #008080;">          </span></span><span style="color: #008080;">i</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req1_focused</span><span><span style="color: #008080;">     </span></span><span style="color: #008080;">1</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req1_type</span><span><span style="color: #008080;">          </span></span><span style="color: #008080;">cf</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req2_jid</span><span><span style="color: #008080;"> </span></span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req2_json</span><span><span style="color: #008080;">          </span></span><span style="color: #008080;">["mf","mf1.0","1.0.2.0",2,{"caps":7,"cpuSpeed":1664,"cpus":2}]</span><span style="color: #008080;"></span></span></p>
<p class="MsoNormal"><span><span style="color: #008080;">req2_type</span><span><span style="color: #008080;">          </span></span><span style="color: #008080;">j</span></span></p>
<p> </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal">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 .</p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"><span><span style="color: #800080;">&lt;embed id=&#8221;flash_yj_c_player2&#8243; wmode=&#8221;window&#8221; pluginspage=&#8221;http://www.macromedia.com/go/getflashplayer&#8221; type=&#8221;application/x-shockwave-flash&#8221; seamlesstabbing=&#8221;false&#8221; allowfullscreen=&#8221;true&#8221; allowscriptaccess=&#8221;sameDomain&#8221; bgcolor=&#8221;#000000&#8243; flashvars=&#8221;dbg=true&amp;ap=player&amp;nm=yj_c_player2&amp;cb=Recv_yj_c_player2&amp;os=windows&amp;plugin=true&amp;&#8221; src=&#8221;im/media-player.swf?ver=1.1.6&#8243; style=&#8221;width: 100%; height: 100%;&#8221; name=&#8221;yj_c_player2&#8243; quality=&#8221;high&#8221;/&gt;</span></span></p>
<p class="MsoNormal"><a href="http://www.sajithmr.com/wp-content/uploads/2008/11/fullchat.jpg"><img class="alignnone size-full wp-image-371" title="fullchat" src="http://www.sajithmr.com/wp-content/uploads/2008/11/fullchat.jpg" alt="" width="434" height="566" /></a></p>
<p class="MsoNormal">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 &#8230; </p>
<p class="MsoNormal">Mail Me for more information</p>
<p class="MsoNormal">Thanks and Regards</p>
<p class="MsoNormal">Sajith</p>
<p> </p>
<p class="MsoNormal"> </p>
<p class="MsoNormal"> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.sajithmr.me/how-gmail-video-chat-works/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Gmail Architecture</title>
		<link>http://www.sajithmr.me/gmail-architecture</link>
		<comments>http://www.sajithmr.me/gmail-architecture#comments</comments>
		<pubDate>Tue, 25 Mar 2008 19:53:31 +0000</pubDate>
		<dc:creator>Mr Me</dc:creator>
				<category><![CDATA[html]]></category>
		<category><![CDATA[webworld]]></category>
		<category><![CDATA[]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[architecture]]></category>
		<category><![CDATA[gmail]]></category>
		<category><![CDATA[mail]]></category>

		<guid isPermaLink="false">http://www.sajithmr.com/gmail-architecture/</guid>
		<description><![CDATA[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 : [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.sajithmr.com/wp-content/uploads/2008/03/gmail-logo1.jpg" alt="Gmail Logo" /><br />
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</p>
<p>when you type: www.gmail.com, the following action will happen. See it is very interesting.</p>
<p>Script1<br />
<u>It first load the javascript file : https://mail.google.com/mail?view=page&amp;name=browser&amp;ver=1k96igf4806cy</u></p>
<p>It checks the browser type, os etc</p>
<p>the function <strong>navigator.userAgent.toLowerCase()</strong> checks with <font color="#008000">opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2</font>  etc browsers</p>
<p>that is script 1&#8242;s job.</p>
<p><u>Script 2 calculate the round trip time for a 1 pixel image.</u> This is for finding the internet speed of the user</p>
<p><font color="#008000"><strong>function</strong></font> GetRoundtripTimeFunction(start)<br />
{<br />
<strong><font color="#008000"> return </font></strong><font color="#008000"><font color="#000000">f</font></font>unction()<br />
{<br />
<font color="#008000"><strong>var </strong></font>end = (new Date()).getTime();<br />
SetGmailCookie(&#8220;GMAIL_RTT&#8221;, (end &#8211; start));</p>
<p>}<br />
}</p>
<p><u>Since gmail uses iframes , this script also make sure to load the actual home</u><br />
<strong><font color="#008080">top.location = self.location.href</font></strong></p>
<p><strong>I</strong>t also set cookie to show which of the google service is using.</p>
<p><strong>T</strong>hen loads the login form and set focus on password field.</p>
<p><img src="http://www.sajithmr.com/wp-content/uploads/2008/03/gmail-login.jpg" alt="Gmail Login" /></p>
<p><u>Script 3 handles the https connection and cookie settings for secured login</u></p>
<p><em>Yet the web 2.0 concept is on the peak, gmail uses table layout design instad of div style designs <img src='http://www.sajithmr.me/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </em></p>
<p>Gmail&#8217;s login form &#8216;s action is pointing to <font color="#ff6600">&#8220;https://www.google.com/accounts/ServiceLoginAuth?service=mail&#8221;</font></p>
<p>This is the general url for google account login. Here <strong>service=mail</strong> parameter indicates , this is gmail logging</p>
<p>When the logging verification done, the page is redirected into corresponding service by javascript:</p>
<p><font color="#0000ff">location.replace(&#8220;http://www.google.co.in/accounts/SetSID?&#8230;&#8230;etc etc&#8221;);</font></p>
<p>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:<br />
<font color="#339966"> &lt;meta content=&#8221;0;URL=http://mail.google.com/mail/&#8221; http-equiv=&#8221;Refresh&#8221;/&gt;</font></p>
<p>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</p>
<p>The above mentioned all javascript  is also here in this mail loading page</p>
<p>The first division (div) inside the body tag is that for loading. A while text &#8220;loading&#8230;&#8221; with red backgroud.<br />
<strong> &lt;div class=&#8221;msg&#8221;&gt; <font color="#000000">Loading… </font>&lt;/div&gt;</strong></p>
<p>This is the waiting symbol for all the ajax call to load</p>
<p><img src="http://www.sajithmr.com/wp-content/uploads/2008/03/loading.jpg" alt="Loading" /></p>
<p>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 <em>&#8220;This seems to be taking longer than usual&#8221;</em></p>
<p>Automatically they provide navigation links for basic html version.</p>
<p>The total page of gmail is created by a set of iframes<br />
viz</p>
<p>HIST_IFRAME<br />
SOUND_IFRAME<br />
CANVAS_IFRAME<br />
JS_IFRAME</p>
<p>The Sound_Iframe session loads a flash object (shock wave file) for playing the sound , when chat works. (Google chat indicator)</p>
<p><img src="http://www.sajithmr.com/wp-content/uploads/2008/03/chatwindow.jpg" alt="Chat window" /></p>
<p><strong><font color="#339966">&lt;embed id=&#8221;flash_object&#8221; type=&#8221;application/x-shockwave-flash&#8221; pluginspage=&#8221;http://www.macromedia.com/go/getflashplayer&#8221; quality=&#8221;high&#8221; style=&#8221;position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;&#8221; src=&#8221;im/sound.swf&#8221;/&gt;</font></strong></p>
<p>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.</p>
<p>For example : <font color="#0000ff">http://mail.google.com/mail/?ui=2&amp;ik=42e598c952&amp;view=tl&amp;start=50&amp;num=70&amp;auto=1&amp;ari=120&amp;rt=j&amp;search=inbox</font></p>
<p>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,<br />
your last arrived 70 emails subject and from etc information in javascript array format.</p>
<p>This is the url which is to be called when you click older and newer mail (pagination below)</p>
<p>Gmail always call this url : <font color="#0000ff">http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&amp;VER=6&amp;it=93079&amp;SID=584B451AB93DBDC&amp;RID=16351&amp;zx=lniy7w-6psisw&amp;t=1</font></p>
<p>(leave the parameters value) for checking updatations. This is gmails rpc checking for new updations .</p>
<p>If there is any updation new rpc with post method automatically called to get new data. The calling url is same , the one above<br />
<font color="#0000ff"> http://mail.google.com/mail/?ui=2&amp;ik=42e598c952&amp;view=tl&amp;start=0&amp;num=70&amp;auto=1&amp;ari=120&amp;rt=j&amp;search=inbox</font></p>
<p>It results new data as javascript array format. The rest of the arrangements are handled by the script from client side.</p>
<p>Whenever you open a mail from inbox, the browser send another request for loading the sponsered links (advtisement) though this rpc<br />
<font color="#0000ff"> http://mail.google.com/mail/?ui=2&amp;ik=42e598c952&amp;view=ad&amp;th=118e57dc03d67f16&amp;search=inbox</font></p>
<p>The <strong>CANVAS_IFRAME</strong> is the main iframe contains all the layout of gmail</p>
<p>It contains the left side chat, main inbox or mails right side ads, and all the controls</p>
<p>The left side chat is created using table.</p>
<p>JS_IFRAME contains all the javascripts files for gmail full implementation. There are around <strong>89</strong> js files.</p>
<p><img src="http://www.sajithmr.com/wp-content/uploads/2008/03/chat.jpg" alt="Chat" /></p>
<p>When you chat with somebody, the url calling is : <font color="#0000ff">http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&amp;VER=6&amp;it=891&amp;SID=7D4E9A779225DC1&amp;RID=50595&amp;zx=hrsqkf-nwummu&amp;t=1</font></p>
<p>as POST method with parameters:<br />
<strong><font color="#808080"> req2_text    &lt;your chat&gt;<br />
req2_to    &lt;sender&#8217;s email address&gt;<br />
req0_type    cf<br />
req1_cmd    a<br />
req0_focused    1</font></strong></p>
<p>Now,</p>
<p><font color="#0000ff">http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&amp;VER=6&amp;it=531&amp;RID=rpc&amp;SID=48DD6BA8E1D3A326&amp;CI=1&amp;AID=176&amp;TYPE=xmlhttp&amp;zx=m0iiwn-ok5jqr&amp;t=1</font></p>
<p>the above url return the chat friends and theire status messages</p>
<p>==========================================================</p>
<p>Same url is using for getting the chat messages.</p>
<p>For example when kenney.jacob@gmail chat with me , the message comes as an array like this:</p>
<p>[184,["m","kenney.jacob@gmail.com","730DFDF6F013F640_161","active","hi da","hi da",1206444193169,</p>
<p>,,0,0,0,0,[]</p>
<p>,&#8221;square&#8221;]</p>
<p><img src="http://www.sajithmr.com/wp-content/uploads/2008/03/foster-says.jpg" alt="Foster says" /></p>
<p>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.</p>
<p><font color="#0000ff">http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&amp;VER=6&amp;it=24343&amp;MODE=init&amp;zx=1vyx51-ze670&amp;t=1</font></p>
<p>The above url checks whether the chat is enable or not. which returns an array:<br />
<strong> ["b","chatenabled"]</strong></p>
<p>Gmails file uploading is another interesting thing. I already posted ajax file uploading :  <a href="http://www.sajithmr.com/upload-files-like-gmail/" title="Upload Files Like Gmail" target="_blank">http://www.sajithmr.com/upload-files-like-gmail/</a></p>
<p>I will post more about gmail architecture soon .</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sajithmr.me/gmail-architecture/feed</wfw:commentRss>
		<slash:comments>33</slash:comments>
		</item>
	</channel>
</rss>

