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

最終更新日

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

HTML5+JavaScriptによる画像・動画像処理入門
松田 晃一
カットシステム
売り上げランキング: 366,088

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

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

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

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

example

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