opera mobile for...
DESCRIPTION
OSC2012 Tokyo/Spring 1日目の懇親会で"紙芝居で"発表したものの電子版。TRANSCRIPT
![Page 1: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/1.jpg)
紙芝居でレッツ省エネ
![Page 2: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/2.jpg)
みえない?
![Page 3: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/3.jpg)
ご理解とご協力をお願いします!
![Page 4: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/4.jpg)
Opera Mobile for Androidの カメラサポートをつかって Webコンテンツに カメラ機能をつけてみたお話
あっきぃ
d.hatena.ne.jp/Akkieso8
![Page 5: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/5.jpg)
どうもAndroidユーザーさん…
• みなさま、AndroidのWebブラウザには何をお使いでしょうか – 標準 – Firefox – Opera – ......
• PCではいまいち??なOperaですが、Mobile版はいいかんじで愛用中です
![Page 6: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/6.jpg)
Na?ve webcam support
• HTML5の<video>タグを使ってAndroid端末についているカメラから映像をリアルタイム取得
• hKp://my.opera.com/core/blog/2011/03/23/webcam-‐orienta?on-‐preview
• わりとシンプルなコードを書くだけで映像が取得できるよ
![Page 7: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/7.jpg)
<!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>
![Page 8: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/8.jpg)
写メ(カメラ)機能を実装しよう
• カメラストリーミングを開始 • シャッターボタンが押されたら – audio要素でシャッター音を鳴らす
– canvas要素に映像をコピー – {確認|撮り直し}ボタンを出す
• canvas要素をデータURLで画像データ化 – canvas.toDataURL() を使用
• 適当に投稿する
![Page 9: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/9.jpg)
実装例
• koHaiku test版 ( hKp://8639.tk/5820/ ) – はてなハイクの俺俺クライアント – モバイル用途に特化
• はてなハイクはミニブログサービス
• ハイクには専用クライアントが無いため、モバイル環境からの写真投稿は現状メールのみ – 面倒くさいので撮ってすぐ投稿したいので実装してみた
![Page 10: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/10.jpg)
撮影画面(<video>タグ)
![Page 11: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/11.jpg)
確認画面(<canvas>タグ)
![Page 12: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/12.jpg)
あとはてきとうにコメント
![Page 13: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/13.jpg)
Haiku!
![Page 14: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/14.jpg)
課題・問題点
• toDataURLは現状pngのみらしい – 送信時はあきらめてpngで送信にして、サーバーサイドでJPEGに変換・投稿するようにした
• モラル的な問題 – シャッター音は自分で実装しないといけないので、実装しなければ無音カメラができてしまう
– 実装しても、マナーモードでは無音カメラと化す
– ちなみに実装例のシャッター音はミクさん(「はいチーズ」を自作)
![Page 15: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/15.jpg)
期待
• HTML5のカメラ系の実装はまちまちらしい(きょうFirefoxブースで聞いた) – たとえば、Android 3.0ではMedia Capture APIを利用すると、inputタグを書くだけでカメラ連携できる
– でも世の中のガラスマはだいたい2.xだし! – 現在開発中のFirefox for Androidもinputつかえた
• 規格ができて、どのブラウザでも簡単にカメラ連携できるようになったら楽しそうだなー ( `ω´ )
![Page 16: Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話](https://reader034.vdocuments.net/reader034/viewer/2022042700/5561568cd8b42a8a7d8b5445/html5/thumbnails/16.jpg)
おわり