Zenn
📝

バックエンド不要、ブラウザだけで動く物体検出システムを作ってみた。

に公開
Python
tech

3連休で生きた証を残したかったので、「そういや物体検出システムって触ったことないな。なんか作ってみるか」と思ってやってみたプロジェクトのようなものです。

とりあえず触ってみたい方

下記リンクからどうぞ。
https://miupa.jp/projects/MimamoriAI/
カメラは許可してもらう必要がありますが、録画してどっかに転送とかはしてないです。

きっかけ

冒頭にも書きましたが、「3連休だしなんか作ってみるか」という単純な興味から始まったプロジェクトです。
特に

  • サーバーサイドの実装なしで動作する
  • AIの技術を使ってみる
  • リアルタイムで処理する

という要素に興味があり、これらを組み合わせて実験的に作ってみました。

使用した技術

  • TensorFlow.js：ブラウザ上で機械学習モデルを実行できるJavaScriptライブラリ
  • COCO-SSD：一般的な物体を検出できる事前学習済みモデル
  • HTML5 Canvas：検出結果を表示するために使用
  • MediaDevices API：カメラからの映像取得に使用

実装のポイント

  1. モデルの読み込み

    const model = await cocoSsd.load();

  2. カメラ映像の取得

    const video = document.getElementById('video');
const stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: 'environment' }
});
video.srcObject = stream;

  3. リアルタイム検出

    const detectFrame = async () => {
    const predictions = await model.detect(video);
    drawPredictions(predictions);
    requestAnimationFrame(detectFrame);
};

学んだこと

良かった点

  • ブラウザだけで物体検出が実現できた
  • サーバーサイドの実装がいらない
  • スマートフォンでも動作できる

課題

  • （許容範囲だとは思うけど）モデルの読み込みに時間がかかる
  • バッテリーの消費が激しい（たぶん）

デモ

改めて、実際に動くものを見てみたい方は、以下のURLからアクセスできます
https://miupa.jp/projects/MimamoriAI/
※ 実験的なプロジェクトのため、動作が不安定な場合があります。

ソースコード

https://github.com/MiUPa/miupa_works/tree/main/projects/MimamoriAI

今後の展望

現状は実験的な実装ですが、以下のような発展の可能性を考えています。（本当にただ考えているだけです。）

  • 検出精度の向上
  • 特定の物体に特化した検出（畑に出現するイノシシとか検出したい）
  • 検出後の通知（イノシシを検知したらSNS、あるいはそこで爆音を鳴らすなど）

Discussion