Mobile HTML5 Use-Cases: CoreMob Camera App Explained (English & Japanese)

From my talk at W3C Developer Meetup in Tokyo on June 8, 2013.
I am explaining about the W3C Coremob Camera project I've done to showcase the use-cases of HTML5 JavaScript APIs.

The HTML version of the slide deck (the original I used for my talk) is also available at https://dl.dropboxusercontent.com/u/1330446/presentation-slides/html5-mobile-usecases/jp.html

Transcript

1. Mobile HTML5 Use-Cases: Coremob Camera
2. H E L L O M Y N A M E I S Tomomi @girlie_mac 02
4. Watch the Video: http://sdrv.ms/UF55gM 1:18 04
5. Project Goals 1. Showcase the capabilities of the Web platform ÁÂõö áçôÄß Š cw x−v³â∙ 2. Educate Web developers ÁÂõå½ù áð”Ƶ¶•Ø−›–Øœq 3. Help improve browsers õ ÁÒ³¹z¡−”³̨¦− 05
6. HTML Media Capture Taking a photo with using a native camera åï¾Õ”ÇŸ .³„− < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * " c a p t u r e = " c a m e r a " > / / N e w < i n p u t t y p e = " f i l e " a c c e p t = " i m a g e / * " c a p t u r e > 18 3 10 2.1 6** 10** 06
7. File API Returning the photo as a f i l e object „›¤ .³ f i l e ÅõÔÂËç |–vs¡ v a r i n p u t = d o c u m e n t . q u e r y S e l e c t o r ( ' i n p u t [ t y p e = f i l e ] ' ) ; c a m e r a . a d d E v e n t L i s t e n e r ( ' c h a n g e ' , f u n c t i o n ( ) { v a r l o c a l F i l e = i n p u t . f i l e s [ 0 ] ; v a r r e a d e r = n e w F i l e R e a d e r ( ) ; r e a d e r . r e a d A s D a t a U R L ( l o c a l F i l e ) ; r e a d e r . o n l o a d = f u n c t i o n ( e ) { p r e v i e w . s r c = e . t a r g e t . r e s u l t ; } } , f a l s e ) ; 07
8. Canvas Applying filters to the photo .•ô½ ܳv¦− v a r c = d o c u m e n t . c r e a t e E l e m e n t ( ' c a n v a s ' ) ; v a r c t x = t h i s . c . g e t C o n t e x t ( ' 2 d ' ) ; c t x . d r a w I m a g e ( i m g O b j , 0 , 0 ) ; v a r i m g D a t a = c t x . g e t I m a g e D a t a ( x , y , w , h ) ; / / . . . P i x e l m a n i p u l a t i o n . . . c t x . p u t I m a g e D a t a ( i m g D a t a , 0 , 0 ) ; 7 9 08
9. Canvas Pixel Manipulation 09
10. Canvas Pixel Manipulation / / G r a y s c a l e u s i n g C I E 1 9 3 1 l u m i n a n c e v a r d = i m g D a t a . d a t a ; f o r ( v a r i = 0 ; i < d . l e n g t h ; i + = 4 ) { v a r r = d [ i ] ; v a r g = d [ i + 1 ] ; v a r b = d [ i + 2 ] ; v a r a v g = 0 . 2 1 2 6 * r + 0 . 7 1 5 2 * g + 0 . 0 7 2 2 * b ; d [ i ] = d [ i + 1 ] = d [ i + 2 ] = a v g ; } 10
11. IndexedDB Storing the photos locally õ ÁÒ• .³ZB i f ( w i n d o w . i n d e x e d D B ) { v a r r e q = i n d e x e d D B . o p e n ( ' c o r e m o b D B ' ) ; r e q . o n s u c c e s s = f u n c t i o n ( e ) { / / a s y n c } } 11
12. IndexedDB Chrome 18 and BlackBerry requires the webkit prefix. v a r i n d e x e d D B = w i n d o w . i n d e x e d D B | | w i n d o w . w e b k i t I n d e x e d D B ; "Basic" Async iDB Support ’zQ©O¶øœ] iDB Ñýß ç 18* 25 10* 16 10 12
13. IndexedDB: Spotty Browser Support • Safari and Opera do not support • Chrome <24, Firefox <13, and BB 10 use deprecated specsÀ ̂oÕúáËÁ • s e t V e r s i o n ( ) vs. o n u p g r a d e n e e d e d • I D B T r a n s a c t i o n . R E A D _ W R I T E vs. " r e a d w r i t e " • Chrome (any versions) does not support b l o b 13
14. XMLHttpRequest Level 2 Sending a photo .”# v a r f o r m D a t a = n e w F o r m D a t a ( ) ; f o r m D a t a . a p p e n d ( ' p h o t o ' , b l o b ) ; 3 5 10 12 14
15. XMLHttpRequest Level 2 Sending a photo v a r x h r = n e w X M L H t t p R e q u e s t ( ) ; x h r . o p e n ( ' P O S T ' , ' / g a l l e r y ' ) ; x h r . u p l o a d . a d d E v e n t L i s t e n e r ( ' p r o g r e s s ' , h a n d l e P r o g r e s s , f a l s e ) x h r . a d d E v e n t L i s t e n e r ( ' l o a d ' , h a n d l e F i n i s h , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' e r r o r ' , h a n d l e E r r o r , f a l s e ) ; x h r . a d d E v e n t L i s t e n e r ( ' a b o r t ' , h a n d l e A b o r t , f a l s e ) ; x h r . s e n d ( f o r m D a t a ) ; 15
16. XMLHttpRequest Level 2 Sending a photo f u n c t i o n h a n d l e P r o g r e s s ( e ) { i f ( e . l e n g t h C o m p u t a b l e ) { e l . t e x t C o n t e n t = ( e . l o a d e d / e . t o t a l * 1 0 0 ) > > > 0 + ' % ' ; } } 16
17. CORS: Cross Origin Resource Sharing A c c e s s - C o n t r o l - A l l o w - O r i g i n : h t t p : / / s o m e - d o m a i n . o r g / / A p a c h e . h t a c c e s s < I f M o d u l e m o d _ h e a d e r s . c > H e a d e r s e t A c c e s s - C o n t r o l - A l l o w - O r i g i n " * " < / I f M o d u l e > 12 17
18. Touch Events v.1 Photo Gallery Carousel ôÄçÊ‾ ß ”Ç ß × ðì UI e l . a d d E v e n t L i s t e n e r ( ' t o u c h s t a r t ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' t o u c h m o v e ' . . . ) ; e l . a d d E v e n t L i s t e n e r ( ' t o u c h e n d ' . . . ) ; You probably want to include mouse events too ( m o u s e d o w n, m o u s e m o v e, and m o u s e u p). 18
19. Pointer Events For any input devices: touch, mouse, pen... mœı−¾ öáçÀ ÜáÞ þÁÕ ú Á i f ( n a v i g a t o r . p o i n t e r E n a b l e d ) { e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r d o w n ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r m o v e ' , . . . ) ; e l . a d d E v e n t L i s t e n e r ( ' p o i n t e r u p ' , . . . ) ; } 19
20. Pointer Events Only IE10 supports so far... i f ( n a v i g a t o r . m s P o i n t e r E n a b l e d ) { e l . a d d E v e n t L i s t e n e r ( ' M S P o i n t e r D o w n ' , s t a r t H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' M S P o i n t e r M o v e ' , m o v e H a n d l e r , f a l s e ) ; e l . a d d E v e n t L i s t e n e r ( ' M S P o i n t e r U p ' , e n d H a n d l e r , f a l s e ) ; } 10 ** Experimental Chromium build (26.0.1409.0) - no vendor prefix 20
21. More... • History API ( p o p s t a t e event) • Screen Orientation API ( o r i e n t a t i o n c h a n g e event) • CSS3 Transforms and Animations • Web Fonts ( @ f o n t - f a c e) • h i d d e n attribute • d a t a - * custom attribute 21
22. PhoneGap HTML5 + Native HTML5 ì¾ä½õ Filling the gap of missing HTML5 features ÜÑýß ç” HTML5 ̀ ”ü³¹Ł− 22
23. github.com/coremob/camera  23
24. coremob.github.io/camera/vanilla/index.html goo.gl/My8mf 24
25. Thank you! Tomomi Imura • girliemac.com • twitter.com/girlie_mac • github.com/girliemac • github.com/coremob/camera 25