Mobile HTML5 Use-Cases: CoreMob Camera App Explained

Tomomi Imura, @girlie_mac

Mobile HTML5
Use-Cases:
Coremob
Camera

Coremob Camera app on Android

Hello

my name is

Tomomi

@girlie_mac
HTML5

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

Project Goals

  1. Showcase the capabilities of the Web platform
    ウェブプラットフォームで何ができるかを紹介
  2. Educate Web developers
    ウェブディベロッパのみんなにも知ってもらう
  3. Help improve browsers
    ブラウザを良くするのを助ける

HTML Media Capture

Coremob Camera app

Taking a photo with using a native camera
デバイスのカメラで写真を撮る

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

// New
<input type="file" accept="image/*" capture>
18
3
10
2.1
6**
10**
10**

** Partial support: 'capture' attr not supported

File API

Returning the photo as a file object
撮った写真を file オブジェクトとしてかえす 

		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

Coremob Camera app

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);
7
9

Canvas Pixel Manipulation

canvas diagram

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;
}

IndexedDB

Coremob Camera app

Storing the photos locally
ブラウザに写真を保存 

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

IndexedDB

Chrome 18 and BlackBerry requires the webkit prefix.

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

"Basic" Async iDB Support
ごく基本的な非同期 iDB サポート

18*
25
10*
16
10

IndexedDB:
Spotty Browser Support

XMLHttpRequest Level 2

Coremob Camera app

Sending a photo
写真の送信


var formData = new FormData();
formData.append('photo', blob);
3
5
10
12

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

Coremob Camera app

Sending a photo


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

CORS:
Cross Origin Resource Sharing

Access-Control-Allow-Origin: http://some-domain.org 

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

Touch Events v.1

Coremob Camera app

Photo Gallery Carousel
フォトギャラリーのカルーセルパネル UI


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

Micorsoft Pointer event diagram

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);
}
10

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

More...

PhoneGap

Windows Phone 8

HTML5 + Native
HTML5 とネイティブ

Filling the gap of missing HTML5 features
未サポートの HTML5 機能との溝を埋める


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

Thank you!

Tomomi Imura

Fork me on Github