Blog

HTML5でWebカメラ – Photobooth.js

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

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

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

デモ

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

 

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

読み込み

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

 

HTML

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

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

 

CSS

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

 

javascript

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

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

 

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

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

 

Author Profile

hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
     
  • Launch Cart越境ECカート

Archive

ページTOPへ