Downloaded 12 times
![振動を鳴らす
Vibration API
フォーム未入力エラーを振動で知らせる
navigator.vibrate([200, 100, 500, 100]);
配列は、振動時間と休みの時間を交互にいれていく。
現在ベンダープリフィックスが必要。
O
D EM](https://image.slidesharecdn.com/tizenakiba20120825-120825012342-phpapp01/85/HTML5-API-15-320.jpg)
HTML5 APIを使ったデモとソースの解説
- 1. HTML5 APIを使ったデモとソースの解説 秋葉秀樹 第3回Tizen勉強会 #TizenJP #HTML5J #Firefoxosjp #MeeGoJP
- 2. 自己紹介 秋葉秀樹 フリーランスのデザイナー Illustrator, Photoshop, Flash, ActionScript HTML, CSS, JavaScript, Web Direction 3DCG（Lightwave, Shade）, Movie 執筆書籍 自論「すべてのモノ作りは人に還る」
- 3.
- 4.
- 5.
- 6. カメラにアクセス getUserMediaAPI MediaCapture API ストリームをvideo要素で再生 input要素を拡張 Android 2.xだとOpera12で標準実装 Android 2.xだとFirefox デスクトップ版Chrome、Firefox Nightlyなど Android 4.xだと標準ブラウザ、Chrome
- 7. カメラにアクセス getUserMedia API navigator.getUserMedia( {video:true}, function (stream) { // 成功時の処理 }, function (stream) { // 失敗時の処理 } ) Chromeなどは現在ベンダープリフィックスが必要。 O D EM
- 8. カメラにアクセス getUserMedia API 撮影した画像を編集するにはcanvas要素! ctx.drawImage(video, 0, 0); 画像に対しコントラストやぼかしなどフィルターをかける 画像はBase64文字列で保存することができる O D EM
- 9. カメラにアクセス 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 (){ /* エラーーーーー */} );
- 10. カメラにアクセス getUserMedia API 策定中のCSSは、画像をぼかすことも filter:invert(); contrast(1000%) hue-rotate(180deg) brightness(50%) sepia() saturate(300%) 現在ベンダープリフィックスが必要。
- 11. カメラにアクセス MediaCapture API フォームなどで使うinput要素でカメラにアクセス <input type="file" accept="image/*; capture=camera"> ユーザが要素をタップするだけでデフォルトのカメラ画面に切り替わる。 撮影が終了したら、HTMLのform要素のファイルとしてサーバに送ること ができる。 O D EM
- 12. 位置情報を取得 GeolocationAPI 位置情報を取得する navigator.geolocation.getCurrentPosition( successCallback, errorCallback, option ); getCurrentPositionだと一回、watchPositionだと定期的に位置取得。 仕様では高度、方角、速度、誤差、高度誤差などがある。
- 13. 位置情報を取得 Geolocation API 位置情報を取得する 「ここ」「どこ」があると 「地図を起動します」と発声してGoogleMapを表示するデモ O D EM
- 14. 電池残量を取得 Battery StatusAPI 電池残量だけでなく、充電ステータスも取得 var battery = navigator.battery; alert( "残量は" + battery.level * 100 + "%" ) ・充電コネクタがさされたとき、外されたときのイベントがとれる ・現在充電中なのかそうでないのか、残量が変化した瞬間のイベントもとれる 現在ベンダープリフィックスが必要。 O D EM
- 15. 振動を鳴らす Vibration API フォーム未入力エラーを振動で知らせる navigator.vibrate([200, 100, 500, 100]); 配列は、振動時間と休みの時間を交互にいれていく。 現在ベンダープリフィックスが必要。 O D EM
- 16.
- 17.