obnizからjpegカメラを使う

このエントリーをはてなブックマークに追加

Jpegシリアルカメラ

https://www.adafruit.com/product/1386

http://akizukidenshi.com/catalog/g/gM-07746/

このカメラは撮影した画像をjpeg化してuartで送信します。

obnizと繋げばjavascriptから簡単に画像を取得できます。最大解像度は640*480.

せっかくなので、バッテリーに繋いでiPhoneのテザリングにobnizを繋いで散歩してみました。画像は可能な限り高速撮影することでストリーミングしています。

Program

<!-- HTML Example -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script  src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="  crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/obniz@1.9.0/obniz.js"></script>
</head>

<body>
<div id="obniz-debug"></div>
<br>
<div class="text-center">
  <h1> JpegCam </h1>
</div>

<button id="config">changeto 115200</button>
<button id="onetime">TakeOnece</button>
<button id="stream">Stream</button>
<br>
<div id="print"></div>
<br>
<img id="ItemPreview" src="" />
<script>

/* This will be over written on obniz.io webapp page */
var obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {
  
  obniz.io6.output(true);
  obniz.io9.output(false);
  const cam = obniz.wired("JpegSerialCam", {vcc:0, cam_tx:1, cam_rx:2, gnd:3});

  $("#config").click(async function() {
    $("#print").text("configuring...");
    await cam.startWait({baud: 38400});
    await cam.setBaudWait(115200);
    $("#print").text("success!!");
  })
  
  $("#onetime").click(async function() {
    $("#print").text("configuring...");
    await cam.startWait({baud: 115200});
    await cam.setSizeWait("640x480");
    $("#print").text("taking 640x480...");
    const data = await cam.takeWait();
    document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(data);
    $("#print").text("success!!");
  })
  
  $("#stream").click(async function() {
    $("#print").text("configuring...");
    await cam.startWait({baud: 115200});
    await cam.setSizeWait("160x120");
    $("#print").text("started stream 160x120");
    while(true) {
      const data = await cam.takeWait();
      document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(data);
    }
  })
}
    
</script>
</body>
</html>

今すぐ実行

HTMLがブラウザで開かれて実行されます。