📸 リアルタイム物体検出 Web アプリ (Real-time Object Detection Web App)

ブラウザのWebカメラからリアルタイムでAIが物体を検出するWebアプリです。 検出した物体に枠（バウンディングボックス）・ラベル・信頼度スコアを重ねて表示します。 推論はすべてブラウザ上（クライアントサイド）で完結するため、映像をサーバーに送信しません。

🚀 デモ

ブラウザで開いて「カメラを起動」を押し、カメラへのアクセスを許可するだけで動きます。

👉 https://https-github-com-taru104-object-det.vercel.app/

スマホでも動作します（背面カメラを優先して使用）。カメラを使うため、https か localhost 環境で開く必要があります。

✨ 主な機能

• リアルタイム物体検出 — Webカメラの映像から物体を検出し、枠・ラベル・信頼度スコアを重ねて描画
• クライアントサイド推論 — TensorFlow.js でモデルの読み込みと推論をブラウザ内で実行。映像は外部に送られません
• マルチデバイス対応 — PC・スマホのブラウザで動作。スマホでは背面カメラを優先

🛠 使用技術

分類	使用技術
言語	HTML5 / CSS3 / JavaScript (Vanilla)
機械学習	TensorFlow.js（CDN読み込み）
検出モデル	COCO-SSD（学習済みモデル / 80クラス対応）
カメラ取得	navigator.mediaDevices.getUserMedia
描画	Canvas API
ホスティング	Vercel

フレームワークやビルドツールを使わず、単一のHTMLファイルで完結させています。ライブラリはCDNから読み込んでいるため、npm install も不要です。

⚙️ 仕組み（処理の流れ）

1. 「カメラを起動」ボタンで getUserMedia を呼び、カメラ映像を <video> に流す
2. TensorFlow.js と COCO-SSD の学習済みモデルをCDNから読み込む
3. requestAnimationFrame でループを回し、毎フレーム model.detect() で推論
4. 検出結果（座標・クラス名・信頼度）を <video> に重ねた <canvas> に描画

💻 ローカルでの動かし方

ビルド工程はありません。ただし getUserMedia はセキュアな環境でしか動かないため、file:// で直接開くのではなく、**ローカルサーバー経由（localhost）**で開いてください。

git clone https://github.com/taru104/Real-time-Object-Detection-Web-App.git
cd Real-time-Object-Detection-Web-App

# 任意の簡易サーバーで配信（例）
npx serve .
# または
python3 -m http.server 8000

表示されたローカルアドレス（例: http://localhost:8000）を開いてください。

📝 今後の改善点 (Future Work)

• 検出対象クラスでのフィルタリング（特定の物体だけ表示）
• FPS や推論時間の表示でパフォーマンスを可視化
• より高精度／高速なモデル（例: MobileNet ベースの別モデル）への切り替え比較

---

個人開発のプロジェクトです。