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

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">UnitV AI Cameraのobniz用パーツライブラリを公開しました。<a href="https://t.co/SPPcj9a1Fx">https://t.co/SPPcj9a1Fx</a></p>&mdash; ハセグル(I♥BC) (@haseguru) <a href="https://twitter.com/haseguru/status/1386316095477276680?ref_src=twsrc%5Etfw">April 25, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> のカメラに UnitV AI Camera を使ってみるテスト。<br>前に見かけて気になってたものを試せました！<br><br>↓こちらを使わせていただいて実現！<a href="https://t.co/sHX7uqaGYg">https://t.co/sHX7uqaGYg</a><a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/mRF936DI2Y">pic.twitter.com/mRF936DI2Y</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1394285897311342593?ref_src=twsrc%5Etfw">May 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">先ほどツイートした <a href="https://twitter.com/hashtag/obniz?src=hash&amp;ref_src=twsrc%5Etfw">#obniz</a> のカメラとして UnitV AI Camera を使ってみた件、撮影できた画像はこんな感じでした（ブラウザに表示されたものをキャプチャ）。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/b1iiZWAKSZ">pic.twitter.com/b1iiZWAKSZ</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1394286308797816832?ref_src=twsrc%5Etfw">May 17, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 今回利用したライブラリ・デバイス等について
冒頭に掲載したツイートに書かれていたリンクは以下になります。

●ザ・置き場
　https://theokiba.awe.jp/iot/pl_unitv_camera/index.html
![ザ・置き場.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/afb79612-43f3-b64f-95cd-b13f6b0fc4ba.jpeg)

今回使ったのは、上記のページにある 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](https://qiita.com/youtoy/items/a8d954e2d85bb42f512f)

具体的には、[上記の記事の中の「M5StickV にファームウェアを書き込む」という項目の内容](https://qiita.com/youtoy/items/a8d954e2d85bb42f512f#m5stickv-%E3%81%AB%E3%83%95%E3%82%A1%E3%83%BC%E3%83%A0%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%92%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%82%80)になります。

それができたら、[ライブラリに関するページ](https://theokiba.awe.jp/iot/pl_unitv_camera/index.html)の最下部にある boot.py をダウンロードして、マイクロSDカードにコピーしてください。
![boot用のプログラム.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/da41a762-3593-286c-d133-1be5d9b82e65.jpeg)
ちなみに、boot.py の中を書きかえて設定を変更することもできるようですが、今回は変更を加えずに利用します。
その場合、単発撮影モード（obniz から撮影要求を送った時だけ撮影を行うモード）と連続撮影モード（撮影を連続して行うモードで、カメラへの負荷が高め）の 2種類の撮影モードのうち、連続撮影モードを利用する設定になります。

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

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

以下の画像の左側が実際に接続した後の状態で、右側は接続に用いたケーブルです。
![デバイス間の接続](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bfd2a9d5-d136-be2a-d0f1-aaa7f69f99f3.jpeg)
ジャンパオスケーブルの側は obniz に差し込むのですが、0番から 3番にそれぞれ以下の色のケーブルが対応するように差し込みました。

| 番号 | 色 |
|---|---|
| 0  | 黒 |
| 1  | 赤 |
| 2  | 白 |
| 3  | 黄 |

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

### obniz のライブラリ・プログラムを準備して動かす
次に obniz関連の準備を進めます。

まずは、[ライブラリに関するページ](https://theokiba.awe.jp/iot/pl_unitv_camera/index.html)の最下部にある Grove_UnitVAICamera.js をダウンロードします。
![obniz用のライブラリ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3093164d-3ade-02e1-4b5c-e0eb55385cd3.jpeg)

そして、このファイルと同じフォルダに HTMLファイルを作成します。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/obniz@3.14.0/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 は、ケーブルの接続状態などは以下のようになっていました。
![mZH2AVWx.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c14aad31-bb5e-885b-5ed0-491fe4b60c61.jpeg)

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

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