Comprehensive guide to WebRTC. Part 1/5.

WebRTC (Web Real-Time Communication) is your browser built-in technology with the aim to simplify developing applications using audio and video streams. You can easily build your own Skype in the browser using WebRTC. So the simple idea is that you open up a website and connect with another user immediately. WebRTC API includes camera and microphone capture, video and audio encoding and decoding, transportation layers, and session management.

Under the hood, WebRTC leverages a basic peer-to-peer connection between two browsers. Lots of apps today use peer-to-peer capabilities, such as file sharing, text chat, and others.

There are 3 browsers which support WebRTC out-of-the-box – Chrome, Firefox, and Opera. You can check browser compatibility at http://caniuse.com/#search=webrtc.

Later and then I assume you are using Chrome, Firefox or Opera. As for me, I’m using Chrome for WebRTC tests. To discover the possibilities of WebRTC navigate your browser to https://opentokrtc.com, enter a room name, click “join” and “allow”. You must be able to see yourself. Then reopen this page in a new tab and enjoy your new friend 🙂

To sum up it is a worth learning technology that brings rich media into your browser.

The first WebRTC app

Let’s start with obtaining a live video and audio stream from a user’s webcam and microphone. We will use the getUserMedia API. It is also known as MediaStream API. One of the requirements for working with media APIs is having a server to host HTML and JS files. Opening up the files by double-click will not work.

Our first WebRTC app will be simple. It will show a video element on the screen, ask user to use the camera and show live video stream.

Create a file named index.html:

Create main.js in the same folder:

Refresh your page, click “allow” and you should see your face.

demo

The second app

We can configure the stream using the first parameter of the getUserMedia API. For example to turn off the video stream and remain only audio we can use:

There are also other params which can constrain our stream. For example, you might want the mobile phone users only to capture a 480×320 resolution and desktop users 1024×768 resolution and 16:9 aspect ratio.

Create index.html:

Add main.js file:

Now resolution on the mobile phone should be smaller than on the desktop. There are more constraints at https://tools.ietf.org/html/draft-alvestrand-constraints-resolution-03.

demo

The 3rd app

Sometimes there are more than one camera or microphone on the user’s device. With MediaSourceTrack API we can ask a list of available devices and select the one we need.

index.html

main.js

Open the page and see the console output.
demo(Chrome only)

The 4th app

Let’s create an app which will capture a video frame, apply different effects on this picture, add some text to it and draw it on the web page. We will use Canvas API.

index.html

main.js

Now of you click “take photo” button you will capture video frame into the canvas. If you click on the video itself you will apply different photo effects to the picture.

demo

That’s all for today 🙂

2 Comments

  1. LastBenny

    I see you don’t monetize your page, don’t waste your traffic, you
    can earn extra cash every month because you’ve got hi quality content.
    If you want to know how to make extra bucks, search for: Mertiso’s tips best
    adsense alternative

  2. BestAlana

    I see you don’t monetize your website, don’t waste your
    traffic, you can earn additional bucks every month.
    You can use the best adsense alternative for any type of website
    (they approve all websites), for more info simply search in gooogle: boorfe’s tips monetize your website

Leave a Reply

Your email address will not be published. Required fields are marked *