WebRTC # 1 - Meet

Many have already heard about the WebRTC project, some even use it (or are trying to use it in existing projects), while someone maliciously rubs his hands, anticipating a gradual crackdown on Skype and Flash.

Googling in Habré (hehe) for some reason I did not find articles that went deep into the technical side of WebRTC, would show examples of its use.
')
Well, I will try to please you with schemas, code. In general, precisely the fact that all to taste. So let's go under the cat, my favorite reader.

What is it?

WebRTC is a project that allows you to receive media data (audio and video) through a browser and establish a Peer-to-Peer connection between two or more clients, through which regular data and media streams can be transmitted.

In essence, WebRTC is:
1. Media Streams (getUserMedia).
2. Peer Connection.

Below I will briefly describe these elements, but I still want to leave a detailed description of the following two parts of the article.

Media streams

Media Streams - API, allowing access to the camera and microphone through a browser without any plug-ins and flash.

Following the WebRTC Public API, we need to use the getUserMedia method of the global navigator object.
It is worth passing three parameters:
- an object with a list of what we need (audio / video)
- success callback
- error callback

And while there is a need for crutches due to the presence of prefixes in different browsers:

var getUserMedia; var browserUserMedia = navigator.webkitGetUserMedia || // WebKit navigator.mozGetUserMedia || // Mozilla FireFox navigator.getUserMedia; // 2013... if ( !browserUserMedia ) throw 'Your browser doesn\'t support WebRTC'; getUserMedia = browserUserMedia.bind( navigator ); getUserMedia( { audio: true, video: true }, function( stream ) { console.log( stream ); }, function( err ) { console.log( err ); } ); 

Browser nice ask permission.



Hooray! We got a stream object with audio and video. And what to do with it?
We can show this case to the user using the html5 tag "video".

 <video id="video" autoplay></video> 

 var videoElement = document.getElementById( 'video' ); videoElement.src = URL.createObjectURL( stream ); 

And a little sugar. Now you can safely apply html5 filters (webkit) to the video element.

 #video { -webkit-filter: sepia(1); } 

Cool, isn't it?

Peer connection

Peer Connection is the API that allows you to establish a Peer-to-Peer connection between browsers.

Below is a simplified diagram of the connection between two clients.


- The first client sends the so-called Offer to the second client via the server (PeerConnection Observer).
- The second client (Remote Peer) sends a response through the server to the first client.
- Established P2P connection between clients.

It is noteworthy that in the future for the operation of such a connection, the server becomes optional. Those. after it is turned off, the data will still be transmitted. Further participation of the PeserConnection Observer is necessary for correct closure of the connection, adding participants to the stream, etc.

The specification contains the RTCPeerConnection constructor, but for now we have to use prefixes for various browsers:

 var PeerConnection = webkitRTCPeerConnection || // WebKit mozRTCPeerConnection || // Mozilla FireFox RTCPeerConnection; // 2013... if ( !PeerConnection ) throw 'Your browser doesn\'t support WebRTC'; 

Here it is time to consider the server side, but I want to leave the first article more overview.

disadvantages

Continuing the "inspection", it is necessary to note the dark side of the project:
1. The API changes because The project is under active development . Therefore, sometimes you have to change your code.
2. Before approval of audio and video codecs, problems with cross-platform are possible.
3. Cross-browser compatibility. We have this picture:

	Chrome	Firefox	Opera
getUserMedia	Stable (as of version 21)	17	12
Peer connection	Stable (as of version 23)	Nightly	-

Why then is this all?

I think in the near future we will still get a stable WebRTC API in modern browsers. This will open up incredible opportunities in web development. Being interested in this project now, it will be possible to penetrate much more quickly and start using it later.
And no one has canceled projects designed for a specific browser (Chrome Stable, for example). And it's interesting, right?

Further more

Finishing the first part of the series of articles, I would like to make a rough plan:
1. WebRTC # 1 - Meet
2. WebRTC # 2 - Media Streams
3. WebRTC # 3 - Peer Connection: Server Side
4. WebRTC # 4 - Peer Connection: Client Side
five.…

PS If you expect more material, do not swear much. The topic is very interesting to me, so I am very interested in continuing the cycle, at the same time delving into it.

UPD: thanks to GeorP and egobrain for the comments.