Lessons Learned: WebRTC on the Web and with Cordova

WebRTC is a relatively new web standard to allow real-time communication (RTC) in web browsers. This includes audio, video and/or file transfers. All that can be accomplished using JavaScript APIs. If you are unfamiliar with WebRTC, it might be good to read the Getting Started guide at HTML5 Rocks or any another introduction.

Browser Support

Not all web browsers support WebRTC just yet. At the time of writing, only Firefox, Chrome, and Opera implement WebRTC, while Internet Explorer and Safari do not. And even in the browsers that do support WebRTC, the current implementations slightly differ from each other. Luckily, there comes some help from the WebRTC Adapter shim that allows to use a unified API instead of dealing with different browser implementations and vendor prefixes.

In order to use WebRTC functionality in Internet Explorer and Safari today, you have to install a browser plugin. Two examples of such plugins are Temasys and WebRTC-everywhere. Both of these projects also offer an updated version of the adapter shim whose use is highly recommended. So as long as your application’s users have a plugin installed on these browsers, your WebRTC content is browser-independent.

Mobile Device Support Using Cordova

WebRTC can also be used on mobile devices. Supporting browsers are the same as on the desktop. So WebRTC can be of interest, when developing audio or video chat applications on mobile. Native apps can directly use the platforms’ APIs (e.g. on Android or iOS). For platform-independent apps, however, browser support is very important.

Assume developing an app using Cordova. That app can use the standard WebRTC API and it will work on recent Android devices (or even on not-so-recent devices when using Crosswalk). But to also support iOS, a Cordova plugin is needed as Safari does not support WebRTC itself. Cordova plugins to add WebRTC support are for example PhoneRTC and iOSRTC. The two are quite different, though.

PhoneRTC uses its own API that has to be used for both, Android and iOS. That API is similar to the WebRTC API but not identical. So when you need to adapt the plugin to suit your needs, you have to look through PhoneRTC’s scarce documentation. And when you want to do crazy stuff like switching to the rear instead of front camera, you even have to change the plugin’s code yourself. The PhoneRTC also has many open issues and bug reports, for example build errors caused by the use of an outdated Swift version or incompatibilities with Crosswalk.

iOSRTC works differently. It exposes the standard WebRTC API on iOS and the plugin does not even have to be used on Android. That means that on both platforms the same standard APIs can be used. It also means that you do not have to rely on just the plugin’s documentation but can read any WebRTC related article or tutorial. And, for example, to switch to the rear camera, just use the standard navigator.getUserMedia() with MediaStreamTrack.getSources() on both platforms. All in all, I definitively recommend iOSRTC over PhoneRTC.