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

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]
読み込みが完了した時に呼び出される。

  • このエントリーをはてなブックマークに追加
Related

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る