React Photo Capture with Camera - JavaScript Exercise #14

Overview

In this exercise, you will build a React app that allows users to capture photos using their webcam without using any third-party libraries. This app will make use of the getUserMedia API to access the user's camera and canvas element to capture the image. This exercise is ideal for those who want to learn how to work with native browser APIs in React, how to capture images using a webcam without any external dependencies, and how to build functional components in React.

Instructions

1. Create a new functional component named Camera.

2. Inside the Camera component, use the useState hook to create a state variable named videoRef.

3. In the useEffect hook of the Camera component, access the user's camera using the getUserMedia API and set the srcObject property of the video element to the camera stream. Save the video element in the videoRef state variable.

4. Create a canvas element and add a ref to it using the useRef hook.

5. Create a button element with an onClick handler that captures the current frame from the video element and draws it onto the canvas element.

6. Inside the onClick handler, use the canvas element's getContext method to get the canvas context and the drawImage method to draw the current frame from the video element onto the canvas.

7. Create another button element with an onClick handler that downloads the captured image as a PNG file.

8. Inside the onClick handler, use the canvas element's toDataURL method to get the image data as a base64-encoded string, create a new a element with the href attribute set to the image data, and simulate a click on the a element to download the image.

9. Render the video, canvas, and both buttons inside the Camera component.

Bonus Requirements

• Add the ability to switch between the front and back camera on mobile devices.

• Add the ability to add filters to the captured image.

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into the React Photo Capture with Camera exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for the Photo Capture with Camera exercise

import { useState, useEffect, useRef } from "react";

function Camera() {
  const [videoRef, setVideoRef] = useState(null);
  const canvasRef = useRef(null);
  const [cameraAccess, setCameraAccess] = useState(false);

  useEffect(() => {
    async function getMedia() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: false
        });
        if (videoRef) {
          setCameraAccess(true);
          videoRef.srcObject = stream;
          videoRef.play();
        }
      } catch (error) {
        console.log(error);
        setCameraAccess(false);
      }
    }

    // Check if camera access has already been granted
    if (navigator.permissions) {
      navigator.permissions.query({ name: "camera" }).then((result) => {
        if (result.state === "granted") {
          getMedia();
        } else if (result.state === "prompt") {
          // Prompt the user to grant camera access
          navigator.mediaDevices.getUserMedia({ video: true }).then(getMedia);
        }
      });
    } else {
      // If browser doesn't support permissions API, just get the media
      getMedia();
    }
  }, [videoRef]);

  function capture() {
    const canvas = canvasRef.current;
    const video = videoRef;

    if (canvas && video) {
      canvas
        .getContext("2d")
        .drawImage(video, 0, 0, canvas.width, canvas.height);
    }
  }

  function download() {
    const canvas = canvasRef.current;
    if (canvas) {
      const dataURL = canvas.toDataURL("image/png");
      const link = document.createElement("a");
      link.href = dataURL;
      link.download = "photo.png";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }

  return (
    <div className="camera">
      <video
        ref={(ref) => setVideoRef(ref)}
        width="100%"
        height="100%"
        playsInline
        muted
        autoPlay
      />

      {cameraAccess ? (
        <>
          <canvas ref={canvasRef} width="640" height="480" />
          <button onClick={capture}>Capture</button>
          <button onClick={download}>Download</button>
        </>
      ) : (
        <p>Allow camera access to use this feature.</p>
      )}
    </div>
  );
}

export default Camera;

import React from "react";
import Camera from "./Camera";

function App() {
  return (
    <div className="App">
      <h1>Take a Photo</h1>
      <Camera />
    </div>
  );
}

export default App;

The Camera component can be used in a variety of applications that require the user to take photos, such as:

1. Social media apps: Users can take photos to share with their friends and followers on social media platforms like Instagram, Facebook, and Twitter.

2. E-commerce apps: Users can take photos of products they want to sell or buy on e-commerce platforms like eBay and Amazon.

3. Travel apps: Users can take photos of their travels and share them on travel apps like Airbnb, TripAdvisor, and Expedia.

4. Fitness apps: Users can take photos to track their progress in fitness apps like MyFitnessPal, Fitbit, and Nike Training Club.

5. Education apps: Students can take photos of their homework assignments and submit them to their teachers in education apps like Google Classroom, Canvas, and Blackboard.

6. Healthcare apps: Patients can take photos of their injuries or illnesses to share with their doctors in healthcare apps like Teladoc, Zocdoc, and HealthTap.

These are just a few examples of where the Camera component can be used in real-world applications.

Camera component we created is a useful tool for React developers who need to implement a photo capture feature in their applications. With this component, users can easily take photos with their webcam and download them for later use.

By following the instructions and requirements provided in this exercise, you should have a good understanding of how to create a Camera component without any third-party libraries and how to integrate it into a React application using functional components.

As always, make sure to test your code thoroughly and consider edge cases to ensure that your component works as expected.

Thanks for taking this JavaScript exercise!

I hope you found this exercise helpful and enjoyable, and that it has deepened your understanding of React development. Keep practising and experimenting with React, and you'll be well on your way to becoming a skilled React developer!

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.