HTML5 Mobile: Mobile Loves JS

Hardware Access and Device APIs

Tomomi Imura, @girlie_mac

Mobile ♥ JavaScript

Hardware Access & Device APIs

Tomomi Imura

May 29, 2013 @JS Conf

JS

Hello

my name is

Tomomi

@girlie_mac
HTTP Status Cats
HTML5
Mobile

URI Schemes: Making a Call

		
<a href="tel:+14155557777">
  Order Pizza Now!
</a>

<a href="sms:+14155558888?body=O%20Hai">
  Text me!
</a>

		

URI Schemes: UX

Geolocation

Hardware has more than a few ways to detect your location:

Geolocation

		
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, fail);
}

function success(position) {
  alert('Latitude: '+ position.coords.latitude + 
  ', Longitude: '+ position.coords.longitude);
}
		

Access Permission

Device Orientation Events

DOM events for obtaining information about the physical orientation and movement of the hosting device

Device Orientation Events

Events:
deviceorientation, devicemotion, compassneedscalibration

Dev Opera (Diagram)

Device Orientation Events Demo

Watch the demo video on Vemeo: http://player.vimeo.com/video/51157652

Try it on supported browsers: http://goo.gl/5Cj4d


if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(e) {
    a = Math.floor(e.alpha);
	b = Math.floor(e.beta);
	g = Math.floor(e.gamma);
	el.style.transform = 'rotateZ('+a+'deg) 
	                   rotateX('+b+'deg) rotateY('+g+'deg)';
 ... }, true);
} 
		
4.2
3.0
18
10
14
12
2.1

User Cases

Can we re-create this iOS app in HTML5/JS?

http://pizza-compass.com/

Pizza Compass in JavaScript

  1. Get location - navigator.geolocation
  2. Use compass - deviceorientation event (use alpha)
  3. Order a pizza - tel: URI scheme

Media Capture and Streams API

"Web Real Time Communications"


var gum = navigator.getUserMedia ||
    navigator.mozGetUserMedia||navigator.webkitGetUserMedia;
          
navigator.getUserMedia({video: true, audio: true}, 
    	                     successCallback, errorCallback);
		
10
26*
17*
2.1*

** not supported by Opera 14 for Android (WebKit)

on Chrome 27 for Android

The super silly demo: RespongeBob Web / Make Me Bob!

HTML Media Capture


<!-- Current implementation (if supported) -->
<input type="file" accept="image/*" capture="camera">

<!-- Newly proposed specification -->
<input type="file" accept="image/*" capture>
		
18
3
10
2.1
6**
10**
10**

** Partial support: 'capture' attr not supported

Watch the demo video: http://sdrv.ms/UF55gM

Github: Coremob Camera: https://github.com/coremob/camera

Camera App in HTML5

  1. Take a picture with the native camera via HTML Media Capture
  2. The camera returns the pictures as a File object from FileReader()
  3. drawImage() to draw the image object in canvas
  4. getImageData() to obtain an ImageData object containing a copy of the pixel data for a context, then tweak the pixels (filter effect)
  5. canvas.toBlob() to store the blob locally with IndexedDB*
  6. Upload the final photo with XHR2/CORS

Battery Status API


var battery = navigator.battery || navigator.webkitBattery;

battery.addEventListener('chargingchange', updateStatus);  
battery.addEventListener('levelchange', updateStatus);

function updateStatus() {  
  alert('Battery status: ' + battery.level * 100 + ' %');  
  if (battery.charging) {
    alert('Battery is charging...');   
  }
}  
		
14*
16
2.1*

Battery Status API

Photo: demo on Firefox on Galaxy Nexus

http://goo.gl/V1n6h (Pictured: Firefox)

Vibration API


var vibrate = navigator.vibrate || navigator.mozVibrate;

vibrate(1000); // vibrate for 1sec

vibrate([1000, 500, 2000]);
// vibrates for 1sec, still for 0.5 seconds, 
// and vibrates again for 2sec
		
14*
16
2.1

Demo on JSFiddle: http://goo.gl/EWPmL

Ambient Light Events


window.addEventListener('devicelight', function(e) {
   alert(e.value); // value in double
});		
		
returned value (in lux)My Observation on Galaxy Nexus
< 400Indoor
400-1000Office lighting. Outdoor (in foggy San Francisco)
> 1000Outdoor daylight (anywhere else in California)
15

Ambient Light Events


window.addEventListener('lightlevel', function(e) {
   alert(e.value); // value in string
});		
		
returned valueIlluminanceDescription
dim< 50 luxdark enough that the light produced by a white background is eye-straining or distracting
normal50-10000 luxoffice building hallway, very dark overcast day, office lighting, sunrise or sunset on a clear day, overcast day, or similar
bright> 10000 luxdirect sunlight, or similarly bright conditions that make it hard to see things that aren't high-contrast
*Currently no browser supports

Light Sensor Demo

Watch the demo video on Vemeo: http://player.vimeo.com/video/51322638

Try it on Firefox Mobile: http://goo.gl/WynKX

Proximity Events

The distance of a nearby physical object using the proximity sensor of a device.

Events: deviceproximity and userproximity


window.addEventListener('deviceproximity', function(e) {
   alert(e.value);
});		
		

More...

Uncertain APIs

Bye-bye Web Intents

Hello, Web Activities?

Thank you!

Tomomi Imura

Notes

People, who has not attended my talks but stumbled upon my slides sometimes complains (in passive-aggressive manner) that my browser stats are wrong - I have to tell you that all the browsers I am talking about are mobile!
Even if you are so sure that certain features are supported on desktop, it may not be true for the mobile version.
If you spot my mistakes on mobile browsers, just let me know :-)

xoxo,
Tomomi (@girlie_mac)

Fork me on Github