Welcome to Hackster!
Hackster is a community dedicated to learning hardware, from beginner to pro. Join us, it's free!
Paran Leematbi
Published Ā© CC BY

ZYBO Z7 20 Webcam on the Petalinux

The Zybo Z7-20 board, integrated with PetaLinux, supports real-time embedded vision appications using the Pcam 5C webcam.

BeginnerFull instructions provided4 hours703
ZYBO Z7 20 Webcam on the Petalinux

Things used in this project

Story

Read more

Code

setup.sh

SH
Settung up video device.
#!/bin/bash

width=1920
height=1080
rate=15
media-ctl -d /dev/media0 -V '"ov5640 2-003c":0 [fmt:UYVY/'"$width"x"$height"'@1/'"$rate"' field:none]'
media-ctl -d /dev/media0 -V '"43c60000.mipi_csi2_rx_subsystem":1 [fmt:UYVY/'"$width"x"$height"' field:none]'
v4l2-ctl -d /dev/video0 --set-fmt-video=width="$width",height="$height",pixelformat='YUYV'

REST API for Webcam

C/C++
REST API for Webcam
static void fn(struct mg_connection *c, int ev, void *ev_data) {
  if (ev == MG_EV_HTTP_MSG) {
    struct mg_http_message *hm = (struct mg_http_message *) ev_data;
    // ...
    else if (mg_match(hm->uri, mg_str("/api/png"), NULL)) {
      system("cd web_root; /bin/bash png.sh");
      struct mg_http_message *hm = (struct mg_http_message *) ev_data;
      struct mg_http_serve_opts opts = {
        .mime_types = "png=image/png"
      };
      mg_http_serve_file(c, hm, "web_root/frame-000000.png", &opts);
    }
}

png.sh

SH
Make png image for webcam
#!/bin/bash

width=1920
height=1080

/usr/bin/yavta -c1 -f YUYV -s "$width"x"$height" -F /dev/video0

DIRECTORY="."
LATEST_FILE=$(ls -t "$DIRECTORY"/*.bin 2>/dev/null | head -n 1)

if [[ -n "$LATEST_FILE" ]]; then
    echo "Latest file: $LATEST_FILE"
else
    echo "No '.bin' file."
fi

mv $LATEST_FILE "${LATESTFILE%.bin}.yuv"

/usr/bin/ffmpeg -s "$width"x"$height" -pix_fmt yuyv422 -i "${LATESTFILE%.bin}.yuv" -y "${LATEST_FILE%.bin}.png"

index.html

HTML
Webcam dashboard
    <button id="btn3">Shutter button</button>
    <div id="image-container">
        <img width=640 height=480 id="dynamic-image" alt="Dynamic Image" src="">
    </div>

webcam.js

JavaScript
Shutter button Javascript code.
    const getpng = ev =>
      fetch('/api/png')
        .then(r => r.blob())
        .catch(err => console.log(err));
    btn3.onclick = ev => getpng(ev)
      .then(imageBlob => {
        const imageURL = URL.createObjectURL(imageBlob);
        const imgElement = document.getElementById('dynamic-image');
        imgElement.src = imageURL;
        if (imgElement.dataset.previousUrl) {
            URL.revokeObjectURL(imgElement.dataset.previousUrl);
        }
        imgElement.dataset.previousUrl = imageURL;
        log('/api/png');
      })
      .catch(err => console.log(err));

Credits

Paran Lee
1 project • 0 followers
Linux Kernel Security | Fuzzing | Open-source architecture for humankind šŸ‘¾ lore.kernel.org/all/?q=Yunseong+Kim šŸŽ github.com/yskelg
Contact
matbi
3 projects • 13 followers
I love studying HW design methodology and teaching my knowleadges.
Contact

Comments

Please log in or sign up to comment.