You are here

How To Code Your First Web App That Uses The WebRTC APIs

WebRTC (Web Real-Time Communications) allows the creation of next-generation communication applications without the need for plugins, downloads or any other type of installation. Peers are able to execute video and audio calls and allow P2P data sharing using JavaScript APIs that are embedded directly into the browser.

In a typical transaction, once a connection is made and a session initiated (which uses various standards and protocols), each user must grant access to the device’s camera and microphone. JavaScript APIs then produce and transmit the multimedia data through a “channel”, which works as a private room not published to the outside world.

WebRTC works on both mobile and desktop browsers, and this tutorial by Lantre Barr for SitePoint shows users how to build a photo booth app that uses your webcam and applies some CSS filters by leveraging the MediaStream API.

The first task is to create the HTML foundation of the WebRTC application. Using JavaScript, followers are then provided code to retrieve the video stream from your users, including defining the constraints to determine the type of media being requested, with the ultimate goal of taking a snapshot of the stream and rendering it to the canvas.

Followers then use CSS to style the application, as well as define the photo booth’s filters and the size of the video stream. All of the code required to build this application is provided, resulting in a feature similar to MailChimp users' ability to add a profile picture using your webcam.

Currently, WebRTC is only compatible on desktop versions of Firefox, Chrome and Opera, and on mobile browsers running Android. 

Be sure to read the next WebRTC article: 5 Considerations Before Starting That WebRTC Project

Original Article

The Dawn of WebRTC