UnitV AI Camera を #obniz で使ってみる

12166 ワード
obniz M5stack UnitV M5stack テキストリンク

以前、以下のツイートを見て知ったライブラリを試してみた話です。

実現できること

M5Stack社から販売されている UnitV AI Camera（以下、UnitV と記載）を、obniz用の外付けカメラとして利用できます。実際に試してみている時の様子は以下のとおりです。

そして、UnitV で撮影した画像をブラウザに表示させられるのを確認できました（以下の画像はその時の表示画面をキャプチャしたものです）。

今回利用したライブラリ・デバイス等について

冒頭に掲載したツイートに書かれていたリンクは以下になります。

●ザ・置き場
　https://theokiba.awe.jp/iot/pl_unitv_camera/index.html

今回使ったのは、上記のページにある obniz用のライブラリと UnitV用の Python のプログラム、そして以下のデバイス等です。

  • obniz Board 1Y
  • UnitV AI Camera
  • GROVE - 4ピン - ジャンパオスケーブル

実際に試してみる

UnitV AI Camera に関する準備

まずは UnitV を外付けカメラとして利用するための準備を進めます。

大まかな手順としては以下のとおりです。

  1. UnitV にファームウェアを書き込む
  2. UnitV用の Python のプログラムをダウンロード
  3. マイクロSDカードに上記の Pythonのプログラムをコピーして UnitV に差し込む

上記の最初の手順については別の記事で書いたものがあるので、そちらをご覧ください。
その記事（以下の記事）は M5StickV という UnitV と異なるデバイス用の話なのですが、ファームウェア書き込みの手順は同じです。
　●久しぶりに M5StickV と V-Training で画像分類用の機械学習モデルを準備する（途中まで）【2021年4月】 - Qiita

具体的には、上記の記事の中の「M5StickV にファームウェアを書き込む」という項目の内容になります。

それができたら、ライブラリに関するページの最下部にある boot.py をダウンロードして、マイクロSDカードにコピーしてください。

ちなみに、boot.py の中を書きかえて設定を変更することもできるようですが、今回は変更を加えずに利用します。
その場合、単発撮影モード（obniz から撮影要求を送った時だけ撮影を行うモード）と連続撮影モード（撮影を連続して行うモードで、カメラへの負荷が高め）の 2種類の撮影モードのうち、連続撮影モードを利用する設定になります。

そして、そのマイクロSDカードを UnitV に差し込めば、ここまでの準備は OK です。

デバイスを接続する

ここで、上にも書いていた「GROVE - 4ピン - ジャンパオスケーブル」を使い、UnitV と obniz を接続します。

以下の画像の左側が実際に接続した後の状態で、右側は接続に用いたケーブルです。

ジャンパオスケーブルの側は obniz に差し込むのですが、0番から 3番にそれぞれ以下の色のケーブルが対応するように差し込みました。

番号 色
0 黒
1 赤
2 白
3 黄

なお、これを動かす時には obniz と UnitV のそれぞれに USBケーブルをつないで給電して使います。

obniz のライブラリ・プログラムを準備して動かす

次に obniz関連の準備を進めます。

まずは、ライブラリに関するページの最下部にある Grove_UnitVAICamera.js をダウンロードします。

そして、このファイルと同じフォルダに HTMLファイルを作成します。HTMLファイルに書く内容は以下のようにしました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>obniz</title>
    <script src="https://unpkg.com/[email protected]/obniz.js"></script>
    <script src="./Grove_UnitVAICamera.js"></script>
  </head>
  <body>
    <img id="image" />
    <script>
      console.log("start!!");
      let obniz = new Obniz("OBNIZ_ID_HERE");
      console.log(obniz.connectionState);

      console.log("connecting...");
      obniz.onconnect = async function () {
        console.log(obniz.connectionState);

        Obniz.PartsRegistrate(Grove_UnitVAICamera);
        let cam = obniz.wired("Grove_UnitVAICamera", {
          gnd: 0,
          vcc: 1,
          cam_rx: 2,
          cam_tx: 3,
          baud: 115200,
        });

        obniz.repeat(async () => {
          const jpegData = await cam.takeContinuousWait();
          // <img id="image">に表示
          document.getElementById("image").src =
            "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
        }, 0); //リピートインターバルが0ms
      };
    </script>
  </body>
</html>

上記の元になるプログラムでは、最後の部分で while が使われていたのですが、その部分は以下の記事に書かれていた obniz.repeat に置きかえて使ってみました。
　●obniz.repeatが便利なのにあんまり使われていない気がする話 - Qiita
　　https://qiita.com/wicket/items/eb8d4cde596b66647a4d

これをブラウザで開いてから obniz ID を指定してやると、ブラウザで開いたページ上にカメラで撮影された画像が表示されました（boot.py で連続撮影モードが設定されているので、出てくる画像は時間経過でどんどん切り替わります）。

ちなみに、動作中の obniz と UnitV は、ケーブルの接続状態などは以下のようになっていました。

まとめ

UnitV を利用した obniz での画像の取得を、無事に実現することができました！

今後は、取得した画像を活用するような処理を試したりしたいです。