About these ads

David Vassallo's Blog

If at first you don't succeed; call it version 1.0

Got 15 minutes? Easy webRTC android app in 3 steps!


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:

http://www.webrtc.org/demo

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:

  1. 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
  2. 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.

crosswalk-peerjs

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:

https://developer.cdn.mozilla.net/media/uploads/demos/m/i/michelle/455adab3bb8eb670bc5b1f7d71f403d0/peerjs_1379911151_demo_package/videochat.html

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:

http://iswebrtcreadyyet.com/

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)

2014-02-06 07.26.44

 

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:

About these ads

One response to “Got 15 minutes? Easy webRTC android app in 3 steps!

  1. Glider June 27, 2014 at 12:38 pm

    Great read ! I did not know about crosswalk. I will probably need it while extending my application for mobile platforms. Thankyou

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 162 other followers

%d bloggers like this: