How I Built a Web Photo Booth with JavaScript, Canvas, and Filters

Example of the web photo booth in action — PS: my friends having a tryout
Ever wanted to create a fun, browser-based photo booth?
I decided to explore the HTML5 Camera API and Canvas to see how far I could go without any backend — and it turned out better than I expected.

📸 Live Demo: Try it here
💻 GitHub Repo: View source code

(Works best on Chrome / Edge with camera access enabled.)

Step 1 — Accessing the Camera

The starting point is the navigator.mediaDevices.getUserMedia() API.
This lets us request video from the user’s camera.

const video = document.querySelector('video');

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => {
    console.error("Error accessing camera: ", err);
  });

Step 2 — Capturing an Image

Once the video is streaming, we can draw a frame to a <canvas> element.

function takePhoto() {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0);
  return canvas;
}

Step 3 — Applying Filters

Canvas allows you to set a filter property on the drawing context.
For example:

ctx.filter = 'grayscale(100%)';
ctx.drawImage(video, 0, 0);

You can chain filters like:

ctx.filter = 'sepia(100%) contrast(150%)';

Step 4 — Building a Photo Strip

By stacking multiple captured frames vertically on a single canvas, we can create a classic photo-strip effect.

function createPhotoStrip(images) {
  const stripCanvas = document.createElement('canvas');
  stripCanvas.width = images[0].width;
  stripCanvas.height = images[0].height * images.length;
  const ctx = stripCanvas.getContext('2d');

  images.forEach((img, i) => {
    ctx.drawImage(img, 0, i * img.height);
  });

  return stripCanvas;
}

Step 5 — Downloading the Result

Once the strip is ready, converting it to a downloadable image is straightforward.

function downloadCanvas(canvas, filename) {
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

Step 6 — Deployment

The whole thing is static HTML, CSS, and JS — so deployment is as simple as pushing to Netlify.

Final Thoughts

Working with the Camera API and Canvas was surprisingly smooth.
If you’ve never tried building a browser-based tool that uses real-time media, I recommend experimenting — it’s a fun way to learn!

💬 I’d love to see what creative variations you can make — maybe animated GIFs, fun overlays, or seasonal themes.