HTML5 APIを使ったデモとソースの解説秋葉秀樹

第3回Tizen勉強会 #TizenJP #HTML5J #Firefoxosjp #MeeGoJP

自己紹介

秋葉秀樹フリーランスのデザイナーIllustrator, Photoshop, Flash, ActionScriptHTML, CSS, JavaScript, Web Direction3DCG（Lightwave, Shade）, Movie

自論「すべてのモノ作りは人に還る」

執筆書籍

自主制作

http://grad3.ecoloniq.jp/

カメラにアクセス

電池残量を取得

振動を鳴らす

位置情報を取得

ベンダープリフィックス

現状HTML5 API関連は策定中なので、

各ブラウザでは接頭辞付きの記述をしている

カメラにアクセス

getUserMedia API MediaCapture API

ストリームをvideo要素で再生 input要素を拡張

Android 2.xだとFirefox

Android 4.xだと標準ブラウザ、Chrome

Android 2.xだとOpera12で標準実装

デスクトップ版Chrome、Firefox Nightlyなど

カメラにアクセス

getUserMedia API

navigator.getUserMedia(　{video:true},　function (stream) { // 成功時の処理 },

function (stream) { // 失敗時の処理 }

)

DEMO

Chromeなどは現在ベンダープリフィックスが必要。

カメラにアクセス

getUserMedia API

DEMO

撮影した画像を編集するにはcanvas要素!

画像に対しコントラストやぼかしなどフィルターをかける

画像はBase64文字列で保存することができる

ctx.drawImage(video, 0, 0);

var video = document.querySelector("video");var canvas = document.querySelector("canvas");var ctx = canvas.getContext("2d"); navigator.getUserMedia( {video: true}, function (stream){ video.src = window.webkitURL.createObjectURL(stream); setInterval(function (){ ctx.drawImage(video, 0, 0); }, 100); }, function (){ /* エラーーーーー */}

);

// 成功時

カメラにアクセス

カメラにアクセス

getUserMedia API

策定中のCSSは、画像をぼかすことも

contrast(1000%)brightness(50%)

filter:invert();

現在ベンダープリフィックスが必要。

hue-rotate(180deg)sepia()saturate(300%)

カメラにアクセス

DEMO

フォームなどで使うinput要素でカメラにアクセス

ユーザが要素をタップするだけでデフォルトのカメラ画面に切り替わる。

撮影が終了したら、HTMLのform要素のファイルとしてサーバに送ること

ができる。

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

MediaCapture API

位置情報を取得

位置情報を取得する

getCurrentPositionだと一回、watchPositionだと定期的に位置取得。仕様では高度、方角、速度、誤差、高度誤差などがある。

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,option

);

Geolocation API

位置情報を取得

DEMO

位置情報を取得する

Geolocation API

「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ

電池残量を取得

DEMO

電池残量だけでなく、充電ステータスも取得

・充電コネクタがさされたとき、外されたときのイベントがとれる・現在充電中なのかそうでないのか、残量が変化した瞬間のイベントもとれる現在ベンダープリフィックスが必要。

var battery = navigator.battery;　alert( "残量は" + battery.level * 100 + "%" )

Battery Status API

振動を鳴らす

DEMO

フォーム未入力エラーを振動で知らせる

配列は、振動時間と休みの時間を交互にいれていく。現在ベンダープリフィックスが必要。

navigator.vibrate([200, 100, 500, 100]);

Vibration API

https://wiki.mozilla.org/WebAPI

セッション中に情報いただきました

Hidetaro7@Twitter

blog: http://akibahideki.com/blog/

Thanks :)