Peer Connection Tutorial – Part1

Wow! I’ve had a huge break from blogging for a while now especially about WebRTC. I’m sure you all have been tracking how much WebRTC has been evolving over the past few months. The most recent and exciting news which you have got to know is the interop between Chrome and Mozilla has landed and it is undeniably super cool. You could check out the demo by following up this link. So, without any further delay let me start with the peer connection tutorial which I am sure is a component everyone is dying to try.

I have realized that a peer connection tutorial has got to have a minimum of two parts so that I do at least some justice to it. So here in part1, lets start with the basics of what you have got to know to get started with establishing your own peer connection i.e learn how a basic call is established.
Assumptions : I assume that you can understand the basics of HTML and JavaScript so that you can understand the other parts of what is happening and that you have already ready my tutorial on gUM or you know the basic usage of gUM. A little bit of going through the WebRTC blogs (I’ve listed a few in the last) would be really helpful as well.

I will be using the code from Anant’s demo to walk you through the steps of setting up a call. It provides an easy way of testing the peer connection component (especially when you are not hosting your app). This page basically has two video elements, one called Remote and the other called Local. The video captured by your local machine (using gUM) is displayed by your Local video component. The basic idea is to establish a call using WebRTC’s peer connection component between the Remote and Local video components on the page. Thus finally when the call is established the video captured by your local machine is streamed to the Remote Video element on that page through its connection with the Local Video element. I highly recommend you try out this demo yourself on Peer Connection Test Page before getting started with this tutorial so that you have a clear idea of what you are trying to build. (I’m not sure if it works on windows yet :|)

Note: For the demo to work you have to have the latest version of Mozilla Nightly. Now that the peer connection preferences are turned on by default I don’t think you need to tinker with your browser preferences.

Lets start of from the very beginning. When I want to initiate a call what should I do? ( what to do in the code when I click on the start button in the pc test page ) – The first and foremost step is to create the peer connection objects based on the number of connections that are required. For our example, we require only two, so we create pc1 and pc2 as follows:

pc1 = new mozRTCPeerConnection();
pc2 = new mozRTCPeerConnection();

The peer connection objects has several in built methods which can be used quite effectively as you will notice in this tutorial. The next important step is to capture the local video by making use of gUM as follows:

