HTML5 Canvasを使ってカメラのモーションセンサーを作成
Canvasを使ってカメラのモーションセンサーを作成する方法。
モーションセンサーをHTML5で簡単に実現することが出来ます。
一定時間ごとにカメラの画像をCanvasに書き出し、前回取得した画像と一定の差異が出た場合、反応ありとしてカメラの枠が赤くなります。
簡単なロジックの説明。
モーションセンサーロジック
- 裏にcanvasとしてカメラの画像データを抜き出しておく
- 画像を白黒にして保存
- 前回保存した画像データと今回の画像データを比較。許容値を設定して一定以上のpixelに変化があった場合は画像が変更されたとしてモーション判定を行う。
- 今回の保存データを保存する。
