Canvasを使ってカメラのモーションセンサーを作成する方法。
モーションセンサーをHTML5で簡単に実現することが出来ます。

一定時間ごとにカメラの画像をCanvasに書き出し、前回取得した画像と一定の差異が出た場合、反応ありとしてカメラの枠が赤くなります。

簡単なロジックの説明。
モーションセンサーロジック

• 裏にcanvasとしてカメラの画像データを抜き出しておく
• 画像を白黒にして保存
• 前回保存した画像データと今回の画像データを比較。許容値を設定して一定以上のpixelに変化があった場合は画像が変更されたとしてモーション判定を行う。
• 今回の保存データを保存する。

«前の記事：HTML5 画像を白黒化するJavascriptMysql 月末、月初の取得方法：次の記事»