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

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/
※ 実験的なプロジェクトのため、動作が不安定な場合があります。

ソースコード

今後の展望

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

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