Using device camera for capturing image in reactjs

Active3 hr before
Viewed126 times

11 Answers


Before we design the webcam component,I will create a form that will accept some details along with the image captured via Webcam.,Create a basic form with input elements that will capture the image of the user and some more details.,Inside the form that we had created , add your WebcamCapture component rendering.

Create a basic form with input elements that will capture the image of the user and some more details.

import React,{useState} from 'react'import { WebcamCapture } from '../Webcam/Webcam';import './homeStyles.css'const Home = () => {const [name,setName]=useState('')const [email,setEmail]=useState('');const submitForm = () =>{    alert("Form submitted")}return (<div className="home-container"> <div className="container">   <div className="text">    <h1>Fill up this form!</h1>   <form className="form"> <input type="email" placeholder="Email" onChange={(e)=>setEmail(}/> <input type="text" placeholder="Name" onChange={(e)=>setName(}/>  <button type="submit" id="login-button" onClick={(e)=>submitForm(e)}>Submit</button>      </form>    </div> </div></div>)}export default Home

Styling added to the CSS file:

@font - face {
      font - family: 'Source Sans Pro';
      font - style: normal;
      font - weight: 200;
      src: url(https: // format('truetype');}@font-face {font-family: 'Source Sans Pro';font-style: normal;font-weight: 300;src: url( format('truetype');}.home-container {box-sizing: border-box;/* background-color: rgb(250, 193, 193); */background: #FBD3E9;  /* fallback for old browsers */background: linear-gradient(to left, #FBD3E9, #0e6e02);margin: 0;min-height:80vh;padding:60px 0;overflow: hidden;font-family: 'Source Sans Pro', sans-serif;}.home-container .container {max-width:60vw;margin: 0 auto;display: flex;padding: 0;background-color: white;border-left: 1px solid white;border-radius: 8px 0 0 8px;}.home-container .container h1 {font-size: 40px;color:#0e6e02;font-weight:600;animation: fadein 3s;margin-bottom:20px;}.home-container .container .text{width: 90%;padding:30px 0;text-align: center;margin:0 auto;}.home-container form {padding: 20px 0;position: relative;z-index: 2;width: 70%;margin:0 auto;}.home-container form input {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;border: 1px solid #0e6e02;width: 55%;border-radius: 3px;padding: 10px 15px;margin:10px auto 10px auto;display: block;text-align: center;font-size: 18px;color: #0e6e02;transition-duration: 0.25s;}.home-container form input:hover {background-color: #0e6e02;color:#FBD3E9;}.home-container form input:focus {background-color:#0e6e02;width: 300px;color:#FBD3E9;}.home-container form ::placeholder{color:#0e6e02;}.home-container form input:hover::placeholder{color:white;}.home-container form button {-webkit-appearance: none;-moz-appearance: none;appearance: none;outline: 0;background-color: #0e6e02;border: 0;padding: 10px 15px;color: #FBD3E9;border-radius: 3px;font-size:20px;width: 60%;cursor: pointer;transition-duration: 0.25s;}.home-container form button:hover {border: 1px solid  #0e6e02;border-radius: 5px;background-color: #f5f7f9;color: #0e6e02;}

Media queries ~

@media screen and(max - width: 1000 px) {
   .home - container.container {
      max - width: 90 vw;
@media screen and(max - width: 678 px) {
   .login - container {
      padding - top: 10 % ;
   }.home - container.container {
      max - width: 80 vw;
   }.home - container form {
      width: 90 % ;
   }.home - container.loginDesign {
      display: none;
   }.home - container.container.text {
      width: 100 % ;padding: 80 px 20 px;

In App.js component ,make a call to the Homecmp Component using <Homecmp/> inside the div tag.

function App() {return (<div className="App"><HomeCmp/></div>);}export default App;
load more v

The first objective of this package comes from the need to get the same look and feel of a native mobile camera app but with a react component. For those who want to build with their own css and need an abstraction of getUserMedia() take a look of jslib-html5-camera-photo with react.,,

npm install--save react - html5 - camera - photo
load more v

# with npm
npm install react - webcam

# with yarn
yarn add react - webcam
load more v

 Pretag team - issue, fix, solve, resolve

I have try with react-camera and react-webcam package but nothing works.,I need to have ability to take a picture with desktop camera or mobile phone camera from my web application localhost:3000/user-camera route component. And, please dont write about any native solutions because I'm not working on mobile app.,To learn more, see our tips on writing great answers.

Try this simple module I created on the fly just to test this interesting feature:

const camera = function() {
   let width = 0;
   let height = 0;

   const createObjects = function() {

      const video = document.createElement('video'); = 'video';
      video.width = width;
      video.width = height;
      video.autoplay = true;

      const canvas = document.createElement('canvas'); = 'canvas';
      canvas.width = width;
      canvas.width = height;

   return {
      video: null,
      context: null,
      canvas: null,

      startCamera: function(w = 680, h = 480) {
         if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            width = w;
            height = h;


   = document.getElementById('video');
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');

            (function(video) {
                  video: true
               }).then(function(stream) {
                  video.srcObject = stream;


      takeSnapshot: function() {
         this.context.drawImage(, 0, 0, width, height);


export default camera;
load more v

Short answer:

<input type="file" accept="image/*" capture="environment">
load more v

Declare a state object for the component with a property imageURL to store the URL of the captured image.,We are assigning an empty string to the imageURL and then start the web camera to take another picture.,The anchor element has a download attribute with the value selfie.png, the href attribute is updated with the imageURL property of the state. So that we can download the captured image by clicking this anchor element.

To assign a reference, you should use createRef method of React object

import React, {
} from 'react';

class Selfie extends Component {
   state = {
      imageURL: ''

   videoEle = React.createRef();
   canvasEle = React.createRef();
   imageEle = React.createRef();

   render() {
      return null;

export default Selfie;
load more v

With the ability to capture an image, all that remains is to implement a card-aid overlay, a flash animation on capture, and style the elements using styled-components.,Thanks so much for this. How do i adapt this to capture video as against taking a picture?,We then pass the canvas’s width and height to the context clearRect() function to convert the requested pixels to transparent and resume displaying the video feed.



Let’s begin by accessing the browser navigator and invoking the getUserMedia() method to display a live video feed from the user’s camera.

load more v

This allows us to access the device camera and take snapshots in a mobile device.,Our next step would be to access the mobile device camera from the PWA app that we just created.,Access device features such as the camera on React PWA (Progressive Web Apps).

1. Create a new react app with CRA

npx create - react - app sample - pwacd sample - pwa

After the above changes, the index.js file will be as follows,

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';ReactDOM.render( <React.StrictMode>
   <App />
</React.StrictMode>, document.getElementById('root'));serviceWorker.register();
load more v

 Pretag team - issue, fix, solve, resolve

In this article, we will learn how to open web or mobile camera and take anphoto from SharePoint Framework webpart.,              <p className={ styles.subTitle }>This is demo of how to open webcam and take photo from SPFx webpart.  ,Added 3 buttons, open cam, take a photo and close cam and bind event handler to respective method. We will add events method in the next step.

 Pretag team - issue, fix, solve, resolve

Other "device-camera" queries related to "Using device camera for capturing image in reactjs"