JpegSerialCamera Image Streaming

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

JpegSerailCamera

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

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

It take a photo and send a data via UART.

Easy to take a photo from javascript.
max resolution is 640*480.

I bring cam+obniz+battery with iPhone(for Tethering) to stream a camera image.

Circit

How to use

  1. Input obniz ID
  2. Choose baud rate / image size. If you are first use of the camera module, you must choose default baud rate.
  3. Click start button.
  4. Wait 5sec ~ 30sec for display picture.

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@2.3.0/obniz.js"></script> 
  </head>
  <body>
    <div id="obniz-debug"></div>

    <img id="image" />
    

    <fieldset>
      <legend>Config</legend>
      obniz Id: <input id="obnizId" placeholder="XXXX-XXXX" value="OBNIZ_ID_HERE"/><br/>
      baud rate: 
      <select id="baud">
        <option value="9600" >9600bps</option>
        <option value="19200">19200bps</option>
        <option value="38400" selected>38400bps(default)</option>
        <option value="57600">57600bps</option>
        <option value="115200">115200bps</option>
      </select><br/>
      size:  
      <select id="size">
        <option value="160x120" selected>160px x 120px</option>
        <option value="320x240">320px x 240px</option>
        <option value="640x480">640px x 480px</option>
      </select><br/>
      <button class="btn btn-primary" id="start">Start</button>
      <button class="btn btn-primary" id="update" hidden>Update</button>
    </fieldset>

    <fieldset>
      <legend>Log</legend>
      <div id="log" class="round">
        <div id="log-content">

        </div>
      </div>

    </fieldset>
    <script>
      var configUpdated = false;
      var beforeConfig = {};
      var obniz;

      $("#update").on("click",()=>{
        configUpdated = true;
      });

      $("#start").on("click",()=>{

        var obnizId = $("#obnizId").val();
        $("#obnizId").prop("disabled", true);

        $("#start").prop("hidden", true);
        $("#update").prop("hidden", false);



        obniz = new Obniz(obnizId);
        log("Connecting to obniz...");
        obniz.onconnect = async function () {
          log("Connected");
          obniz.io9.output(true);
          obniz.io6.output(false);
          var cam = obniz.wired("JpegSerialCam", {vcc:3, cam_tx:2, cam_rx:1, gnd:0});


          log("Camera setup start.");
          beforeConfig = {
            baud : parseInt($("#baud").val()),
            size : $("#size").val(),
          }
          await cam.startWait({baud:beforeConfig.baud });
          await cam.setSizeWait(beforeConfig.size);
          log("Camera setup finished.");

          while(true){
            if(configUpdated){
              configUpdated = false;
              log("Start camera config update.");

              let newBaud = parseInt($("#baud").val());
              if(beforeConfig.baud !== newBaud){
                beforeConfig.baud = newBaud;
                await cam.setBaudWait(newBaud);
                await obniz.wait(100);
                await obniz.pingWait();
                
                log("Baud rate update finished. restarting...");
                await obniz.close(); //restart
                obniz.connect();
                return;
              }
              let newSize = $("#size").val();
              if(beforeConfig.size !== newSize){
                await cam.setSizeWait(newSize);
                log("Size update finished.");
              }
              
              
              log("Finished camera config update.");
            }
            const jpegData = await cam.takeWait();
            document.getElementById("image").src = "data:image/jpeg;base64," + cam.arrayToBase64(jpegData);
          }
        }
      })


      const logDom = $("#log-content");
      function log(msg){
        
        let before = logDom.html().trim();
        logDom.html(before.length > 0 ? before + "<br/>" + msg : msg);

        console.log(msg);
      }
    </script>
  </body>
</html>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us