Published August 2, 2018 © GPL3+

JPEG Serial Camera Streaming with obniz

By using obniz and JPEG serial camera, we can take photos and send the data via UART. It is easy to take photos from JavaScript.

BeginnerFull instructions provided4 hours983

Things used in this project

Hardware components

Adafruit JPEG Serial Camera

Cambrian Robotics obniz

Story

You can observe plants using obniz and a JPEG camera. You can also take photo-streaming outside.

Step 1: Setting Up obniz

To set up obniz, all you need to do is to follow three steps.

Connect obniz to WiFi.
Connect devices like LED or motors to obniz.
Scan QR code of obniz and start programming. You do not need to install any software.

Step 2: Connect Devices

Step 3: Streaming Outside

We take obniz, camera, battery, and WiFi (or smartphone tethering) to stream a camera image.

What Is obniz?

obniz is a cloud-connected IoTdevelopment board. You can program on the web browser of anysmartphone or computer and the command is sent to obniz through the internet via obniz cloud. By connecting the obniz to the cloud through wifi, userscan remotely control devices that are physically connected to obniz.

obniz has 12 IO and WiFi-BLE module. It can be controlled through the APIs – REST or WebSocket API – on obniz cloud. Not only simple IO on/off but also UART, I2C, BLE etc can be used by remotely controlling obniz via internet. All you need to do to connect obniz is to input unique ID by scanning QR code. Complicated processes are done by obniz and its cloud. You can just start programming in HTML, browser and circuit have already been integrated. If you write a program to collect sensor values, you can make a chart of the values easily.

In terms of hardware, every IO can drive up to 1A with overcorrect protection, therefore high current demanding devices such as motors can be directly connected to obniz IO. GPIO and AD can be used on every IO. UART, SPI etc peripherals can be assigned to every IO.Even output voltage 3v/5v can be changed by software. Most electrical parts can be connected directly. Embedded parts such as switch, OLED display, and BLE are ready for use on program.

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>