以前、以下のツイートを見て知ったライブラリを試してみた話です。
UnitV AI Cameraのobniz用パーツライブラリを公開しました。https://t.co/SPPcj9a1Fx
— ハセグル(I♥BC) (@haseguru) April 25, 2021
実現できること
M5Stack社から販売されている UnitV AI Camera（以下、UnitV と記載）を、obniz用の外付けカメラとして利用できます。実際に試してみている時の様子は以下のとおりです。
#obniz のカメラに UnitV AI Camera を使ってみるテスト。
— you (@youtoy) May 17, 2021
前に見かけて気になってたものを試せました！
↓こちらを使わせていただいて実現！https://t.co/sHX7uqaGYg#M5Stack pic.twitter.com/mRF936DI2Y
そして、UnitV で撮影した画像をブラウザに表示させられるのを確認できました（以下の画像はその時の表示画面をキャプチャしたものです）。
先ほどツイートした #obniz のカメラとして UnitV AI Camera を使ってみた件、撮影できた画像はこんな感じでした（ブラウザに表示されたものをキャプチャ）。#M5Stack pic.twitter.com/b1iiZWAKSZ
— you (@youtoy) May 17, 2021
今回利用したライブラリ・デバイス等について
冒頭に掲載したツイートに書かれていたリンクは以下になります。
●ザ・置き場
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 を外付けカメラとして利用するための準備を進めます。
大まかな手順としては以下のとおりです。
- UnitV にファームウェアを書き込む
- UnitV用の Python のプログラムをダウンロード
- マイクロ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/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 は、ケーブルの接続状態などは以下のようになっていました。
まとめ
UnitV を利用した obniz での画像の取得を、無事に実現することができました！
今後は、取得した画像を活用するような処理を試したりしたいです。