Canvasを使ってWebカメラで動体検知を行う

しばらくこぶさたしていたCanvasの勉強を再開しました。

HTML5+JavaScriptによる画像・動画像処理入門

posted with amazlet at 14.05.23

松田 晃一
カットシステム
売り上げランキング: 366,088

Amazon.co.jpで詳細を見る

上記参考書を読みながら、作ってみたものが以下。

例

canvasを使ってwebカメラの映像から「動体（動いているもの）」を検出します。（「動体検出開始」ボタンを押して、カメラの前で激しく動くと背景色が赤く点滅します）

点滅するライトなんかが写っていると、それも「動いているもの」として検出してしまいます。

Chromeでしか動作確認してません。

example

上記参考書は、Canvasの基本から、エッジ検出、ノイズ除去などの画像処理や動画処理について詳しい内容となっているので、興味のある方にお勧めです。