パーツライブラリ - UnitV AI Camera


2021/4/25公開

概要
UnitV AI Cameraのパーツライブラリを作りましたのでこちらでご紹介します。
本パーツライブラリはobniz用パーツライブラリとカメラ用プログラム(boot.py)の2つで構成されています。
カメラの初期設定(ボーレート、解像度など)はboot.pyで行ってください。

準備

注意事項
工場出荷状態でピントが合っていない可能性があります。(手元の個体は完全にピンボケでした)
レンズ外側のプラスチックの枠部分を爪楊枝などでつまんで回すと調整できましたので必要に応じて調整してください。
どっちにどれだけ回せばいいかは被写体とレンズの状態によりケースバイケースなのでクッキリした状態に持っていくのはなかなか難しいですが…。

boot.pyの設定
設定項目は冒頭部にまとめてあります。下記は設定例です。
##### User settings section Begin #####
# Baud rate(should be matched with obniz.)
BAUD_RATE = 115200

# Shooting mode
# When SHOOTING_MODE_ONE_TIME is True, Wait for "take a picture" instruction from obniz.
SHOOTING_MODE_ONE_TIME = False

# JPEG Compression Quality(0-100)
JPEG_COMP_QUALITY = 50

# Camera Resolution(sensor.VGA, QVGA, QQVGA ...)
CAMERA_RESOLUTION = sensor.VGA

# Use LED indicator
USE_LED = True
##### User settings section End #####
設定の内容は下記のとおりです。

パーツライブラリ仕様

[await] takeContinuousWait()


連続的にカメラで撮影し、JPEGデータを取得します。
あらかじめboot.pyを連続撮影モードに設定する必要があります。(SHOOTING_MODE_ONE_TIMEをFalse)
<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="Grove_UnitVAICamera.js"></script>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(Grove_UnitVAICamera);

  var cam = obniz.wired("Grove_UnitVAICamera", { gnd:0, vcc:1, cam_rx:2, cam_tx:3, baud:115200 });
  // var cam = obniz.wired("Grove_UnitVAICamera", { grove: obniz.grove0, baud:115200 }); // Groveの場合(未検証)
  
  while (true) {
    const jpegData = await cam.takeContinuousWait();
    // <img id="image">に表示
    document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
  }
}
</script>

~(中略)~

<img id="image">

[await] takeOneTimeWait()


カメラで一度だけ撮影し、JPEGデータを取得します。
あらかじめboot.pyを単発撮影モードに設定する必要があります。(SHOOTING_MODE_ONE_TIMEをTrue)
<script src="https://unpkg.com/obniz@3.x/obniz.js"></script>
<script src="Grove_UnitVAICamera.js"></script>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
var cam = null;

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(Grove_UnitVAICamera);

  cam = obniz.wired("Grove_UnitVAICamera", { gnd:0, vcc:1, cam_rx:2, cam_tx:3, baud:115200 });
  // cam = obniz.wired("Grove_UnitVAICamera", { grove: obniz.grove0, baud:115200 }); // Groveの場合(未検証)
}

async function takePic() {
  console.log("take!");
  const jpegData = await cam.takeOneTimeWait();
  document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
}
</script>

~(中略)~

<input type="button" id="take" value="撮影" onclick="takePic();"><br>
<img id="image">

arrayToBase64(bytearray)


引数のByte配列をBASE64にエンコードします。
これによりJPEGのBASE64データを取得できます。
HTMLでは<img>タグのsrcにBASE64のJPEGを渡すと画像として見ることが出来ます。

実装例1:連続撮影
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Camera</title>
<script src="https://unpkg.com/obniz@3.x.0/obniz.js"></script>
<script src="Grove_UnitVAICamera.js"></script>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(Grove_UnitVAICamera);

  var cam = obniz.wired("Grove_UnitVAICamera", { gnd:0, vcc:1, cam_rx:2, cam_tx:3, baud:115200 });
  
  while (true) {
    const jpegData = await cam.takeContinuousWait();
    document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
  }
}
</script>
</head>

<body>
  <img id="image">
</body>
</html>

実装例2:単発撮影
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Camera</title>
<script src="https://unpkg.com/obniz@3.x.0/obniz.js"></script>
<script src="Grove_UnitVAICamera.js"></script>

<script>
var obniz = new Obniz("OBNIZ_ID_HERE");
var cam = null;

obniz.onconnect = async function () {
  // パーツライブラリの登録
  Obniz.PartsRegistrate(Grove_UnitVAICamera);

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

async function takePic() {
  console.log("take!");
  const jpegData = await cam.takeOneTimeWait();
  document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
}
</script>
</head>

<body>
  <input type="button" id="take" value="撮影" onclick="takePic();"><br>
  <img id="image">
</body>
</html>

撮影画像例(VGAサイズ)

ダウンロード
Grove_UnitVAICamera.js
boot.py


戻る