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