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

npm i bootstrap

App.js

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

import "bootstrap/dist/css/bootstrap.min.css";

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";

import "bootstrap/dist/css/bootstrap.min.css";

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;

Related posts:

You Might Also Like

React.js Project to Convert Image to Base64 Code and Display it in TextArea Widget in Browser Using Javascript

Build a React.js PDF Renderer Document Generator in Browser Using react-pdf Library in Javascript Full Project For Beginners

React.js FusionChart.js Example to Draw Colorful Charts Using react-fusioncharts Library in Browser Using Javascript Full Project For Beginners

Leave a Reply Cancel reply