Build a Photo Booth App using HTML, CSS, and JavaScript

In this tutorial, we will build a simple Photo Booth App using HTML, CSS, and JavaScript that captures images from your webcam. By the end of this tutorial, you’ll have a basic app that takes a photo, displays it on the screen, and allows the user to download the image. Whether you’re a beginner or an experienced developer, this is a fun project that showcases how to access the user’s webcam using JavaScript.

What You’ll Learn

How to access a device’s camera using the getUserMedia API.
How to capture an image from the video stream.
How to save the captured image to your device.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript.
A modern browser that supports the getUserMedia API (most up-to-date browsers do).

Follow this video for complete guidance :

Let’s dive in!

HTML (index.html)

This is the skeleton of our Photo Booth app. It includes a video element to display the live feed from the webcam, a canvas to hold the captured photo, and buttons for capturing and saving the image.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Booth App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Photo Booth</h1>
        <video id="video" autoplay></video>
        <button id="snap">Take Photo</button>
        <canvas id="canvas" width="640" height="480"></canvas>
        <button id="save">Save Photo</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

A <video> element is used to display the live video feed from your camera.
A <canvas> element is hidden initially but will be used to display the captured image.
Two buttons, one for taking the photo and another for saving it locally.

Step 2: Adding Styles with CSS

To enhance the look and feel, let’s add some CSS. This gives our app a clean, minimalistic design:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

video {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

canvas {
    display: none;
    border-radius: 10px;
}

Step 3: Implementing the JavaScript

Now comes the fun part — making the app interactive! With the help of the getUserMedia API, we can access the user’s camera and stream the video feed directly to the <video> element. JavaScript will also allow us to capture the image and save it.

// Get elements
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snapButton = document.getElementById('snap');
const saveButton = document.getElementById('save');
const context = canvas.getContext('2d');

// Access the device camera and stream to video element
navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream) => {
        video.srcObject = stream;
    })
    .catch((error) => {
        console.error('Error accessing the camera: ', error);
    });

// Event listener for the snap button
snapButton.addEventListener('click', () => {
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    canvas.style.display = 'block'; // Show canvas with the captured image
});

// Event listener for the save button
saveButton.addEventListener('click', () => {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/png'); // Convert canvas to image
    link.download = 'photo.png'; // Set a default filename
    link.click(); // Trigger the download
});

Accessing the Camera:
The getUserMedia() method requests access to the user’s camera. If permission is granted, the video stream is set as the source for the <video> element.

ALSO READ Free Personality Check with DOB using JavaScript in 5 minutes

Taking the Photo:
The drawImage() method is used to capture the current frame from the video and draw it onto the canvas when the user clicks the “Take Photo” button.

Saving the Photo:
Once the image is on the canvas, we can convert it to a PNG using the toDataURL() method. This URL is then used as the href for a dynamically created download link, allowing the user to save the image.

To run the app, simply open the HTML file in a browser. It will request permission to access your camera, and once granted, you can capture and save photos!

In just a few steps, we’ve built a fully functional photo booth app using only HTML, CSS, and JavaScript. This project showcases how easy it is to integrate device capabilities into web applications using modern browser APIs like getUserMedia.

Feel free to extend the app further by adding filters, cropping functionality, or even integrating it with a server for photo sharing!