navigator.mozGetUserMedia({video:true}, function(video1) {

In the above function we have set the captured media by the gUM function to video1 i.e. currently video1 is the local machine’s captured video. The next part deals with setting the local video source as video1. Once the video begins to play (thanks to invoking play()) we add this video to the Stream attribute of the peer connection object by making use of the method addStream(video)

// Add stream obtained from gUM to <video> to start media flow.
localvideo.mozSrcObject = video1;
localvideo.play();
pc1.addStream(video1);

So now, we have the local video running. We will also create fake audio streams for both pc1 and pc2 (The reason we have pc1’s audio as a fake stream is due to the echo problem) . These can be used later on in case some captured audio has to be added to the stream.

navigator.mozGetUserMedia({audio:true, fake:true}, function(audio1) {
pc1.addStream(audio1);
pc2.addStream(audio1);

Similarly we also add a fake video stream to the pc2 object, so that once the call is established the video from pc1 can be added to this stream.

navigator.mozGetUserMedia({video:true, fake:true}, function(video2) {
pc2.addStream(video2);

You might be wondering if I’ve forgotten the method onaddstream. Don’t worry I don’t forget that easily ๐Ÿ˜› So, this function is invoked everytime the addStream function is called. Let me explain this with respect to pc1.onaddstream. In this method we set the source stream for the pc2 video and we play it using the play method. Since, intially there is only a fake video stream nothing will play, but later on once the call is established – voila! pc2 will be playing the local video from pc1 i.e it plays the remote stream when a video call is established.

pc1.onaddstream = function(obj) {
log("pc1 got remote stream from pc2 " + obj.type);
pc2video.mozSrcObject = obj.stream;
pc2video.play();
}

The pc2.onaddstream does something similar, but this is for the case where pc2 is the local stream and pc1 is the remote stream.

pc2.onaddstream = function(obj) {
log("pc2 got remote stream from pc1 " + obj.type);
pc1video.mozSrcObject = obj.stream;
pc1video.play();
}

Now that we have everything ready, the only thing left is to establish a call. In WebRTC, calls are established through a process called Signalling which can roughly be defined as – “For a caller to be able to make a call he first has to make an offer to the callee (general procedure) and for the call to be established it is required that the callee accepts the offer and return an answer which is in turn accepted by the callee (yeah, yeah its the preliminary handshake). “ Signalling in itself is a huge topic to cover and is achieved through a protocol called Interactive Connectivity Establishment (ICE) and I plan to explain it in the next blogpost. For now, all you need to know about signalling is a higher level abstraction of it which is pretty much clearly stated in the definition. So the first step to signalling takes place here (creating an offer):

pc1.createOffer(step1, failed);

Here, tha basic idea is to make pc1 create an offer to pc2 as mentioned before. The offer will contain the Local Description of pc1 object and this Description is generated in the method setLocalDescription(..) in the function step1 as follows:

// pc1.createOffer finished, call pc1.setLocal
function step1(offer) {
pc1_offer = offer;
pc1.setLocalDescription(offer, step2, failed);
}

Now that pc1 has set its description, we have to set the Remote Description of pc2. This is done through the method setRemoteDescription(..) using the previously generated offer in the function step2 which is invoked while setting the Local Description of pc1 above. The function step2 looks like this:

// pc1.setLocal finished, call pc2.setRemote
function step2() {
pc2.setRemoteDescription(pc1_offer, step3, failed);
};

Now that the Local and Remote Descriptions are set for pc1 and pc2 respectively, it is required for pc2 to create an Answer which it will then send to pc1. This answer is created using the method pc2.createAnswer(..) in the function step3 invoked while creating the remote Description of pc2.

// pc2.setRemote finished, call pc2.createAnswer
function step3() {
pc2.createAnswer(step4, failed);
}

After creating the answer now pc2 also creates a Local Description using this answer. This is done through the method pc2.setLocalDescription(answer, step5, failed) as shown in the function step4 which is invoked previously while creating the answer:

function step4(answer) {
pc2_answer = answer;
pc2.setLocalDescription(answer, step5, failed);
}

Finally, the last step that remains is to set the Remote Description of pc1 using the answer generated previously by pc2. This is done in the method pc1.setRemoteDescription(pc2_answer, step6, failed) in the function step5 invoked while setting the Local Description of pc2:

// pc2.setLocal finished, call pc1.setRemote
function step5() {
pc1.setRemoteDescription(pc2_answer, step6, failed);
}

At long last our call is established – and your eyes will be filled with tears of joy ๐Ÿ˜›

// pc1.setRemote finished, media should be running!
function step6() {
log("HIP HIP HOORAY");
}

Now look back at all the steps – not so bad eh? – Doable? – Of course. This is the power of WebRTC – peerConnection established in a few simple steps. Though it does get a little tricky when it comes to real world apps (which I realized very recently), its still manageable right?! For those of you who think its not, there are a few great APIs (one of which is AddLive’s API) available and more coming ๐Ÿ˜‰

I almost forgot – still a few final steps left.
In case of an error you can add the required error handlers and handle the errors differently/better depending upon your application/usage.But this is not a part that we shall cover here.

function failed(code) {
log("Failure callback: " + code);
}

Finally when you want to end the call you just close the peer connection using the syntax pc.close()

function stop() {
pc1.close();
pc2.close();

button.innerHTML = "Start!";
button.onclick = start;
}

That’s about it for this PeerConnection Overview.

In the next tutorial, I will try to explain what is going on underneath this neat JavaScript code. So it is enough if you have an abstract idea of how this works for now ๐Ÿ˜‰ If possible I will also try to give you guys a brief idea of the underlying ICE protocol in the next blogpost. Hope you find this helpful. If you have any queries, feel free to comment here or ask on Twitter ๐Ÿ™‚

The story of a boy, Reddit, The Dark Knight Rises, Open Source and Freedom !

Yes, this is the title I have chosen to tell you my story of how Open Source has changed my life over the past year. But, this is not where I shall begin. I had finished writing all my Entrance Examinations which would determine if I could study in India’s very best Engineering colleges or not. I had written a range of exams from IIT to COMEDK, and I was expecting pretty good results because I felt that I was pretty good at these exams. Though I was not very confident (actually quite sure) about getting into an IIT, I was sure that I would definitely make it into either BITS or an NIT. And I did make it into these universities, but alas! the only stream I was offered at NIT Surathkal was Metallurgy and in BITS, Goa was Chemical. I did do a good job in the COMEDK and Amrita Vishwavidyapeetham Entrance Examinations (against my wishes) and I did getย  into these universities with a choice of the branches that I wanted to get in – Mechanical or Computer Science. But, I was so devastated (yeah, I was a complete idiot back then) that I didn’t get into any of the universities I wanted, that I made what I would call the worst decision I had made till date – I chose to study in Amrita Vishwavidyapeetham University instead of universities in Bangalore like PESIT and MSRIT. I knew I was not doing the right thing, but it didn’t matter, I was completely lost and beaten at all levels. It does look like I’m making a big deal out of a real small issue but this is what happens when a kid who has never failed at what he has wanted to achieve since he could remember does not get something which he considers is his own, by nature. (also the effect of being locked up in a dungeon for more than three years)

The question!

That’s how I ended up in the serene, tranquil and beautiful place called Ettimadai, which is where my university is. But inside the university, its a completely different story. Yeah, maybe its a dream university for many people and maybe it really is good, but good and dream is always a matter of perspective. To me it was like a dungeon, not only physically but also mentally. I had lost all interest to learn and let go of all my dreams and ambitions when I had come here. Probably why I felt like everything was closed in all directions. I mean, everything else was usual or what you could call usual at Amrita, bitching about classes, talking about how bad life had got, playing some or the other sport everyday, studying and doing fun stuff once in a while, making plans to overthrow the power hungry bureaucrats, schemes to end the tyranny at university and finally go to sleep. But what lacked was a sense of purpose and satisfaction to what I was doing in addition to being mentally chained (And this I have realized is one of the few things that really matters in life). So, enough about the SAD life and lets start looking at what started the STORM. I really loved going to techfests and conferences (though I wasn’t really passionate about anything back then), thought they were like my occasional escape routes ๐Ÿ˜‰ Now, I have heard quite a bit about Open Source from my friends at Bangalore and people around (who were still truly living unlike me and yeah, we don’t have internet or LAN connection in our rooms at uni – what’d you expect!) and so, I decide to find out what this thing is all about and I register for the Pengufest – A workshop on Open Source Software and Communities which is happening at NIT Thrichy’s annual techfest.

Its community

Its community

I and a couple of friends from my uni make it NIT Thrichy and we’re all quite excited to be there. We think we will finally be able to get an idea of what CS is all about, because we don’t know anything about it except some crap from the textbook and some labs in which we were tested on how well we could remember the syntax. Ah! I forgot the good part, a couple of weeks before I had looked up all the speakers and googled them (Yeah, we all have laptops and mobile broadband cards – where there is a will there is a way :P). This was when I looked into Reddit, because Alexis Ohanian was one of the speakers at the techfest. I began exploring Reddit and I really loved it, though I had to deactivate my account at a later stage due to addiction. Now that I’m almost done with uni, I’m gonna be back – excited and looking forward to it. This formed the central reason to why I was going to the techfest – to attend Alexis Ohanian’s talk.ย  We did have fun at NIT Thrichy, though we found the infrastructure to be below the standards of our uni, they had something far more better – FREEDOM and a great community. Finally we are at the workshop and I learn a lot, the most important of which is what GSoc is all about. Then, there is a session on Git but the Alexis Ohanian talk is rescheduled to the same time as the Git workshop. So, I give up the git workshop, none of my friends want to come with me but still no one’s going to stop me from attending Alexis Ohanian’s talk. I dunno why but I just wanted to attend the talk so badly – call it fate, destiny or whatever but I just had to be there. And there I was – it was a skype talk over a projector and really bad bandwidth. But, the very presence of Alexis Ohanian just gave me the vibes. When, he started talking I just could feel the vibes and somehow the interest that I had lost, the passion and dreams that I had let go all started coming back to me. There’ s a lot of what he said that I really liked and was influenced by but that’s for another post. Basically, I was just taken off my feet by his open, friendly and calm nature. I felt he was just someone like me but I knew he had done a lot more (way way more) and hence, ever since then he has always been a very captivating role model for me. And this was the beginning, though I was low on self confidence, though I was going to step back into the real world after almost two years, I had a direction I could follow and this was definitely a start. I really believe Reddit and Alexis Ohanian were partially responsible for this. So thanks guys! I owe you one, big time! ๐Ÿ™‚

CONTENT is what it is!

The very next semester, I started daring to dream. I felt like I really had to get some stuff going my way and thanks to an amazing Networking Prof. I had then, I was allowed to do my Computer Networks mini project in Python – Yay! I decided to implement something completely out of the box (based on a friend’s advice) SNMP – Simple Network Management Protocol. Turns out there are different version of this which can be implemented through the PySNMP framework and we ended up experimenting with each one finally choosing v2. It was a great experience, though I couldn’t get everything that I wanted to work working, the proxy that we wrote in Python and the different SNMP bits we implemented was weirdly satisfying (I’d also tried out some bits of the twisted framework then). This is where, my learning curve was really starting to take shape. This time I really wanted to take part in GSoc. Though, I started off a bit late I started lurking on IRCs pestering a lot of people and trying to get to know how things worked in the Open Source Universe. This was when I discovered my community – a study group, a technical community with whom I could identify myself with. This was just like how people connected in a Metal concert or at home in a family, it was inbuilt – everyone just got together and built something and they enjoyed the process and what the community as a whole had to offer. This was HEAVEN for me! For metal concerts and technical conferences I had to travel and these happened once in a blue moon, but with Open Source everything was in my laptop, through it I was the king of my own little world. Getting back to GSoc, after a lot of IRC discussions in different channels I finally decided that at this stage two organizations suited me and my skill set to a really good level – Mozilla and Apertium.

GSOC

I realized that GSoc was more about getting started in your area of interest, a project you are interested in and the best place to kickstart your journey as an Open Source Developer. The Apertium community was just great, lot of amazing people who were ready to help and more importantly teach in a way that I could learn by myself. They fueled my Open source desire even more and this is how I started off – trying to build a Machine Translation system through Apertium’s toolkit for the Hindi-English language pair (gotta really work on it seriously sometime).

mozilla-logo-font-i7

At Mozilla again, lot of people helped me out to get started. Here, is where I made my first patch and to see it online and knowing that it was going to be part of Firefox was something different for me. Through these communities I had learned so much, a hundred times more than what I had learned at my university. Though I didn’t get through GSoc that year ( to save my pride – it was a narrow margin) I got into Open Source Development and this was a turning point in my life. And this was the FIRE rising, everything was falling into place. I was rediscovering all my interests and hobbies, and working on them too. Ah! This was bliss, this was what I had wanted – now I had a purpose, to change the world through my skills, add some value to it or at least point out where it has gone wrong and do something about it. (yeah, I know – overstatement but everyone loves to hear that , me included)

RISE

RISE

Finally, how can I not talk about Nolan’s films when I’ve written an thought provoking, hope rendering and what I think to be an inspirational blog. Obviously everyone has watched The Dark knight Rises and it is by far one of the best movies I’ve ever seen. I had given up an interview for this movie – by Mu Sigma, which might be good in terms of money but it just isn’t my kind of work. So, how has the Dark Knight rises had an impact on me,well – I’m now trying to climb out of the hole with no rope. Its made me introspect and has restored my lost confidence. Obviously everything I’ve done has resulted in what I am now but this movie served as the final trigger (which was pushed easily because I saw it at iMAX) which has brought back my confidence and self belief. Every time I feel a bit low, I just watch that scene where Bale climbs out of the well – thanks Hans Zimmer, that’s some really powerful music. Movies like this and lot of others which I have reserved for future posts have had a great influence on me. Fight for what you believe in and never look back (maybe except for mistakes so you don’t repeat them :P). That’s what I am trying to do now – An MS in Computer Science abroad, lets see what happens because I have no net to hold me. All I know is this, I can fight back and I will fight tooth and nail for what I believe in – so no worries ๐Ÿ™‚

Though my physical freedom is still in question, I have become mentally free and ideas just started exploding, I’m transcending all the previously existing boundaries. I have begun to “Connect the dots” to find out what I really want. Now, I feel great, there’s always some kind of deeply satisfactory feeling inside everyday and it looks like each day has so much to offer. Wow! Now I feel stupid that I didn’t realize that all this was just so simple (hard work, lots of effort etc. but simple in terms of knowing what has to be done). I have another enemy, laziness – I somehow have to beat it but seems impossible right now ๐Ÿ˜› Anyways, thought this was a good post to publish on Doomsday – was holding this back for that. I’m sure the Mayans will agree ๐Ÿ˜›

I’m finally LIBERATED !!!!!!

freedom-image

PS I wanted to write a longer story, but then it’ll get too boring.

Munnar Day – 2

Basking in the Sun’s rays

The next day we somehow managed to get up real early and we set off at 5:30 am for a walk around the town of Devikulam. I must say, it is a really beautiful town. I just loved it. I would love to upload more photos of it in the blog, but that would make this too long. As we walked admiring the beauty and simplicity around us we came across a church perched on top of a small hill with steps leading to it. We climbed up and this was truly a heavenly experience. With the first rays of the early morning sun hitting us through the trees at this wonderous church , made the experience truly holy and heavenly. It was a different feeling all together to bask in those enchanting rays and watch the mist slowly fade away among the hills and tress, clearing up to reveal a beautiful town. This is a feeling that will remain imprinted at the back of my head no matter what. What a beautiful way to start the day!

In Devikulam town

Then we went on forward and into the town. The town appeared to be built during the british colonial times. This can be easily inferred from the architecture of the buildings here with those huge brick like shapes and signature british style and colors. We saw a couple of cute little pussies on the way. They really were adorable and were hiding by the house of some advocate. It was very calm, tranquil and soothing to walk through the town and finally arrive at Rajalakshmi for breakfast. I had never had Appam before, and I must say it is quite good and you must try it. After a heavy breakfast and some refreshing tea we headed back to the hotel to freshen up.

View at the dam

We got ready to go surprisingly fast, and got to the auto waiting for us outside. The auto guy turned out to be a real helpful and pleasant-mannered guide, Munnar- If you wanna hire an auto you hire it here. We first went through the beautiful roads absorbing all the enchanting views around us. Then we stopped on the way to look at a tree infested with honey bee hives. The driver told us that it wild bee honey was famous in Munnar and these hives were set up within 6 months of extracting honey from the earlier ones. But I wonder why the bees would want to build their hive in the same place their friends got incinerated ? After about half an hour on the auto again we reached Matupatty dam. It was beautiful but too picture perfect for me. I generally don’t fall into love with mainstream places that much, so I din’t really enjoy it as much as I had enjoyed my walk in the morning.

Indo Swiss Farm

Again back onto the auto we stopped at a place called photo point. I never understood the point of naming a place photo point when travellers and tourists are not allowed to shoot photos there. Apparently you had to pay to actually take photos over there and the price would be reasonable only if you were shooting a movie. This again looked very artificial to me. As we went a little forward we stopped by the Indo-swiss farm. We could’nt go in as we needed recommendation and influence. So all we could do was go close to the fence and watch the beautiful cows graze and enjoy the tranquil beauty and wish we had done something to get inside the farm and have a bit of that beautiful cheese which I had been dreaming about.

View near Chundavurrai estate

We went on to echo point. Again I could feel the same artificial beauty(I mighta repeated it a couple o times :P) but then on the plus side we did have a great breakfast – bread omelette and maggi noodles. We also tried cinamon,masala and lemon teas. They were bad here maybe except the masala tea. So my recommendation – maggi noodles and bread omelette.The onward journey to the other boathouse was really good. The views (especially near chundavurrai tea estate) along the road were wonderous and I really loved it. You could just stare out of the auto and get lost in your own thoughts. Ah!….How delightful it was !….

Fresh Fish being sold on the Hills!

Next on the list was Kundala lake where we wanted to do some boating. More than the lake I loved the huge trees around it. I wish they’d maintain it better, then it would have been even better. The Kundala dam was damn narrow with space for only one vehicle to fit across its width at a time. I wanted to try out the row boat and my friends preferred the peddle boat. My choice was voted out and so we did get on to the pedal boat. It was a leisurely afternoon and I almost fell asleep on it. We saw quite a few ducks and just lazed around in our seats on the boat when we were’nt watching them…..Oh!…we were also pedaling (stating the obvious). Then we got back to the auto where we had o make a choice between the Tata tea museum and Top slip due to lack of time. We chose the Tata tea museum as we could’nt miss that….I definetely don’t regret this choice!….it was totally worth it!

Now it was time for the long trip back. We did do some constructive work on our way. We got into a tea garden for the view and the true feel of being in Munnar. It was great. We also bought around a litre of honey for Rs80 thanks to our helpful auto driver, saw lots of trees being chopped and later found out that they were the ones used to make papper, ate passion fruits(awesome!) and fresh carrots before we stopped by an elephant camp. I really wish I paid and took the elephant ride through the tea garden. So hope none of you miss it and start regretting it like me. Then we went on back to the city and to the Tata tea museum.

We hurried into the museum as it was almost time for it to close. There we had a good cup of complimentary cinnamon tea. Then we went in to watch the documentary on the history of the Tea companies in Munnar. It was pretty good.(Except for the actors) The museum was great with a collection of antiques from the british times, everything from telephones and old typewriters to animal trophies. We were then shown and explained the manufacturing process of tea. One thing you should not miss here is buying the white tea and black tea. I had white tea and its just exquisite!….you should definitely try it!

Antiques in the tea museum

Once we were back at the hotel it was time to take a bath and go back to Rajalakshmi for some good hot dinner. It was a fun night with all of us going crazy for no reason. We finally got back to the hotel to get up at 6 the next morning and move on to the Cochin side.

WebRTC – Getting started !

I have got some exciting news – The WebRTC project is gaining some real momentum now. How do I know this? For starters the weekly Mozilla WebRTC meeting on Google+ has become crowded. A couple of months back when I first joined the hangout to see what WebRTC was all about there used to be hardly six people. Now, I have to fight for space on the hangout as only ten people can be accommodated at a time, and people have to keep dropping off after their relevant part is done to accommodate others (Yes! we need a better meeting solution – hopefully WebRTC will cater to our needs). The other reason for this gain in momentum is more people are getting involved as the components are getting stabler and better by the day thanks to the super enthusiastic, skilled and hardworking people involved in the project. Presently, there are a few developers working on creating some cool demos (and hopefully tutorials) for WebRTC which is exactly what we want now. Now, gUM is pretty much stable. Peer Connection has made real progress with a few demos where you could make video calls and Datachannels is being used to create a demo – this is a social app with filesharing also included as of its many awesome features. This is what I call real progress. Itching to try out WebRTC? Don’t know where to start? Want to know what can be done? Well, I am hoping this post will be of some use to all those who are deluded by these questions and maybe it will even fuel your interest to start experimenting with WebRTC.

A good place to start exploring WebRTC is gUM. My first reason for suggesting gUM is that it is the most stable and least buggy of all the WebRTC components. The second reason is that it is the easiest to use for a newbie as there is very little to learn about how it works and it can be easily integrated with whatever you are working on ๐Ÿ˜‰ I forgot to mention the obvious, the reason I use it – its just so muchย  FUN! ๐Ÿ™‚ A simple demo on gUM created by Anant is the best place to try out gUM. Here, you can see that you can get audio and video independently or together, how cool is that? And of course for those of you obsessed with yourselves there is an option to take a photo of yourself! Yay! To get this demo to work you will need the Nightly version of Firefox from nightly.mozilla.org Then you will have to change the preferences which can be accessed by typing about:config in the address bar. Then toggle the following two preferences to true – media.navigator.enabled and media.navigator.permission.disabled. This should have you all set for the demo and voila! Your first look into WebRTC! (*Any bugs or problems you have, we would be happy to hear about them and fix them asap – you can report on bugzilla or just add a comment to this post*)

To get a better idea on how to write code check out the source of the demo on gUM that I had previously mentioned. Now, let us walk through the code or rather the part that matters the most and help you get a better idea on how this works! I am sure you’ll manage with the rest of the code. (My explanations might sound naive to a first time user but you are welcome to mail me or catch me on IRC)

    try {

The gUM function starts here. You can specify the parameters you want to pass through the param argument. A valid set of parameters would be the ones which determine the values of video_status, audio_status and picture_status bool values used later on.

window.navigator.mozGetUserMedia(param, function(stream) {
message.innerHTML = "<p>Success!</p>";

Depending on the bool value of video_status the video stream is obtained and played or the code in the if block is ignored.

if (video_status) {
 content.appendChild(video);
 video.mozSrcObject = stream;
 video.play();

Depending on the bool value of audio_status the audio stream is obtained and played or the code in the if block is ignored.

} else if (audio_status) {
content.appendChild(audio);
audio.mozSrcObject = stream;
audio.play();

Depending on the bool value of picture_status the picture is taken and displayed or the code in the if block is ignored.

} else if (picture_status) {
content.appendChild(picture);
picture.src = window.URL.createObjectURL(stream);
picture.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
}

The function and catch statements are used to display error messages in case gUM fails due to some of the commonly known ways of incorrect usage.

 }, function(err) {
message.innerHTML = "<p class='error'>" + err + "</p>";
stopMedia();
});
} catch(e) {
message.innerHTML = "<p class='error'>" + e + "</p>";
stopMedia();
}

For more info on gUM you should check out the following links –
W3C Draft

First part of WebRTC landed

gUM has just Landed

gUM still image capture for Android has landed

Talk on WebRTC

Munnar – Day1

ย I’m starting off with my most recent travel destination Munnar. Its a brilliant place though I did not expect it to be. Well, I had started off my journey with two other friends from my college. A last minute decision as we could not go to Silent Valley. It took us 5 hours to reach there and we had to switch buses at Udumalapet. We started off late….nothing out of the ordinary……and got into the most crowded bus that I had ever got onto in my life. Sweaty and damning my luck I was out of that pit and reached Ukkadam bus stand . We barely managed to get onto the Udumalapet bus on time. After these preliminary glitches the rest of our journey was eventful. The wind mills on the way to Udumalapet are something you must not miss. I just loved them.

Then we got onto the Munnar bus at Udumalapet. This took us through the Anamalai tiger reserve and the Chinnar Wildlife sanctuary. The was pretty sunny and the views were good but not brilliant till we reached Marayoor. Here we bought a couple of peculiar fruits(I think they were berries) and an avacado without actually knowing it was an avacado. From here the journey was filled with sights and sounds of tea gardens and streams creeping their way throught the hills and ending up as water-falls. They were beautiful sights.

One of the best experiences to the nose as far as I am concerned is when the mild fragrance of tea engulfs it as you are passing by a tea factory. This is exactly the experience you will have when you are around half an hour away from Munnar. After this brilliant experience we arrived at Munnar town which appeared to be lost in its own frenzy. Not quite what I had expected judging by the tranquil journey we had had. The thing that struck me first when we went to the tourist office just by the bus stop was that this was a place full of friendly people. Honestly speaking,this is the place with the best auto drivers out of all the places I’ve been to India. They are the best and cheapest guides you could get. We went by auto to our restaurant at Devikulam called Autumn trees, it was 7kms away fro town. We encountered some beautiful sights on our way there from which I realised why this places was so popular.

Tea Stall

After all the beautiful sights it was time to bargain for a price at the hotel. We did get a the room at a reasonable price. The hotel was’nt that great(it was clean though which was all that mattered) but the location was good. So we decided to go for a walk after having a cup of tea at the tea stall by the highway. As expected the tea was brilliant, the best tea I had had in my life ( Hav’nt visited Assam yet!) and I mentally made a note to drink tea at this place for all the three days we were here.

The walk was quite a treat. We enjoyed it as went along the highway due to the beautiful surroundings which were so laid back and also due to mild weather. As we kept going we noticed a small path by the side ofย  the highway which lead down to a beautiful lake. The lake was enchanting enough for us to go down by the slushy, muddy and slippery path. When we reached the lake it was just an amazing experience which I shall not forget for years to come. The lake was just beautiful and was tempting us to take a dip. We resisted that temptation as we knew we were better off on land than in unknown waters.

We just could’nt take our eyes off the lake, but it was getting dark and we had to leave. So we slowly trudged up the path and made our way back to the highway. To our surprise we discovered that there were leeches all over our shoes. One of my friends did provide us with some entertainment by jumping up and down with his shoes in his hands. He was repulsed by the leeches and when he saw that a small leech had clung on to his calf he pulled it off and started running back to the hotel. My other friend and I had cleared off all the leeches off our shoes and walked back to the hotel and had a good laugh about the leech-phobic friend of mine.

Once we had got back to the hotel it took us some time to get ourselves spic and span and double check for leeches in our shoes. After all the tidying up we decided to walk a bit into town and have dinner at a small hotel called Rajalakshmi which was suggested to us by the receptionist. It was a shabby little place with tables and chairs all cramped up in a small space. The food, I would’nt say was exceptional but it was good and very very affordable which reduced the overall expense of our trip by quite a margin. The people here were as friendly as ever and we had a good time eating and chatting up at the table. While going back we sat down on low clearance wall and talked some more and tried blowing the fog to make it look like we were smoking. I loved doing this ever since I was a kid and this time was no exception. After a night full of maniacal fun we retired to the hotel and slept quite early so that we could get up in time to go down the Mattupatty side of Munnar.

Cyprus !

Just found out a bit about Cyprus and Crete today [Courtesy : Globetrekker TLC ๐Ÿ˜‰ ] Will post about Crete some other time though.

Firstly about Cyprus, It is famous for its awesome beaches and bars. Cyprians are known to love partying. They have a hell lot of good beaches. They have mid afternoon bubble bath dances on the beach and parties raging from the night till dawn. Cyprus is also known for free diving, one of the world’s 3 best free divers is from Cyprus and he can dive upto 75 metres. Free diving is a dangerous and beautiful adventure sport. It takes years of practice and a controlled & calm mind to go even over 20 metres. Its also home to the Temple of Apollo (The greek Sun God) which was destroyed by an earthquake which occured more than a thousand years ago. The beautiful ruins of this temple lie facing the beach which makes for a beautiful sight. Apparently, during the Summer solstice the Greeks come over to this Temple to perform a thousand year old ritual to show the people the importance of the temple in greek culture.

Cyprus has the influence of both Greeks and Turks as the Turks invaded it as well. There is a buffer zone dividing North Cyprus from the rest of Cyprus though it is recognised as a seperate country only by Turkey. North Cyprus is full of Turkish Cyprians and the rest is full of greek Cyprians. Even the currency differs in these two parts. But since the past few years there has not been any agitation between the Turkish and Greek Cyprians and they are allowed to pass through the buffer zones to meet each other or explore the other part of Town. All in all , Cyprians are a wonderful set of people who host mind blowing parties and I’m happy to have seen that episode!

More details and dvd order available on:

http://www.pilotguides.com/tv_shows/globe_trekker/shows/europe/cyprus_crete.php

JSFoo Bangalore

Let me start this off with the story of how my talk got selected….yeah I SPOKE at JSFoo ! I submitted my talk proposal for PyCon and JSFoo at around the same time because they were the conferences I found most apt and tailored to my requirements, taking into consideration this year alone (Sept-Nov). I was lucky that my talk for JSFoo did actually get through, because this was my first chance to deliver an official talk to a tech oriented audience with more or less similar interests. The theme of this year’s JSFoo was “JavaScript everywhere”. You can check out the website (I know its too late – but you can always go next year) at JSFoo 2012

T-shirt

I am presently contributing to this project called – WebRTC at Mozilla, doing some bug fixes and helping out with a few tests. I thought this would be a great topic to talk about because this was a project with immense potential with all the big names like Google, Mozilla, Cisco, Ericsson, Opera etc involved in it and once this is out it will revolutionize the Web. So I talked to those involved in this project on the IRC and they thought it was a great idea too. They also helped me get in touch with the Mozilla Developer Relations team who would help me with selecting the content to present at JSFoo. My talk proposal can be found here – JSFoo WebRTC. I was very sure that the proposal wouldn’t get through because of the number of votes on it, but it did get through and nothing could contain my excitement. In this process, I also applied for the Mozilla Reps program and after a brief interview I became a Mozilla rep before i knew it. Whoa! So much happened in just over three weeks. Funny that nothing exciting like this ever happens at university (I thought universities were meant for this) !

Now, it was time to get started with preparing the slides for my talk as I had to submit them for review before JSFoo. Oh! I almost forgot I also did a sneak preview talk – WebRTC preview during PyCon about my talk at JSFoo thanks to HasGeek. I know the expression in the end is funny (made it quite popular at uni) but that’s not the point ๐Ÿ˜› Got the slides prepared with some help from a few blogs, Justin Uberti’s talk at Google i/o , Anant’s talk at MozCamp Europe and of course my own content. The slides can be found at JSFoo WebRTC slides. All the references are added under – “Want to know more?” – So, no copyright issues please ๐Ÿ™‚

Hall

Time flies real fast, before I knew it I was NIMHANS Convention center at Bangalore. It was a really cool place for a conference. It was great to be back in this environment, I had been wanting to ever since PyCon. Learnt a lot of new stuff during the first half – kicked off with a brilliant keynote, followed by a great talk by Rakesh Pai about what was being done at his startup called Errorception with node.js which was really informative. Then, there was a talk by Shreyank Gupta (who also became good friend) about Underscore.js and I realized then how fucked up my JavaScript code was in terms of readability and understandability. My advice to you all from the first session – use Java Script, experiment with node.js and score with Underscore.js. Then during the lunch I met a a few guys from a startup called Bang the table. They had interesting ideas and a lot of content to share. Had great food and good discussions. After lunch was the session on using CreateJS and Canavas by Haris Shivaramakrishanan, he was Adobe’s technical Evangelist. He showed us how to create a simple game using CreateJS in around 30 mins and how much fun it was to do it! He is a great speaker and it was a really entertaining talk which showed me that I could finish my Graphics mini project at university in 2 hours. Wasn’t really into the next session but I enjoyed the session by Jon Maim, founder of Minish on AngularJS.ย  Now, it was time for a cup of tea and then I was back again listening to how to internationalize Web Applications with the help of Wikimedia Libraries. The final session by Rakesh Pai just blew my mind – he built a robot with Raspberry Pi, Arduino, an Ultrasonic sensor and a few hardware parts on wheels. He controlled the robot which ran node on its Raspberry Pi with his laptop (obviously there was a wifi module) and this was really amazing to watch. It was one of the best sessions I had been to. Forgot to mention, in the midst of all the excitement during the breaks I was trying to get my WebRTC demos working – yeah they were NOT working :/ During this time I met some really great and helpful people – Kingsley, Sajjad, Yuvi, Harris, Vamsi and anyone whom I forgot to mention do forgive me (writing this blog in a hurry). Kingsley is like the GOD, Sajjad was a fellow Mozilla rep and he does a lot of stuff for HasGeek, Yuvi also does a lot of stuff for HasGeek and is a Wikimedia contributor, Harris is a new intern at HasGeek and Vamsi worked at Bang the Table. In the evening made friends with Shreyank who worked with Red Hat R&D at Pune. So, made great friends again – which is again one of the primary purposes of attending conferences.

Nagarjuna

It was 6pm and that meant it was time to PARTY! We had a party at the Xtreme Sports Bar. Been long since I had been there and it was great time – drinking beer, hogging, meeting new people and socializing. Also, played pool for sometime and in simple terms that night was just AWESOME! Got back and tried to see if I could do something about the demos not working on Windows. Went on IRC asked the guys, who told me they had just landed a patch on this issues and now the demos had to work. Updated my Nightly and tried…still didn’t work. Left early the next day to figure something out, and the moment I tried all the demos seemed to work. Yipee! – so the patch had landed and resolved all my issues. Now, I was looking through all my slides rehearsing for my talk and trying to shorten it to complete it within 30 mins or rather 25 mins as the last five minutes were for questions. So, I didn’t or rather couldn’t listen to Sankha talking before me. He had some technical issues with the projector and I was hoping the same wouldn’t happen to me. Now, it was my turn. I wentย  on stage feeling slightly nervous but once I began to speak I forgot it all ๐Ÿ™‚ I too had issues with the projector unfortunately but it was more fun talking so it didn’t disturb me much. Though, I couldn’t show everyone the code for PeerConnection and DataChannels due to flickering projector (to emphasize on how simple the JS api for WebRTC was) I think the talk went pretty well (Disclaimer : Audience poll not taken). I think it would have been great if the projector didn’t act funny but I still had a great time and I really have to appreciate the tech support by the HasGeek team. The bottomline is I that I discovered that I love speaking on stage and I can’t wait to do it once more (please don’t curse me guys – I’ll show better stuff next time) ๐Ÿ™‚

Arduino Bot

Again, it was a great day. I really enjoyed it and during lunch I got to talk to Aravind and Gaurav who were the founders of askabt, a new startup which was about to release their product at the end of this month. Learnt a lot from them and shared a lot of ideas. I also got a JSFoo T-shirt as I was a speaker…lucky me! I also talked to Jon after my talk as he seemed interested in WebRTC and also I was interested in his work at EPFL and Minsh. I also met Sunil after his talk and he is like this open and friendly super informative encyclopedia. His talk was fun and taught me new stuff. With Sunil and Jon’s help I am sure I can complete my Graphics mini project at college in an hour. As usual there was an awesome talk by Anand S on d3.js and it was simply entertaining and very informative. I think I am going to experiment with d3.js, it does look really tempting – what amazing visualizations it offers! In the end there was a talk by Sudar from Yahoo who also use JS to develop an Arduino bot which could be controlled from any laptop which was given access to it. Everyone controlled it and played around with it for a while. This was quite a fun session! After this it was the end of the conference and time for the vote of thanks and everyone to go back home. I wish everyone could stay back, I didn’t want to leave such a great crowd! Anyways I guess all good things have to come to an end. So, I really want to thank Zainab, Kiran, Sunil, Rakesh and all the other guys involved in organizing this brilliant event. Thanks guys! We should do this much more often!

Photos by : $hrink

PyCon India 2012

PyCon in India! wo! How can I not attend it – this was what I thought when I firstย  found out that there was to be a PyCon in India that too in Bangalore.ย  I registered right away and proposed a session as well, unfortunately the talk did not get selected (JSFoo seems to offer me more luck, but more about that later). The days I most anticipated were really worth the wait and the money.PyCon was just two days filled with fun, knowledge and of course the deadly Python.

I couldn’t believe my eyes when I saw David Mertz giving the keynote address, one of the 11 directors of Python in India! It also had other people like Jacob Kaplan Moss, Anand S, Nick Coghlan and Prabhu Ramachandran who gave exceptionally good talks. I had the privilege to meet most of the mentioned people and got to know interesting stuff and also shared some ideas and got a great insight into how python could be and is being used in all the web and data analysis domains. Another person who I cannot fail to mention is Yannick Giringas who I had met during one of the talks. He was from FB in CA and he also shared a lot of knowledge and ideas which I could have never got from anywhere else. I did really enjoy the talk with him and his. Then PyCon was where I met a few of my high school friends and their friends which again was great not only because of the fact that I had not seen them for so long but because I got to explore new avenues, introspect on what I was going to do and of course I got to form new ideas and new philosophies about OpenSource, Higher Studies and Life in general.

We are not as gifted as Buddha to get enlightened in one go, but we can do it in parts and all these parts have to be done concurrently. One very important part (for us developers and preachers of computers, code and the internet)ย  is attending conferences, especially ones like PyCon where you meet new people with similar interests. It shows you how much more could be done and more importantly that you could do something about it. It opens up your mind to new possibilities, allows you to explore new areas and talk to experts in those fields. It helps you plot the graph of your life by adding new dots and more importantly it helps you connect them the way they should be (An analogy like the one in Connect the dots). It gives you an idea as to what all companies are working with the technology you are passionate about and what is to be done and being done in this field and the fields you are interested in. You get to meet and discuss with people which may lead to enlightenment or you working with someone who you just met towards some common interest. There is nothing like these conferences to boost your confidence and strengths so that you can delve deeper into your areas of interests, the real world problems and much much more resulting in the healthy survival of software, ideas, talent and society as a whole. So, be open, be innovative, share ideas, pursue your interests, learn new things, add to your knowledge DB and contribute to the society. (Btw a little of all these could be attained by attending good conferences)

A link to PyCon India is provided here so that you get an idea of what you have missed or in case you have attended = what you enjoyed:

http://in.pycon.org/2012/

P.S. My sincere thanks to Hasgeek, PSF and IPSS for organizing this event and all the sponsors for supporting it. ๐Ÿ˜€

Why wait for Ubuntu 12.10 ?!

I’m sure all of you linux users are real happy with Ubuntu 12.04, it being a really awesome release what more could you want?

Well…you had no idea what you really wanted if you are satisfied with it and that’s what I just realized. Canonical intends to take thee experience to a whole new level with the release of Ubuntu 12.10. A preview of it was given at OSCON by none other than Mark Shuttleworth. You can check out the preview here:

http://www.youtube.com/watch?v=SdBeFolhfGE

Some of the statistics he does mention is really good to hear about Ubuntu being the second easiest to use after Windows. Btw Dell is also going to ship some laptops with Ubuntu pre-installed…Yay! There is a revolution taking place in the making of a really interactive and integrated OS which can function with the internet as its lifeline all striving for the best user experience and Ubuntu 12.10 does appear to be way ahead of that race by the looks of this video. The name sounds real tempting too – Quantal Quetzal.

This is also a good source to see what is in store in Quantal Quetzal.ย  5 best things about Ubuntu12.10

So can’t wait for it……Hope you guys are as eager as I am ๐Ÿ˜€

P.S. I bet these features would take atleast 3-4 years to be incorporated into the other popular Operating Systems, you know what I am talking aboutย  ๐Ÿ˜›

Mozilla Factory

This page is dedicated to my Mozilla posts. Yes, I am a proud Mozillaย  volunteer though not really experienced(5 months I guess). I have learnt a lot after joining this wonderful community – about myself and the organization and in the process also improved upon my development skills and experience. So I will dedicate another post as to why I have fallen in love with Mozilla though that should be the starting post. Hence here I will share everything I know about Mozilla and anything interesting I find happening in the Mozilla community. So, stay tuned.

Yesterday while looking through some of the interesting pages of Mozilla on Facebook I cam across this really interesting one called Mozilla Factory. It is a project by Mozilla Japan. It has some really cool stuff going on (from what I have seen on their website). Not only are these projects cool but a couple of them are totally out of the box, they do stuff with the browser which you could have never thought of before. I highly recommend you take a look at the Mecha Mozilla Project. This is a project put in their words is – explore the possibility of web as thinking a good relationship between โ€œWebโ€ and โ€œReal World”. I’m sure some of you will find this really crazy while some of you might be awestruck by it.

This project also has some great contributors. I was particularly interested in the profile of one of the contributors named Daisuke Akatsuka who was an ex-F1 racer and had done industrial engineering before settling down as a developer. I believe it is people like this who add variety to the web through their vast domain knowledge by bringing in their own experiences into development. As I had expected he is one of the leads on the Mecha Mozilla project. I am eager to see if I could talk to him on the IRC and get some ideas and learn something cool. For all of you guys who want to check this out here is the link: http://www.mozillafactory.org/en-US/about/

It is projects like this which stretch the boundaries of what we know and think to be impossible and help us understand how much more there is to learn and watch. This truly tells us the story of the evolution of the web. It has and will always be exponential – do you not agree?