What is WebRTC?

April 14, 2015

Blog | Development | What is WebRTC?
What is WebRTC?

WebRTC is a free, open project aimed at providing a standard for browsers to support Real Time Communications using a set of simple APIs. There are several different APIs involved, whose drafts can be seen here and here. At its core, it provides developers the ability to capture an end-user’s camera and microphone directly, without the need of any 3rd party plugins.

As of writing, the number of browsers supporting the full WebRTC set of APIs is actually zero ( http://iswebrtcreadyyet.com/), but that doesn’t mean that web applications can’t be written with only a handful of the APIs completed.

Several useful examples of this technology can be seen in the followings links:

An interesting and useful component in the WebRTC implementation is the Media Recorder API (not currently depicted in the grid shown at http://iswebrtcreadyyet.com/). This API allows developers to record the media stream obtained and either save it to the local system, or to upload and process it further.

                   

Firefox has parts of this API implemented, while Chrome has only intentions to implement it at this time. Because of this, developers who rely on this type of functionality are tasked with replicating the functionality as best as possible for Chrome users.

Recently, we ran into this issue and stumbled on the MediaStreamRecorder.js library. To work around the missing recording API in Chrome, the library relies on two other technologies not directly part of the WebRTC stack – Canvas API and WebAudio API.

The Canvas API is leveraged to re-draw the captured information from the camera, save it locally as a series of WebP formatted images and finally combine the images into a WebM container (without audio!)

The WebAudio API is leveraged to extract the raw audio bytes and save them to an in-memory stream of bytes. In this case, raw audio bytes are equivalent to a .Wav file of data which will be significantly higher in file size than a more web-appropriate audio file encoding.

With both of these, Firefox and Chrome are able to create a recording, in memory, of the captured information! These two browsers represent a large number of the internet user base. However, these fallback APIs come at a price…

As an example, Firefox is able to record 30 seconds of the user’s media into a single .WebM file between 5-10MB in size. In contrast, Chrome was able to record a 30 second silent .WebM file at 4-5MB in size, and a 25-30MB .Wav file containing the audio. If the intention is to simply play the audio back to the client, then having the larger audio file isn’t too concerning. However, if you need to upload the recorded data up to a server, 5-10MB of data is much more likely to complete in a reasonable time than upwards of 30MB of data.

So, we asked ourselves the ultimate question:


How can we force Chrome to leverage an audio encoder, such as Vorbis, to create something like an .Ogg file instead?                                 

While there are Javascript based solutions for achieving this, such as ffmpeg-in-a-browser, the Javascript files themselves are rather large and the performance isn’t spectacular. Personally, I’d hesitate relying on this type of solution in a production-grade environment where performance is critical. It’s great to know, though, that the option is there if you need it. It’s also a testament to what can be done with a little ingenuity.

Right now, we’re evaluating Native Client, a compelling option for sure. It’s unclear right now how long it will take for the Chrome development team to implement the Media Recorder API to align both Firefox and Chrome for this functionality. In the meantime, if we can create a stopgap solution that makes the user experience significantly quicker with only a few hoops to jump through on the development side, everyone’s a winner (especially our delighted clients).

Phil Azzi, Developer, GeekHive

Phil Azzi

Technical Lead
Tags
  • Development
  • Review

Recent Work

Check out what else we've been working on