React.js Webcam Project to Take Selfie Picture and Display it in Browser Using UseEffect & UseRef in Javascript

Welcome folks today in this blog post we will be taking selfie picture and display it inside browser using webcam and useEffect and useRef hooks in Javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js project using the below command

npx create-react-app sampleapp

And now you will be seeing the below directory structure of the react.js app

And now we need to make the App.js file and copy paste the following code

App.js

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

function App() {
  let videoRef = useRef(null);

  let photoRef = useRef(null)

  const getVideo = () => {
    navigator.mediaDevices
      .getUserMedia({
        video: true
      })
      .then((stream) => {
        let video = videoRef.current;
        video.srcObject = stream;
        video.play();
      })
      .catch((err) => {
        console.error(err);
      });
  };

  const takePicture = () => {
    const width = 400
    const height = width / (16 / 9)
    
    let video = videoRef.current

    let photo = photoRef.current

    photo.width = width

    photo.height = height

    let ctx = photo.getContext('2d')

    ctx.drawImage(video, 0, 0, width, height)
    
  }

  const clearImage = () => {
    let photo = photoRef.current

    let ctx = photo.getContext('2d')

    ctx.clearRect(0,0,photo.width,photo.height)
  }

  useEffect(() => {
    getVideo();
  }, [videoRef]);

  return (
    <div className="container">
      <h1 className="text-center">Camera Selfie App in React</h1>

      <video ref={videoRef} className="container"></video>

      <button onClick={takePicture} className="btn btn-danger container">Take Picture</button>

      <canvas className="container" ref={photoRef}></canvas>

      <button onClick={clearImage} className="btn btn-primary container">Clear Image</button>

      <br/><br/>
    </div>
  );
}

export default App;

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

function App() {

let videoRef = useRef(null);

let photoRef = useRef(null)

const getVideo = () => {

navigator.mediaDevices

.getUserMedia({

video: true

})

.then((stream) => {

let video = videoRef.current;

video.srcObject = stream;

video.play();

})

.catch((err) => {

console.error(err);

});

};

const takePicture = () => {

const width = 400

const height = width / (16 / 9)

let video = videoRef.current

let photo = photoRef.current

photo.width = width

photo.height = height

let ctx = photo.getContext('2d')

ctx.drawImage(video, 0, 0, width, height)

}

const clearImage = () => {

let photo = photoRef.current

let ctx = photo.getContext('2d')

ctx.clearRect(0,0,photo.width,photo.height)

}

useEffect(() => {

getVideo();

}, [videoRef]);

return (

<h1 className="text-center">Camera Selfie App in React</h1>

<button onClick={takePicture} className="btn btn-danger container">Take Picture</button>

<button onClick={clearImage} className="btn btn-primary container">Clear Image</button>

</div>

);

}

export default App;

As you can see we are using the useRef and useEffect hooks and then inside the html we have two buttons in which we allow the user to take the snapshot and clear the image. And then we have the section where we are showing the live user webcam as shown below