カメラを使って簡単な動体検知📷️ 📖

フレーム間差分法でごく簡単な動体検知を試す。日本語プログラミング言語「なでしこ」 Advent Calendar 2025、10日目の記事用。

プログラム: (→大)
#----- 設定 --------------- # 動体検知の設定項目 精度＝30。 感度＝80。 閾値＝20。 # 開閉できる設定画面 母艦＝DOM親要素。 設定画面＝「DETAILS」のDOM部品作成。 それ.open＝オン。 それにDOM親要素設定。 「SUMMARY」のDOM部品作成。 それに「設定」をテキスト設定。 母艦にDOM親要素設定。 # カメラ終了のボタン 改行作成。 カメラボタン＝「カメラ終了」のボタン作成。 改行作成。 #----- カメラを起動 --------------- # まずカメラを表示するビデオ要素を作成する。 ビデオ＝ビデオ作成。 # 作成したビデオ要素にカメラを起動。 ビデオにカメラ起動。 # カメラ終了ボタンのイベント カメラボタンのクリックした時には、ビデオのカメラ終了。。。 #----- フレームレートごとに画像比較 --------------- # フレームレート取得 カメラ設定＝ビデオのカメラ設定取得。 フレームレート＝カメラ設定.frameRate。 # ビデオの幅と高さ取得 ビデオ幅＝ビデオ.幅属性。 ビデオ高さ＝ビデオ.高さ属性。 # 標準キャンバスに動いた点をモニターする モニター＝描画中キャンバス。 モニター.幅属性＝ビデオ幅/2。 モニター.高さ属性＝ビデオ高さ/2。 # 動いたフレームを表示するキャンバス 撮影用＝[ビデオ幅,ビデオ高さ]のキャンバス作成。 # フレームごと交互に描画し前後を比較する2枚のキャンバス 比較用＝空配列。 ２回: 比較用[回数-1]＝[1,1]のキャンバス作成。 比較用[回数-1]の「visibility」に「hidden」をDOMスタイル設定。 # 比較した情報を描き出すキャンバス 処理用＝[1,1]のキャンバス作成。 処理用.可視＝オフ。 # 音を鳴らす ピ＝「https://n3s.nadesi.com/image.php?f=213.mp3」をオーディオ開く。 #--- メイン --- C＝-1。比較データ＝空配列。 (1/フレームレート)秒タイマー開始した時には（タイマーID） Cを1増やす。 比較データ[C%2]＝空配列。 比較用[C%2]へ描画開始。 ビデオの[0,0,ビデオ幅,ビデオ高さ]を[0,0,ビデオ幅*精度,ビデオ高さ*精度]へ画像部分描画。 色データ＝[0,0,ビデオ幅*精度,ビデオ高さ*精度]の色データ取得。 モニターへ描画開始。 ビデオの[0,0,ビデオ幅,ビデオ高さ]を[0,0,ビデオ幅/2,ビデオ高さ/2]へ画像部分描画。 処理用へ描画開始。全描画クリア。赤色に塗り色設定。空に線色設定。 I＝0。 Nを0から色データの要素数-1まで4ずつ増やし繰り返す。 色平均＝(色データ[N] + 色データ[N+1] + 色データ[N+2])/3。 比較データ[C%2]に色平均を配列追加。 もし、C>0ならば: #初回は前データがないので比較しない もし、(((比較データ[0][N/4])-(比較データ[1][N/4]))の絶対値)＞感度ならば:# ピクセルが動いたと判定 Iを1増やす。 # 処理用に点を打つ x＝N/4%(処理用.幅属性)。 y＝N/4/(処理用.幅属性)を切り捨て。 [x,y,1,1]へ四角描画。 ここまで。 もし、C>10ならば: # 起動時のちらつき回避で少し待ってみる モニターへ描画開始。 [0,0,ビデオ幅/2,ビデオ高さ/2]へ処理用の[0,0,ビデオ幅*精度,ビデオ高さ*精度]を画像部分描画。 もしI>閾値ならば: ピをオーディオ再生。 撮影用へ描画開始。 [0,0]へビデオを画像描画。 ここまで。 #----- 設定変更用のUIを設定画面に追加する --------------- 改行作成。 設定画面にDOM親部品設定。 設定項目＝{精度:精度,感度:感度,閾値:閾値} 設定タイトル＝空辞書。設定バー＝空辞書。設定確認は空辞書。 設定項目を反復: 設定タイトル[対象キー]＝対象キー＆「：」のラベル作成。 設定バー[対象キー]＝[0,100,対象]の値指定バー作成。 設定確認[対象キー]＝対象のエディタ作成。 改行作成。 設定バー[対象キー]の「幅」に「300px」をDOMスタイル設定。 設定バー[対象キー]に対象キーをポケット設定。 設定確認[対象キー]の「幅」に「50px」をDOMスタイル設定。 設定確認[対象キー]の「行揃え」に「右」をDOMスタイル設定。 設定確認[対象キー]の「無効化」にオンをDOM属性設定。 設定バー[対象キー]を変更した時には: No＝対象のポケット取得。 対象のテキスト取得。 設定確認[No]にそれをテキスト設定。 設定反映。 設定反映。 ●設定反映 精度＝(設定バー.精度のテキスト取得)/100。 感度＝255/100*(100-(設定バー.感度のテキスト取得))+1を切り捨て。 閾値＝ビデオ幅*ビデオ高さ*精度^2/1000*(設定バー.閾値のテキスト取得)を切り捨て。 ２回: 比較用[回数-1]の「幅」にビデオ幅*精度をDOM属性設定。 比較用[回数-1]の「高さ」にビデオ高さ*精度をDOM属性設定。 処理用の「幅」にビデオ幅*精度をDOM属性設定。 処理用の「高さ」にビデオ高さ*精度をDOM属性設定。 C=-1 ここまで。 #----------------------------------------------- ●(xywhの|xywhを)色データ取得 　(描画中コンテキストの「getImageData」をxywhでJSメソッド実行).dataを戻す。 ここまで。 #-----------------------------------------------