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.