webカメラの操作を行う jQuery webcam plugin

2013/12/23

webカメラについて

概要

webカメラとは、www・PCカメラを使用して、撮影された画像にアクセスするリアルタイムカメラ。
ライブカメラということもあります。
これらはwwwでアクセスするため、インターネットに接続されているPCでのみ利用できます。

jQuery webcam plugin

jQuery webcam pluginは、webカメラを操作するためのjQueryとFlashで作られたプラグインです。

ブラウザ上で簡単にwebカメラにアクセスして画像を撮ることができます。
この画像をPHPを利用してサーバー上に保存して、任意に表示させることも出来るので、監視システムやいろいろな場面で使えそうです。

このプラグインは、とてもシンプルなので知識の少ない方でも利用しやすいのではないでしょうか。

設定サンプル

ダウンロード

まずプラグインをダウンロードしてきます。
jQueryWebcam・GitHubを開き、右下の「Download ZIP」をクリックすることでダウンロードできます。

取得したZIPファイルを展開すると以下のような構成でファイルがあるかと思います。

jQuery-webcam-master
- src
|- BitString.as
|- JPGEncoder.as
|- jscam.as
|- jscam.xml
- jquery.webcam.js
- jscam.swf
- jscam_canvas_only.swf

設定例

まず、取得して展開したファイルを一式サーバーにアップします。
そして、jQueryとjquery.webcam.jsを読込みます。

とりあえず、下記のように記述してみます。


<div id="camera"></div>
<script type="text/javascript">
$(function(){
	$("#camera").webcam({
		width: 320,
		height: 240,
		mode: "save",
		swffile: "jscam_canvas_only.swf",
		onTick: function(remain) {},
		onSave: function() {},
		onCapture: function() {},
		debug: function(type, string) {},
		onLoad: function() {}
	});
});
</script>

[width]
webcamの横サイズ
[height]
webcamの縦サイズ
[mode]
callback・save・streamから選択。
[swffile]
jscam.swfまたはjscam_canvas_only.swfのパスを指定。
[onTick]
captrueが実行されたときに1秒毎に呼び出される。残り時間（秒）を引数に持ちます。
[onSave]
サーバー側で保存が完了した時に呼び出される。
[onCapture]
Capture時に呼び出される。
[debug]
Debug用。
[onLoad]
読み込みが完了した時に呼び出される。

PbTimes 情報誌