Group Actions
Engagement
  • Author Author: sa112
  • Date Created: Date Created
  • Views 801 views
  • Likes 5 likes
  • Comments 2 comments
Related
Recommended

JPEG Serial Camera Streaming with obniz

sa112

 

By using obniz and JPEG serial camera, we can take photos and send the data via UART.

 

obniz

JPEG Serial Camera

 

It is easy to take photos from javascript. max resolution is 640*480.

 

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

 

This video is unavailable.

 

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>
  <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>