Capturing image using device camera in reactjs

by vsasikalabe Updated: Jan 24, 2023

In this kit, we're going to see how to Capturing image using device camera in reactjs with simple steps.The getUserMedia() method requests permission from the user to access the media defined in the configuration. It then returns a promise that will either resolve and return a MediaStream object that can be stored in local state or reject and return an error.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter. The desired file format and image quality may be specified. If the file format is not specified, or if the given format is not supported, then the data will be exported as image/png.

Please check the code below,

Preview of the output that you will get on running this code from your IDE

Code:

In this solution we use the React library.

using device camera for capturing image in reactjs

JavaScriptLines of Code : 78License : CC BY-SA 4.0

import React from "react";
import "./App.css";

class App extends React.Component {
  state = {
    imageDataURL: null,
  };

  initializeMedia = () => {
    this.setState({ imageDataURL: null });

    if (!("mediaDevices" in navigator)) {
      navigator.mediaDevices = {};
    }

    if (!("getUserMedia" in navigator.mediaDevices)) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        var getUserMedia =
          navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        if (!getUserMedia) {
          return Promise.reject(new Error("getUserMedia Not Implemented"));
        }

        return new Promise((resolve, reject) => {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      };
    }

    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then((stream) => {
        this.player.srcObject = stream;
      })
      .catch((error) => {
        console.error(error)
       });
  };

  capturePicture = () => {
    var canvas = document.createElement("canvas");
    canvas.width = this.player.videoWidth;
    canvas.height = this.player.videoHeight;
    var contex = canvas.getContext("2d");
    contex.drawImage(this.player, 0, 0, canvas.width, canvas.height);
    this.player.srcObject.getVideoTracks().forEach((track) => {
      track.stop();
    });

    console.log(canvas.toDataURL());
    this.setState({ imageDataURL: canvas.toDataURL() });
  };

  render() {
    const playerORImage = Boolean(this.state.imageDataURL) ? (
      <img src={this.state.imageDataURL} />
    ) : (
      <video
        ref={(refrence) => {
          this.player = refrence;
        }}
        autoPlay
      ></video>
    );

    return (
      <div className="App">
        {playerORImage}
        <button onClick={this.initializeMedia}>Take Photo</button>
        <button onClick={this.capturePicture}>Capture</button>
      </div>
    );
  }
}

export default App;

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Open the folder in IDE.
Copy the code using "copy" button above and paste it in App.js file(remove the earlier code from App.js).
Open the terminal from IDE.
npm start to run the file.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for 'Capturing image using device camera in reactjs 'in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
The solution is tested on Nodejs 16.14.2 version.
react 18.2.0 version.

Using this solution, we are able to Capturing image using device camera in reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to Capturing image using device camera in reactjs.