Create your own outdoor streaming IoT with camera

Using the camera module and obniz, let’s create an IoT that can be streamed outdoors.

Make things

As in this video, I will create an IoT that can be streamed outside.

Parts

How to make

Hardware

Connect obniz and the camera module as shown in this picture. Since this camera module communicates with UART, connect Tx and Rx for UART in addition to GND and VCC, and make a total of 4 wires. However, it is necessary to connect VCC to other than obniz or to use 2 pins of obniz because power is not enough to supply power from one pin of obniz.

Here we have chosen to supply power from two pins, and we are moving the camera in the way io6 and io9 are also used for vcc / gnd supply. Please supply power as follows.

The hardware is complete when you connect obniz and battery via micro USB.

Software

The entire program is listed at the bottom of this article.
It uses HTML as a streaming display.

Here we will introduce only the points.

– Connect to obniz

In the obniz program, specify obniz_id displayed on the screen of obniz, connect to obniz, and write the program in onconnect.

Replace OBNIZ_ID_HERE with the respective obniz_id (eight-digit number).

var obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async function () {
   // do something
}
  • Connect the obniz and the camera in software

The information wired above is also described on the software. Since io6 / io9 is used as an additional power supply, I will write that also.

obniz.io6.output(true);
obniz.io9.output(false);
var cam = obniz.wired("JpegSerialCam", {vcc:0, cam_tx:1, cam_rx:2, gnd:3});
  • Initial setup of the camera

Make initial settings for the camera. The baud and the size of the acquired image are specified. Since streaming is performed, the fastest communication speed is specified with the smallest image size.

await cam.startWait({baud: 38400});
await cam.setBaudWait(115200); 
await cam.setSizeWait("160x120");
  • Keep taking pictures

Since you can take a picture with await cam.takeWait ();, keep taking it with while loop. Base64 encoded data is included in img tag to display on HTML.

while(true){ 
const jpegData = await cam.takeWait(); 
document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData); 
}
Completed!

Program

<!-- HTML Example --> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script> 
<script src="https://unpkg.com/obniz@latest/obniz.js"></script> 
</head> 
<body>
<div id="obniz-debug"></div> 
<img id="image"> 
<script> 
var obniz = new Obniz("OBNIZ_ID_HERE"); 
obniz.onconnect = async function () {
 obniz.io6.output(true);
 obniz.io9.output(false);
 var cam = obniz.wired("JpegSerialCam", {vcc:0, cam_tx:1, cam_rx:2, gnd:3});

 await cam.startWait({baud: 38400});
 await cam.setBaudWait(115200);
 await cam.setSizeWait("160x120");

 while(true){
 const jpegData = await cam.takeWait();
 document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
 }
 }
</script>
</body>
</html>

Recommended