CoreMob Camera App:
Real Life HTML5 Use Cases for Mobile

• Mobile Front-end, UI/UX Developer
• Open Web Advocate at Nokia
• Formally at Palm webOS, Yahoo! Mobile etc.
• HTTP Status Cats lady

More...

• Listening music, watching movies
• Searching & browsing web
• Chat, video calls
• Note taking (Text, voice, camera input)
• Scanning, OCR, Translations (AR)
• etc.

iphonelife.com

Core Mobile Web Platform CG

Goal:

To accelerate the adoption of the Mobile Web as a compelling platform for the development of modern mobile Web applications

http://coremob.github.com/coremob-2012/

Core Mobile Web Platform CG

1. Agree on core features developers can depend on
2. Compile related conformance test suites
3. Provide use cases, scenarios, and other input to drive successful mobile deployment

http://coremob.github.com/coremob-2012/

Project Goals

1. Showcase the capabilities of the Web platform
2. Educate Web developers
3. Help improve browsers

Watch the Video: http://sdrv.ms/UF55gM

HTML Media Capture

Taking a photo with using a native camera

		
<input type="file" accept="image/*" 
                           capture="camera">
// New spec
<input type="file" accept="image/*" capture>
		
		

File API

Returning the photo as a file object

		var input = document.querySelector('input[type=file]'); 
camera.addEventListener('change', function() {
    var localFile = input.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(localFile);
    reader.onload = function(e){
        preview.src = e.target.result;
    }
}, false);
		
		

Canvas

Applying filters to the photo

		
var c = document.createElement('canvas');
var ctx = this.c.getContext('2d');
ctx.drawImage(imgObj, 0, 0);
var imgData = ctx.getImageData(x, y, w, h); 
//...Pixel manipulation ...
ctx.putImageData(imgData, 0, 0); 
		
		

Canvas Pixel Manipulation

Canvas Pixel Manipulation

// Grayscale using CIE 1931 luminance
var d = imgData.data;
for (var i = 0; i < d.length; i += 4) {
    var r = d[i];
    var g = d[i + 1];
	var b = d[i + 2];
	var avg = 0.2126*r + 0.7152*g + 0.0722*b;
	d[i] = d[i + 1] = d[i + 2] = avg;
}
		
		

canvas.toBlob

Converting the filtered photo (canvas) to blob

if (canvas.toBlob) {
    var blob = canvas.toBlob(function(blob){
        // async callback
    }, 'image/jpeg');
}
		

Blob URLs

Displaying Blob

var URL = window.URL || window.webkitURL*;
var imgURL = URL.createObjectURL(blob);
		

IndexedDB

Storing the photos locally

		
if(window.indexedDB) {
   var req = indexedDB.open('coremobCamera'); 
   req.onsuccess = function(e) {
      // async
   }
} 
		
		

IndexedDB

Chrome 18 and BlackBerry requires the webkit prefix.

		
var indexedDB = window.indexedDB || window.webkitIndexedDB;

		
		

"Basic" Async iDB Support

IndexedDB:
Spotty Browser Support

• Safari and Opera (presto) do not support at all
• Chrome <24, Firefox <13, and BB 10 use deprecated specs
• setVersion() vs. onupgradeneeded
• IDBTransaction.READ_WRITE vs. "readwrite"
• Chrome & Opera (blink) does not support blob

XMLHttpRequest Level 2

Sending a photo

var formData = new FormData();
formData.append('photo', blob); 
		

XMLHttpRequest Level 2

Sending a photo

var xhr = new XMLHttpRequest();        
xhr.open('POST', '/gallery'); 
xhr.upload.addEventListener('progress', handleProgress, false);
xhr.addEventListener('load', handleFinish, false);
xhr.addEventListener('error', handleError, false);
xhr.addEventListener('abort', handleAbort, false);
xhr.send(formData);
		

XMLHttpRequest Level 2

Sending a photo

function handleProgress(e) { 
  if (e.lengthComputable) {
     el.textContent = 
     (e.loaded / e.total * 100) >>> 0 + '%';
  } 
}
		

CORS:
Cross Origin Resource Sharing

//Apache .htaccess
<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>
		

Touch Events v.1

Photo Gallery Carousel

el.addEventListener('touchstart', 
                    startHandler, false);
el.addEventListener('touchmove'...);
el.addEventListener('touchend'...);
		

You probably want to include mouse events too (mousedown, mousemove, and mouseup).

Pointer Events

For any input devices: touch, mouse, pen...

if (navigator.pointerEnabled) {
    el.addEventListener('pointerdown', 
                         startHandler, false);
    el.addEventListener('pointermove', ...);
    el.addEventListener('pointerup', ...);
}
		

Pointer Events

Only IE10 supports so far...

if (navigator.msPointerEnabled) {
    el.addEventListener('MSPointerDown', startHandler, false);
    el.addEventListener('MSPointerMove', moveHandler, false);
    el.addEventListener('MSPointerUp', endHandler, false);
}
		

** Experimental Chromium build (26.0.1409.0) - no vendor prefix

More...

• History API (popstate event)
• Screen Orientation API (orientationchange event)
• CSS3 Transforms and Animations
• Web Fonts (@font-face)
• hidden attribute
• data-* custom attribute

PhoneGap

HTML5 + Native

Filling the gap of missing HTML5 features

github.com/coremob/camera

coremob.github.io/camera/vanilla/index.html
goo.gl/My8mf

Thank you!

Tomomi Imura

• girliemac.com
• twitter.com/girlie_mac
• github.com/girliemac
• github.com/coremob/camera