html5

HTML5 Canvasを使ってカメラのモーションセンサーを作成



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

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

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


コメントを残す