Saturday, December 14, 2013

WebRTC Introduction with chart flow

WbRtc stands for web real time communication which means you can share the audio and video stream, aribitrary data peer to peer. The WebRTC api is open source project introduced by GOOGLE.

In a web without any plugin, audio and video chat was very complex but WebRtc makes it simpler.
Now you don't need to any kind of plugin or extra technology. WebRtc with javascript makes you comfortable for sharing video, audio and other data.

So here we know, how it works.
You need the following points for use WebRTC in your web application
1) getUserMedia()
2) RTCPeerConnection object
3) Data Sharing

By the getUserMedia() method we can get the audio and video stream in codec format through the microphone and webcam respectively.

By using RTCPeerConnection object and signaling method, there could be share the network information like IP addresses, information about height, width and  resolution of local video(as this information is created by getUserMedia), The signaling method can be any which, like socket.io with node.js, ajax, xmpp etc. It's on you  which one is suitable for you.

Data Channel
After shared the above information there would be started audio and video streaming between peers.

So here we go in Detail,
We are supposing the user Sam is caller at one browser in one place, he gets the codec information about local video and audio.

The Rocky(callee) at other browser in other place, he also gets the codec information about local video and audio.

After that, browsers of Sam and Rocky are create the RTCPeerConnection Object(RTCPC) respectively in each browser.

As we already knew, Sam got the local information(codec information) about audio and video,  now he sets this information as local description to RTCPeerConnection Object(RTCPC), now he sends 'Creates Offer' with this local description to Rocky.

After get the local decription from Sam, Rocky sets that information as remote description to RTCPC object on his side, at the same time he sets his local description about video and audio to RTCPC object on his side and send it to Sam with 'Creating Answer'.

After get the 'creating answer' from Rocky , Sam sets that information/description as remote description to RTCPC object on his side.

The handler of onIceCandidate event is triggered when the candidate is available at network, which means When Rocky would availble at network, handler of onIceCandidate of Sam is triggered and sends the information about candidate  to Rocky, after that addIceCandidate of Rocky's side would be triggered.

After exchange these information, there would start audio and video streaming between peers Sam and Rocky.


Here is the process in chart which is devided into number.

chart webrtc



This article is inspired from below tutorial you can get more information about WebRTC from here.http://www.html5rocks.com/en/tutorials/webrtc/basics/

Tuesday, July 23, 2013

Closure in JavaScript

What is Closure

To understand the closure in JavaScript seems to be difficult, but not really. Let’s understand the concept step by step.

The Closure is a function which has access to variables of its outer function, that’s it, Is not this awesome? Let’s dive into the example

	var color = "red";
	function display(){
		var color2 = "green";
		console.log('Color are ' + color +  ' and ' + color2);
	}
	display();
With above code,  variable color can be overridden unintentionally at any time which may affect the action of display function.

So how above code can be protected by using closure concept.

var getColor = function (){
	var color  = "red"; // this can be accessed by display function
	var display = function(){ // this is closure function
		var color2 = "green";
		console.log('Color are ' + color +  ' and ' + color2);
	}
	return display;
}
var colorObj = new getColor();
colorObj('yellow');

In the above example, the ‘display’ is closure function, it can access the “color” variable whenever this function will be invoked, but this variable can not be accessed from outside of getColor function, so it’s safe for being override.

What’s is the benefit of using Closure?

By using the Closure, we can make our code private, clean, and variables can not be modified by unintentionally.

Seperate enviroment with Closure

In below example, every time the getColor is invoked there will create the exclusive environment with closure and it’s related variables.  For example

var getColor = function (color){
	var color  = color; 
	var display = function(){ 
		var color2 = "green";
		console.log('Color are ' + color +  ' and ' + color2);
	}
	return display;
}

var colorObj1 = new getColor('red');
var colorObj2 = new getColor('blue');

colorObj1('yellow');
colorObj2('geeen'); 

new getColor('red'); and  new getColor('blue'); create the specific environment.  The environment has its own variable values red and blue with its own closure. Below figure shows the enviroment for above code



After invoking the closure function display,  it uses the value which was passed during the getColor() function called.

What happens when closure is used under the loop

function display(color){
	console.log('color is ' + color);
}
var getColor = function (){
	var onColors = [];
	var colors  = ['red', 'green', 'blue']; 
	for(var i=0; i < colors.length; i++){
		onColors[i] = function(){
			display(colors[i]);
		};
	}
	return  onColors;
}
var onColors = getColor();
onColors[0]();

In the above code, when we invoke the function onColors[0](); It suppose to display red color but It does not happen, because when the display() closure is invoked, the i has been reached to 3, so the output is “color is undefined”.

Under the loop, the getColor is not able to create the individual environment because of which the i’s value 3 is shared to all closures onColors[i].

So we need to make the individual environment for each closure and it’ related variables under the loop. Let's see how do we achieve this.

	function display(color){
		console.log('color is ' + color);
	}
	
	function eachColorEnvironment(color){
		return function (){
			display(color);
		}
	}
	
	var getColor = function (){
		var onColors = [];
		var colors  = ['red', 'green', 'blue']; 
		for(var i=0; i < colors.length; i++){
			onColors[i] = eachColorEnvironment(colors[i]);
		}
		return  onColors;
	}
	
	var onColors = new getColor();
	onColors[0]();

In this example, onColors[0](); renders the output “color is red”. Now getColor() is able to create separate environment with specific value and closure from eachColorEnvironment, as following,

First environment => Red and Closure


Second environment => Green and Closure


Third environment => Blue and Closure

Use “let” instead of  Closure.
	function display(color){
		console.log('color is ' + color);
	}
	
	var getColor = function (){
		var onColors = [];
		var colors  = ['red', 'green', 'blue']; 
		for(var i=0; i < colors.length; i++){
			let color = colors[i];
			onColors[i] = function (){
				display(color);
			}
		}
		return  onColors;
	}
	
	var onColors = new getColor();
	onColors[0]();
	
We can use the let keyword to handle this situation, this keyword can be used for block scope variable, so let color = “colors[i]” defines the private variable for its own closures.
let color = colors[i];
onColors[i] = function (){ display(color);}	

You can get the various examples about Closure.