WebRTC is an exciting feature in newer browsers. It allows you to transfer any data between two peers. In conjunction with HTML5 elements like the <video> tag, it enables browser-to-browser audio and video conference calls … with no extra plugins or help needed, it all lives in your browser. You can check out a demo here:
The standard is quite young, but stable, at the time of writing. The major disadvantage currently is that it requires recent versions of chrome or firefox to work. In a controlled environment where you can dictate user’s browser choice, it’s not much of an issue, but if you are deploying webRTC to the public, then differing browsers will cause you headaches. When I first saw webRTC, two thoughts sprang to mind:
- The webRTC API isn’t exactly the easiest one to use. Not necessarily the client side of things (there are some excellent tutorials on the web)… it was more the signalling server that needs some work
- This would be awesome on mobiles… it would add such a cool and useful level of interactively to your HTML5 apps, since it all is written in HTML and javascript
Researching how to best build a simple, easy proof of concept HTML5 app that uses webRTC lead me down an interesting road. In the end, with the right tools, it took just 15 minutes to build an android app that uses webRTC to place a call between my Nexus phone and my Samsung tablet, with my PC acting as a signalling server.
It took 3 easy steps:
1. WebRTC made easy with PEERJS
PeerJS took away all the pain of using webRTC and abstracts the webRTC API in an easy to use manner. They even provide code for a webRTC server based on node.js. So all I needed to do was download their server code from here:
https://github.com/peers/peerjs-server
And run it (with defaults!), After familiarizing yourself with the API, the best way to see PeerJS in action and learn it is to snoop around their awesome demo page here:
For the purposes of this demo, I shamelessly plugged the above demo for all my clients…. So I now had both client code and server code (5 minutes and counting)
2. Crosswalk to the (mobile) rescue
When researching webRTC, you quickly realize that browser compatibility is going to be a problem. There’s a really good site on webRTC compatibility here:
Running this on android is going to be a challenge, because while chrome will support webRTC, the default webkit engine that powers your run-of-the-mill HTML5 apps will not… so you’re stumped. Enter Intel’s CROSSWALK. While currently only android v4.x, crosswalk will run your HTML5 in a customized chromium engine called Blink, rather than the default android webkit engine. This may not sound like much, but all of a sudden, all the new features you miss in webkit, like websockets or webRTC, become available to you! To make things sweeter, Intel XDK allows you to easily build crosswalk apps from a single IDE.
Armed with crosswalk and Intel XDK, it’s child’s play to copy/paste the peerJS code into your app, as well as download and reference the necessary javascript and css. The only tweak necessary was to point my clients to my private PeerJS server, rather than use the PeerJS cloud server (5 minutes into the PoC…)
3. Build, and fire everything up…
As I mentioned in my previous posts, building an app in Intel XDK is quite painless. To build for crosswalk, simply select the “crosswalk” option in the build tab. This will provide you with an APK. Send this to your client devices, and fire up the PeerJS server (if using your own), then try everything out…. (another 5 minutes… bringing us to 15 mintues)
The results are perfect…. below you can see a (silly) screenshot of me running the PoC app on my Samsung tablet (video feed at the bottom) while calling my Nexus phone (video feed at the top)
webRTC in 3 steps….. you have to be in awe of what browsers and the clever people who create tools and libraries like webRTC, crosswalk and peerJS can do!!
References:
- PeerJS: http://peerjs.com/
- Crosswalk: https://crosswalk-project.org/
David Vassallo's Blog 
Great read ! I did not know about crosswalk. I will probably need it while extending my application for mobile platforms. Thankyou
Hi David, I tried this in IntelXDK, compiled with Crosswalk, but I’m not getting any video feeds, it’s almost like the Crosswalk webview isn’t really kicking in. Also strange that the build in XDK demo example also does the same thing. I can see people joining room but that’s it no video feeds. Trying Supersonic/Steroids next to try to find a solution, but would love to hear more from you on your Android/webRTC experience.