How to Access Camera and Capture Photos Using JavaScript

In this blog, we will explore how to use JavaScript to access a device’s camera and capture photos using the MediaDevices API. We’ll also discuss how to display the live camera feed in the browser and capture still images on button clicks. This tutorial is perfect for developers who want to add camera functionality to their web applications.

Table of Contents

• Introduction
• Accessing the Camera with JavaScript
• Capturing a Photo from the Camera Feed
• Saving the Captured Photo
• Complete Code Example
• Conclusion
• GitHub Repository and LinkedIn

Introduction

Modern web technologies allow developers to access hardware devices like the camera directly from the browser. With the MediaDevices API and Canvas API, we can easily capture photos from a live camera feed, a feature often found in photo booths, video conferencing applications, and more. In this blog, we’ll walk through building a simple web application that accesses the user’s camera and lets them capture a photo.

Accessing the Camera with JavaScript

To access the camera using JavaScript, we will utilize the navigator.mediaDevices.getUserMedia() method. This method prompts the user for permission to use the camera, and upon approval, it returns a MediaStream that can be displayed in a <video> element.

Here is the basic code to access the camera:

// Request access to the user's camera
navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream) => {
        // Set the video element's source to the camera stream
        const video = document.getElementById('camera');
        video.srcObject = stream;
    })
    .catch((error) => {
        console.error("Error accessing the camera: ", error);
    });

This simple code snippet will prompt the user for access to their camera and display the live feed in a <video> element on your webpage.

Capturing a Photo from the Camera Feed

Once the camera feed is live, we can use the Canvas API to capture a frame from the video feed and display it as a still image on the webpage. We’ll achieve this by drawing the current video frame onto a <canvas> element.

Here’s how you can do it:

// Capture photo on button click
const captureBtn = document.getElementById('capture-btn');
const canvas = document.getElementById('photo');
const context = canvas.getContext('2d');

captureBtn.addEventListener('click', () => {
    // Set canvas dimensions to match video size
    const video = document.getElementById('camera');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw the current frame from the video onto the canvas
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
});

This code captures the video’s current frame and displays it on the <canvas> element. By clicking the "Capture Photo" button, the user can take a photo using their camera.

Saving the Captured Photo

We can also provide the option to save the captured photo. Using the canvas.toDataURL() method, we can convert the canvas content into a downloadable image file (in PNG format, for example). Here's how you can implement this feature:

// Create a download link for the captured photo
const downloadLink = document.createElement('a');
downloadLink.innerText = 'Download Photo';
document.body.appendChild(downloadLink);

captureBtn.addEventListener('click', () => {
    // Capture photo and draw to canvas
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Convert the canvas image to a data URL
    const dataURL = canvas.toDataURL('image/png');
    
    // Set the download link
    downloadLink.href = dataURL;
    downloadLink.download = 'captured-photo.png';
    downloadLink.style.display = 'block';
});

This code captures the video’s current frame and displays it on the <canvas> element. By clicking the "Capture Photo" button, the user can take a photo using their camera.

Saving the Captured Photo

We can also provide the option to save the captured photo. Using the canvas.toDataURL() method, we can convert the canvas content into a downloadable image file (in PNG format, for example). Here's how you can implement this feature:

// Create a download link for the captured photo
const downloadLink = document.createElement('a');
downloadLink.innerText = 'Download Photo';
document.body.appendChild(downloadLink);

captureBtn.addEventListener('click', () => {
    // Capture photo and draw to canvas
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    // Convert the canvas image to a data URL
    const dataURL = canvas.toDataURL('image/png');
    
    // Set the download link
    downloadLink.href = dataURL;
    downloadLink.download = 'captured-photo.png';
    downloadLink.style.display = 'block';
});

This will generate a download link once the photo is captured, allowing users to download the image as a PNG file.

Complete Code Example

Here’s the full HTML, CSS, and JavaScript code to create a basic photo capture application using the browser’s camera:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Capture Demo</title>
    <style>
        #camera {
            width: 100%;
            max-width: 500px;
        }
        #photo {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Access Camera and Capture Photo</h1>
    
    <video id="camera" autoplay></video>
    <button id="capture-btn">Capture Photo</button>
    
    <canvas id="photo"></canvas>

    <script src="camera.js"></script>
</body>
</html>

JavaScript (camera.js)

// Access the DOM elements
const video = document.getElementById('camera');
const canvas = document.getElementById('photo');
const captureBtn = document.getElementById('capture-btn');
const context = canvas.getContext('2d');

// Request access to the user's camera
navigator.mediaDevices.getUserMedia({ video: true })
    .then((stream) => {
        video.srcObject = stream;
    })
    .catch((error) => {
        console.error("Error accessing the camera: ", error);
    });

// Capture photo on button click
captureBtn.addEventListener('click', () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
});

Conclusion

By leveraging the MediaDevices API and the Canvas API, we can build web applications that can access the user’s camera and capture photos. This functionality can be extended to applications like photo editors, profile picture creators, or even augmented reality experiences.

GitHub Repository and LinkedIn

GitHub Repository:

GitHub - Ayushmaan7/camera-capture-demo-using-JS

Connect with me on LinkedIn:
https://www.linkedin.com/in/srivastavayushmaan/