リアルタイムヒートマップと Grafana データダッシュボードの統合
はじめに
このプロジェクトは、reCamera に内蔵された YOLO11n モデルを使用してターゲット検出を行います。人物ターゲットにファジー処理を実行し、ヒートマップ効果を表示します。これらはすべて reCamera 内でローカルに処理されます！そして reCamera は検出されたデータをローカルで実行されている Influxdb データベースに送信します。その後、Grafana が Influxdb データベースからデータを読み取り、リアルタイムデータダッシュボードを表示します。
このデモを完了した後の使用効果は以下の通りです。
ハードウェア準備
reCamera 1台 コンピュータ 1台
| reCamera 2002 シリーズ | reCamera Gimbal | reCamera HQ POE |
|---|---|---|
 |  |  |
1.InfluxDB 設定
1.1 InfluxDB2-2.1.1 をダウンロードして起動
ダウンロードリンクにアクセスし、ダウンロードして解凍します。Win + R を押してコマンドプロンプトを開き、ファイルが解凍されたディレクトリに移動し、最後に以下を入力します：
influxd
以下の図に示すように、起動が成功しました
1.2 InfluxDB のローカルウェブページに入って設定
次に cmd ターミナルを開き、以下のコマンドを入力してコンピュータの IP を照会します
ipconfig
次に、照会された IP をブラウザに入力し、8086 ポートを追加して InfluxDB のメインインターフェースに入ります。
例えば、私の IP が 192.168.7.183 の場合、ブラウザに 192.168.7.183:8086 と入力します
次に "Get Started" をクリックして、自分の情報を入力します。このステップでは、設定したユーザー名とパスワードを必ず覚えておいてください！！
次に "Confgure Later" をクリックします
次に Data をクリックして、自分の情報を入力するステップで設定した "Initial Bucket Name" を確認します。私は reCamera と入力しました
次に Setting をクリックしてデータ保持時間を設定します
API Token をクリックしてデータベースの Token を表示します。これは後続の reCamera の設定とヒートマップウェブページの設定で使用されます。
2.reCamera 設定
2.1 reCamera に SenseCraft プラットフォームからプログラムをインストール
sensecraft プラットフォーム-Workspace-reCameraに入り、"Real-time heat map local blur processing Grafa" という名前のデモを見つけて、あなたの reCamera にデプロイします
2.2 ネットワークに接続して不足しているノードをインストール
ワークスペースに入った後、この警告がポップアップします。これは正常です。まず Close をクリックします。後で reCamera にノードをインストールする必要があります。
reCamera をネットワークに接続します（コンピュータと同じネットワークに接続されていることを確認してください！！これは後で非常に重要です）
次に node-red-contrib-influxdb ノードを reCamera にインストールします。
次に検索ボックスに node-red-contrib-influxdb と入力すると、最初のバージョン 0.7.0 が必要なノードです。Install をクリックします
インストールには時間がかかりますので、しばらくお待ちください。インストールが成功すると、以下のように表示されます
2.3 InfluxDB ノードを設定
この時点で、Write Person Count という名前のノードにいくつかの設定情報を追加する必要があります。このノードを見つけてください。
ダブルクリックして設定パネルを開き、サーバーの後ろにある小さな鉛筆アイコンをクリックします
小さな鉛筆をクリックした後、URL と Token を入力する必要があります
ここでの URL は、最初のステップで入力した InfluxDB ウェブページのリンクを入力します。例えば、あなたのウェブページが 192.168.7.183:8086 の場合、URL に http://192.168.7.183:8086 と入力できます。
次に Token を入力します。これは最初に説明した InfluxDB ウェブページの API Tokens です。
Copy to Cilpboard をクリックして、コピーした Token を設定に入力します。
入力後、右上の Update をクリックします。他の設定は変更しないでください。
次に右上のデプロイをクリックして、今行った変更を有効にします。警告ポップアップウィンドウが表示されますが、閉じることができます。
2.4 InfluxDB データを表示
この時点で InfluxDB インターフェースに入ってデータが表示されるかどうかを確認できます。成功した場合、Submit をクリックするとデータ線グラフが表示されます。ここではデータの数を照会します
3.Grafana 設定
3.1 Grafana のインストール
Grafana の公式ウェブサイト Grafana get started | Cloud, Self-managed, Enterprise に入り、インストールパッケージをローカルにダウンロードします。ここでダウンロードしたバージョンは 12.3.0 です
ダウンロードしてインストールした後、Grafana はバックグラウンドで自動的に実行されるはずです。コンピュータの「サービス」を開いて実行されているかどうかを確認できます
3.2 ダッシュボードのインポート
この時点で Grafana が実行されていることが確認できたら、ブラウザで http://localhost:3000/ にアクセスしてローカル Grafana インターフェースに入り設定を行うことができます。Dashboards をクリックします
次に New dashboard をクリックします
Import dashboard を選択します
GitHub にアップロードした私のプロジェクトをダウンロードしてください。ダウンロードして展開した後、「Grafana Json File」フォルダ内の「reCamera Heatmap-1766213863140.json」を見つけてください。このファイルが Grafana にインポートする必要があるファイルです。
インポート後、以下の効果が表示されるはずです（以下の画面が表示されない場合は、記事の最後にある FAQ セクションに移動してください。解決策があります）
4. Python キャリブレーションソフトウェアの使用
まず GitHub で私のプロジェクトをダウンロードすることを忘れないでください。展開して開いた後、「Heatmap area calibration」という名前のフォルダを見つけてください。このフォルダには3つのファイルが含まれています：calibration_tool.py はキャリブレーションプログラム、R1.jpg は reCamera で撮影した元の画像、R2.png は私が描いた部屋の平面図です。
4.1 reCamera から現在のネイティブ解像度画像を取得する
元の解像度画像を取得することは重要です！！手順はより面倒になりますが、ヒートマップの位置精度に直接影響します！操作を辛抱強く行ってください！
4.1.1 reCamera を使用して写真を撮る
reCamera ワークスペースインターフェースに戻り、まずプログラムを停止します
次に左側の capture ノードを見つけ、camera ノードの後ろにドラッグして、線で接続します
次に capture ノードをダブルクリックして開き、以下の2つのオプションを変更します（このノードの機能は2秒ごとに写真を撮り、reCamera にローカル保存することです）。その後 Finish をクリックして再デプロイし、Run をクリックします。3〜4秒間実行した後、Stop Running をクリックします（常時実行する必要はありません。そうしないと常に写真を撮り続けます）。次に、撮影した写真をローカルコンピュータに移動します。
4.1.2 reCamera で撮影した写真をコンピュータに移植する
先ほど撮った写真が成功したかどうか確認しましょう。
Setting をクリックします
Terminal をクリックし、reCamera アカウントのパスワードを入力してログインします。
次に以下の2つのコマンドを順番に入力します：
Images フォルダに入る
cd / && cd userdata/Images/
ファイル一覧
ls
その後、システムがいくつかの画像ファイル名をリストアップするのが見えるはずです。これらは capture ノードで撮影したばかりの写真です。
先ほどの設定インターフェースに戻り、ssh 接続を開きます。
次にキーボードで Win R を押し、cmd と入力し、ターミナルで以下を入力します
scp -r recamera@<reCamera IP>:/userdata/Images "The folder path of the 'Heatmap area calibration' file that you downloaded from GitHub after decompression"
これらの IP の reCamera はネットワーク設定で見つけることができます
GitHub からダウンロードして展開した「Heatmap area calibration」ファイルのフォルダパスです。まず Heatmap area calibration に入り、フォルダ上部のパスボックスをクリックして、パスをコピーします。
例：
scp -r [email protected]:/userdata/Images "C:\Users\seeed\Desktop\热力图\正式版\reCamera with Heatmap\Heatmap area calibration"
次に reCamera のパスワードを入力して、選択したパスにダウンロードします
先ほどダウンロードしたフォルダに戻ると、ダウンロードしたばかりの Images フォルダが表示されます。
今度は私のプロジェクトから元の R1.jpg を削除します。
最新の写真、通常は最後の写真を選択し、R1 にリネームします
次にこの写真を上位ディレクトリに配置します。
4.2 部屋の平面図を準備する
Windows の標準描画ツールを使用して描画し、画像として保存して Heatmap area calibration パスに保存するか、既存の部屋の平面図を直接 Heatmap area calibration パスに保存することができます。このステップでは、私の以前のプロジェクトから R2.png を削除し、あなたの画像を R2 にリネームしてこのパスに保存することも忘れないでください。
4.3 キャリブレーション手順の使用
キャリブレーションプログラムは、Heatmap area calibration パス下の calibration_tool.py プログラムです。
ここではデフォルトで Pycharm を使用します。使用前に Python の OpenCV ライブラリをインストールする必要があります。
pip install opencv-python
注意すべき点が2つあります：まず、2つの画像は同じパス、つまり Heatmap area calibration パス下にある必要があります。次に、画像ファイル名が正しいかどうかを確認してください
プログラムが実行されると、カメラのスクリーンショットを表示するウィンドウがポップアップします。この時、マウスで有効エリアをクリックする必要があります。クリック順序は非常に重要です：「左上→右上→右下→左下」の時計回りの順序で、選択したいエリアの4つの角をクリックしてください。例えば、テーブルの表面のみを表示したい場合は、テーブルの4つの角をクリックします。4点後、キーボードの任意のキー（スペースなど）を押して次のステップに進みます。
次に、俯瞰図 R2.png を表示する2番目のウィンドウがポップアップします。クリック順序は最初のステップに対応している必要があります：先ほどの4点の対応する位置をマップ上でクリックします。例えば、先ほどテーブルの左上角を最初にクリックした場合、今度はマップ上でテーブルの左上角をクリックします。4点後、任意のキーを押して終了します。
次にコマンドラインウィンドウ（CMD）に戻ると、スクリプトが自動的に JS コードを生成するのが見えます。そのコードを直接コピーして、あなたの index.html の const CALIBRATION = { ... }; を置き換えてください。（次のステップの「5.5 キャリブレーションされた座標データ」まで使用されませんので、気にしないでください）
5. ヒートマップページの設定
ヒートマップのウェブ設定も私の GitHub プロジェクトで利用可能です。具体的には heatmap-demo フォルダの index.html ファイルにあります。このファイルのいくつかのセクションも変更する必要があります。そうしないと、正常に実行されず、ヒートマップ座標データを受信できません。
5.1 ヒートマップのウェブページパラメータ設定
5.1.1 ヒートマップ画像
実際の画像のファイル名に置き換えてください
5.1.2 データベース部分の設定
パラメータ説明
URL は開いた InfluxDB のウェブアドレスです。
ORG は InfluxDB を設定する際のユーザー名です。
BUCKET は作成した InfluxDB データベースの名前です。
TOKEN は InfluxDB API トークンです。HTML 内の元の 12345678 を実際のトークンに置き換えてください
5.1.3 熱データの更新間隔とクエリ期間
パラメータの説明
REFRESH_INTERVAL は更新するミリ秒数を指し、DATA_RANGE は過去のデータのクエリ時間を指します。コード内のデフォルトの「3000」と「-3s」では、「3000」は 3000 ミリ秒、つまり 3 秒ごとに更新されることを意味し、「-3s」は過去 3 秒間の熱座標データをクエリすることを意味します。
モード選択
設定可能な 2 つのモードがあります：
(1) 「リアルタイムモード」：熱座標がリアルタイムで更新され、累積的な重ね合わせなしに以前の座標をクリアします。リアルタイムモードを実現するには、DATA_RANGE を短時間に設定する必要があります。例えば、私のデフォルトの「-3s」と「-3s」は過去 3 秒間の熱座標データをクエリすることを意味します。例えば、プログラムが現在 10 秒間実行されている場合、DATA_RANGE を -3s に設定すると、熱図で表示される座標データは 8-10 秒目のデータであり、以前の 1-7 秒の座標データは表示されません；
(2) 「累積モード」：熱座標はリアルタイムで更新されますが、以前の座標が重ね合わされます。累積モードを実現するには、DATA_RANGE をより長い時間に設定する必要があります。例えば、DATA_RANGE を「-1h」に設定すると、熱図は過去 1 時間のデータを累積的に表示します。プログラムが 2 時間実行された後、現在 2 時間目のデータが表示され、1 時間目のデータは表示されません。
5.1.4 カメラ解像度
パラメータの説明
CAM_WIDTH / CAM_HEIGHT：カメラの実際のストリーミング解像度（例：1920x1080 または 1280x720）をここに入力する必要があります。そうでなければ、透視変換が間違ってしまいます。
このパラメータは「4.1.1 reCamera を使用した写真撮影」のステップでも示されています。カメラノードをキャプチャノードと接続する際、カメラノードの Resolution パラメータを確認できます。これが変更する必要がある解像度パラメータです。ここで 1920 × 1080 が選択されている場合、コード内で CAM_WIDTH を 1920 に、CAM_HEIGHT を 1080 に変更する必要があります
5.1.5 キャリブレーションの座標データ
これは、前のステップ「4.3 キャリブレーションプログラムの使用」で Python プログラムが実行された後にコンソールで生成されたコードです。このコードを置き換えてください
5.1.6 熱閾値
パラメータの説明
感度（最大値）：リアルタイムモード（数点のみ）の場合、max は約 2 に設定します。そうでなければ色が薄すぎて見えません；
1 時間の累積（数千点）の場合、max は 150 以上に設定する必要があります。そうでなければマップが瞬時に赤くなります（露出オーバー）。
5.2 ヒートマップの有効化
Win + R を押し、「cmd」と入力し、パス「heatmap-demo」に入り、次を入力します
python -m http.server 8080
次に、ブラウザで「InfluxDB Heatmap (Grafana Fix + 1h Accumulation)」のウェブページを開くことで、マップが読み込まれていることを確認できます。
6. Grafana パネルに戻り、最終結果を確認する
この時点で、Grafana パネルで以下の表示を確認できるはずです。問題が発生した場合は、記事の最後にある「よくある質問」セクションを参照してください。
よくある質問
Grafana パネルが正しく読み込まれない
Grafana でリアルタイム熱マップや reCamera リアルタイム画面が読み込まれない、または正しく表示されない場合は、問題のあるパネルをクリックして更新する必要があります。熱マップパネルを例にとります：
次に Refresh をクリックします
熱マップの読み込みに問題がある
熱マップの読み込みに問題が発生した場合は、まずこのステップのすべての設定項目が正しいかどうかを確認してください。すべての設定項目が正しく、それでも熱マップの読み込みに問題がある場合は、InfluxDB Heatmap (Grafana Fix 1h Accumulation) インターフェースで F12 キーを押して、トラブルシューティングのためにウェブコンソールの出力を確認してください。
reCamera のリアルタイム画像にカクつきが現れる
reCamera のリアルタイム画像がしばらく実行した後にカクつき、「WebSocket:Disconnected」が表示される場合、これは正常な現象です。reCamera のリソースは限られており、メモリが満杯になります。表示が再開されるまで待ってください。
Grafana パネルの「現在の人数」と「今日の人数」が正しく表示されない
これは正常な現象です。ノイズ干渉があるためで、しばらくすると値は正常に戻ります。
Grafana パネルの「連続稼働時間」とは何を意味するか
ここでの「連続稼働時間」とは、データベースが初日から現在まで実行されている時間を指します。InfluxDB の reCamera データベースのデータ保持時間を 7 日に設定しているため、7 日後に自動的にクリアされて再計時されます。ここで InfluxDB の各データベースのデータ保存時間を自由に設定できます。
データをエクスポートできるか
はい、InfluxDB Explore インターフェースで必要なデータを選択し、Submit をクリックしてから Download CSV をクリックする必要があります
技術サポートと製品ディスカッション
弊社製品をお選びいただきありがとうございます！弊社製品での体験が可能な限りスムーズになるよう、さまざまなサポートを提供いたします。さまざまな好みやニーズに対応するため、複数のコミュニケーションチャネルを提供しています。