element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • Members
    Members
    • Benefits of Membership
    • Achievement Levels
    • Members Area
    • Personal Blogs
    • Feedback and Support
    • What's New on element14
  • Learn
    Learn
    • Learning Center
    • eBooks
    • STEM Academy
    • Webinars, Training and Events
    • Learning Groups
  • Technologies
    Technologies
    • 3D Printing
    • Experts & Guidance
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • Technology Groups
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • Project Groups
  • Products
    Products
    • Arduino
    • Dev Tools
    • Manufacturers
    • Raspberry Pi
    • RoadTests & Reviews
    • Avnet Boards Community
    • Product Groups
  • Store
    Store
    • Visit Your Store
    • 'Choose another store...'
      • Europe
      •  Austria (German)
      •  Belgium (Dutch, French)
      •  Bulgaria (Bulgarian)
      •  Czech Republic (Czech)
      •  Denmark (Danish)
      •  Estonia (Estonian)
      •  Finland (Finnish)
      •  France (French)
      •  Germany (German)
      •  Hungary (Hungarian)
      •  Ireland
      •  Israel
      •  Italy (Italian)
      •  Latvia (Latvian)
      •  
      •  Lithuania (Lithuanian)
      •  Netherlands (Dutch)
      •  Norway (Norwegian)
      •  Poland (Polish)
      •  Portugal (Portuguese)
      •  Romania (Romanian)
      •  Russia (Russian)
      •  Slovakia (Slovak)
      •  Slovenia (Slovenian)
      •  Spain (Spanish)
      •  Sweden (Swedish)
      •  Switzerland(German, French)
      •  Turkey (Turkish)
      •  United Kingdom
      • Asia Pacific
      •  Australia
      •  China
      •  Hong Kong
      •  India
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Americas
      •  Brazil (Portuguese)
      •  Canada
      •  Mexico (Spanish)
      •  United States
      Can't find the country/region you're looking for? Visit our export site or find a local distributor.
  • Translate
  • Profile
Personal Blogs
  • Members
  • More
Personal Blogs
Legacy Personal Blogs JPEG Serial Camera Streaming with obniz
  • Blog
  • Documents
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
Blog Post Actions
  • Subscribe by email
  • More
  • Cancel
  • Share
  • Subscribe by email
  • More
  • Cancel
Group Actions
  • Group RSS
  • More
  • Cancel
Engagement
  • Author Author: sa112
  • Date Created: 17 Jul 2018 8:27 AM Date Created
  • Views 525 views
  • Likes 5 likes
  • Comments 2 comments
  • electronics kit
  • javascript
  • iot
  • diy electronics
Related
Recommended

JPEG Serial Camera Streaming with obniz

sa112
sa112
17 Jul 2018

You don't have permission to edit metadata of this video.
Edit media
x
image
Upload Preview
image

 

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.
You don't have permission to edit metadata of this video.

 

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>

  • Sign in to reply

Top Comments

  • genebren
    genebren over 5 years ago +2
    Nice demo. I once worked on an image processing project where we were collecting multiple 5Mp images and writing them to a thumb drive (FTDI - serial supported). It took so long to save the images that…
  • sa112
    sa112 over 5 years ago +2
    Thank you for your comment and info ! :)
  • sa112
    sa112 over 5 years ago

    Thank you for your comment and info ! :)

    • Cancel
    • Vote Up +2 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • genebren
    genebren over 5 years ago

    Nice demo. I once worked on an image processing project where we were collecting multiple 5Mp images and writing them to a thumb drive (FTDI - serial supported).  It took so long to save the images that we added a JPEG compressor and sped the process up.  We were 3-5 times faster in writing to the drive (including the JPEG processing time).

    Gene

    • Cancel
    • Vote Up +2 Vote Down
    • Sign in to reply
    • More
    • Cancel
element14 Community

element14 is the first online community specifically for engineers. Connect with your peers and get expert answers to your questions.

  • Members
  • Learn
  • Technologies
  • Challenges & Projects
  • Products
  • Store
  • About Us
  • Feedback & Support
  • FAQs
  • Terms of Use
  • Privacy Policy
  • Legal and Copyright Notices
  • Sitemap
  • Cookies

An Avnet Company © 2023 Premier Farnell Limited. All Rights Reserved.

Premier Farnell Ltd, registered in England and Wales (no 00876412), registered office: Farnell House, Forge Lane, Leeds LS12 2NE.

ICP 备案号 10220084.

Follow element14

  • X
  • Facebook
  • linkedin
  • YouTube