React Photo Capture with Camera – JavaScript Exercise #14

Overview

Create a React Photo Capture with Camera app without third-party libraries. To achieve this, the app will make use of the getUserMedia API to access the user’s camera and the canvas element to capture the image. This exercise teaches using native browser APIs and building React functional components, including capturing webcam images without external dependencies.

Instructions for React Photo Capture with Camera

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.

Take time to attempt the exercise before seeing the final output. Furthermore, I believe that active learning is the most effective way to learn and grow as a developer.

First, prepare your tools and start the React Photo Capture exercise. Once you have completed the exercise, you can then return to this blog post to compare your solution to mine.

Output for the React 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.

For example, 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.

This exercise teaches you to create and integrate a Camera component in a React application using functional components without third-party libraries.

Thoroughly test your code and edge cases to ensure component functionality.

Additionally, thanks for taking this JavaScript exercise!

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

Boost your React skills with 25 React JavaScript Practice Exercises with Solutions hands-on challenges to master components, hooks, and more!