How to get Google Glass, Cordova, HTML5 APIs Working (WebRTC, WebSockets).

by | Mar 27, 2014 | Innovations

One of the challenges I’ve noticed when developing with Cordova hybrid apps is the lack of support for the HTML5 APIs that work on desktop devices but not the default Android browser (Ice cream sandwich, Jelly bean) like webSockets and WebRTC.

Now, Google Glass currently runs on Android 4.0.3 Ice cream sandwich  and from the rumours circulating around the next update fingers crossed will put us onto 4.4 KitKat. (Can’t Wait!!)

The problem with Android 4.0.3 is that its running an old edition of WebKit customised to support Google Glass and added gesture support. Unfortunately if you’re developing rich internet applications with Cordova and want to use the latest support HTML5 techniques supported by desktop browser today – you just can’t as Cordova uses the default browser that is part of android..

Read on to find out how to get HTML5 APIs working with Cordova.

There are plugins out there ie here’s one for WebSockets.

Now for those looking purely for WebRTC support you could setup appRTC but I’ve seen a lot of bugs and issues reported with using this on glass. Another option would be to look at Addlive and try out their SDK which you can see working here with Google Glass.

A third option which I’ve gone for is to package Chromium with Cordova and use it as the default browser as it supports the majority of HTML5 APIs (ie – WebSockets, WebRTC and more..).

To do this there is a project called Crosswalk that’s designed for HTML5 mobile apps to bring in support for chromium with the blink engine on Android 4.x+.

I’ve used this with 3 custom apps I’ve built and it works great with Glass and cordova! Now when Glass KitKat arrives you should have the use of the Chromium browser as the default browser with cordova without the need to package Crosswalk. Although this does have the added benefit of blink and if you are like me and have created a single Android app to support 4.x+ devices I feel it just makes sense to spend that extra time to get Crosswalk packaged in with your app.

Here’s a quick simple example of getting your webcam from either your phone or glass to stream into the app/browser viewport.

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">

	<title>Video Cam Display</title>
</head>
<body>

	<video />

<script src='js/lib/adapter.js'></script>
<script>
	var constraints = {
		video : true
	};

	function successCallback(stream) {
		window.stream = stream;
		// stream available to console
		var video = document.querySelector("video");
		video.src = window.URL.createObjectURL(stream);
		video.play();
	}

	function errorCallback(error) {
		console.log("getUserMedia error: ", error);
	}

	getUserMedia(constraints, successCallback, errorCallback);
</script>

</body>
</html>

You can grab the adapter js file -from https://code.google.com/p/webrtc/source/browse/stable/samples/js/base/adapter.js
This provides additional browser support for WebRTC.

Tip
For those using Glass make sure to update the constraints to prevent overheating and lag by reducing frame-rate and camera size.

You can play around with constraints by editing the values from here:  http://src.chromium.org/svn/trunk/src/chrome/test/data/webrtc/manual/constraints.html