Opera Mobile for...

紙芝居でレッツ省エネ

みえない？

ご理解とご協力をお願いします！

Opera Mobile for Androidのカメラサポートをつかって Webコンテンツにカメラ機能をつけてみたお話

あっきぃ

d.hatena.ne.jp/Akkieso8

どうもAndroidユーザーさん…

•  みなさま、AndroidのWebブラウザには何をお使いでしょうか – 標準 – Firefox – Opera –  ......

•  PCではいまいち？？なOperaですが、Mobile版はいいかんじで愛用中です

Na?ve webcam support

•  HTML5の<video>タグを使ってAndroid端末についているカメラから映像をリアルタイム取得

•  hKp://my.opera.com/core/blog/2011/03/23/webcam-‐orienta?on-‐preview

•  わりとシンプルなコードを書くだけで映像が取得できるよ

<!DOCTYPE html> <video autoplay id=“cam”></video> <div id=“message”></div>

<script type=“text/javascript”> var video = document.getElementById(’cam’); var message = document.getElementById(’message’); if(navigator.getUserMedia) { navigator.getUserMedia(‘video’, successCallback, errorCallback); func?on successCallback( stream ) { video.src = stream; } func?on errorCallback( error ) { message.textContent = “えらー: [CODE ” + error.code + “]”; } } else { message.textContent = “Na?ve web camera streaming はこのブラウザではつかえません"; } </script>

写メ(カメラ)機能を実装しよう

•  カメラストリーミングを開始 •  シャッターボタンが押されたら – audio要素でシャッター音を鳴らす

– canvas要素に映像をコピー –  {確認|撮り直し}ボタンを出す

•  canvas要素をデータURLで画像データ化 – canvas.toDataURL()　を使用

•  適当に投稿する

実装例

•  koHaiku test版 ( hKp://8639.tk/5820/ ) – はてなハイクの俺俺クライアント – モバイル用途に特化

•  はてなハイクはミニブログサービス

•  ハイクには専用クライアントが無いため、モバイル環境からの写真投稿は現状メールのみ – 面倒くさいので撮ってすぐ投稿したいので実装してみた

撮影画面(<video>タグ)

確認画面(<canvas>タグ)

あとはてきとうにコメント

Haiku!

課題・問題点

•  toDataURLは現状pngのみらしい – 送信時はあきらめてpngで送信にして、サーバーサイドでJPEGに変換・投稿するようにした

•  モラル的な問題 – シャッター音は自分で実装しないといけないので、実装しなければ無音カメラができてしまう

– 実装しても、マナーモードでは無音カメラと化す

– ちなみに実装例のシャッター音はミクさん(「はいチーズ」を自作)

期待

•  HTML5のカメラ系の実装はまちまちらしい（きょうFirefoxブースで聞いた） – たとえば、Android 3.0ではMedia Capture APIを利用すると、inputタグを書くだけでカメラ連携できる

– でも世の中のガラスマはだいたい2.xだし! – 現在開発中のFirefox for Androidもinputつかえた

•  規格ができて、どのブラウザでも簡単にカメラ連携できるようになったら楽しそうだなー (　｀ω´ )

おわり

Opera Mobile for...

Self Improvement

Transcript of Opera Mobile for...