WebRTC # 1 - Getting Acquainted



    Many have already heard about the WebRTC project , some even use it (or try to use it in existing projects), while others maliciously rub their hands, anticipating the gradual crackdown on Skype and Flash.

    Googling in Habré (hehehe) for some reason I did not find articles that delved into the technical side of WebRTC, would show examples of its use.

    Well, I’ll try to please you with schematics, code. In general, exactly what everyone likes. So let's go under the cut, my beloved 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 ordinary 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 for the next two parts of the article.

    Media streams


    Media Streams is an API that allows you to access the camera and microphone through a browser without any plugins or flash.

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

    And for now there is a need for crutches due to the presence of prefixes in various 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 );
    	}
    );
    

    The browser will cute ask for permission.



    Hurrah! We got a Stream object with audio and video. And what to do with it?
    We can show this business to the user using the html5 tag "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 same API that allows you to establish a Peer-to-Peer connection between browsers.

    The following is a simplified diagram of the connection between two clients.


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

    It is noteworthy that in the future, for the operation of such a connection, the server becomes optional. Those. after turning it off, the data will also be transmitted. Further participation of the PeerConnection Observer is necessary to properly close the connection, add participants to the stream, etc.

    The specification specifies the RTCPeerConnection constructor, but so far we have to use prefixes for different browsers:

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

    Here it’s time to consider the server side already, 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 is changing, because The project is under active development . Therefore, sometimes you have to change your code.
    2. Prior to the approval of audio and video codecs, there may be problems with cross-platform.
    3. Cross-browser compatibility. We have the following picture:
    ChromeFirefoxOpera
    getUserMediaStable (as of version 21)1712
    Peer connectionStable (as of version 23)Nightly-

    Why then is that 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 right now, it will be possible to penetrate much faster and start using it later.
    And no one canceled projects designed for a particular browser (Chrome Stable, for example). Yes, and interesting, right?

    Further more


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

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

    UPD: thanks GeorP and egobrain for the comments.

    Also popular now: