HTML5でWebカメラ – Photobooth.js

Chrome 21以降、Firefox 17以降、Opera 12以降という制限はあるが、

canvasでwebカメラを制御できるjQueryプラグインPhotobooth.jsを使ってみた。

ソース：http://wolframhempel.github.com/photobooth-js/

デモ

※Webカメラを起動する際、ブラウザのブロックかかる場合がある場合は許可を押下

普通に使う分には設置はとても簡単

読み込み

XHTML

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/photobooth_min.js"></script>

1 2	<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/photobooth_min.js"></script>

jQuery本体とプラグインファイルのみ。

 

HTML

XHTML

<div id="stage"></div> <div id="gallery"></div>

1 2	<div id="stage"></div> <div id="gallery"></div>

Webカメラから取得した映像を出力する#stageと

画像をアウトプットする#galleryを用意。

 

CSS

CSS

#stage { width: 500px; height: 300px; }

1 2 3 4 5

#stage { width: 500px; height: 300px; }

Webカメラから取得した映像を出力する#stageの大きさは決めておかないと動作しない。

 

javascript

JavaScript

$( '#stage' ).photobooth().on( "image", function( event, dataUrl ) { $( "#gallery" ).show().html( $( "#gallery" ).html() + '<img src="' + dataUrl + '" >'); });

1 2 3 4

$( '#stage' ).photobooth().on( "image", function( event, dataUrl ) { $( "#gallery" ).show().html( $( "#gallery" ).html() + '<img src="' + dataUrl + '" >'); });

dataUrlにWebカメラから出力した画像のurlが入ってくるので

これをsrcに入れれば画像を画面上に表示できる。

 

サポート外のブラウザ使用者のための関数も用意されている。

例えばデモではこのように使った。

JavaScript

if( !$( '#stage' ).data( "photobooth" ).isSupported ) { var s = 'お使いのブラウザはサポートされていません。<br><br>'; s += '[サポートブラウザ]<br>'; s += 'Chrome 21以降<br>'; s += 'Firefox 17以降<br>'; s += 'Opera 12以降'; $( '#stage' ).html(s); }

1 2 3 4 5 6 7 8 9

if( !$( '#stage' ).data( "photobooth" ).isSupported ) { var s = 'お使いのブラウザはサポートされていません。<br><br>'; s += '[サポートブラウザ]<br>'; s += 'Chrome 21以降<br>'; s += 'Firefox 17以降<br>'; s += 'Opera 12以降'; $( '#stage' ).html(s); }

 

WRITER

hoshino

ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。

この著者の記事を見る