react-webcam

library7.2.0jsnpmunverified

react-webcam is a React component designed to streamline the integration of webcam functionality into web applications. As of its latest stable release, version 7.2.0 (published approximately two years ago), it provides a declarative API for accessing the user's camera, displaying the video stream, and capturing still images. It abstracts away the complexities of the underlying MediaDevices.getUserMedia() API, handling permissions, stream management, and rendering the video feed within a standard React component lifecycle. Key differentiators include its straightforward prop interface for controlling audio, video constraints, and screenshot behavior, as well as a dedicated method (`getScreenshot`) for capturing images in various formats and qualities. While the npm package hasn't seen a recent major release, its GitHub repository shows ongoing activity in issues, suggesting continued maintenance. It fully supports TypeScript, enhancing developer experience with type safety. The component is particularly useful for applications requiring photo capture, video previews, or integration with image processing libraries.

web-framework

npm install react-webcam

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-WEBCAM

react-webcam

web-frameworkjavascriptv7.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Webcam

✓ import Webcam from 'react-webcam';

✗ import { Webcam } from 'react-webcam';

The primary Webcam component is a default export.

WebcamProps

✓ import type { WebcamProps } from 'react-webcam';

✗ import { WebcamProps } from 'react-webcam';

Use 'type' import for TypeScript interfaces to ensure they are stripped from runtime bundles.

Webcam (CJS)

✓ const Webcam = require('react-webcam').default;

✗ const Webcam = require('react-webcam');

For CommonJS environments, explicitly access the '.default' property as it's an ESM default export.

Demonstrates how to integrate the Webcam component, configure video constraints, and capture a screenshot, handling potential errors.

import React, { useRef, useState, useCallback } from 'react'; import Webcam from 'react-webcam'; const videoConstraints = { width: 1280, height: 720, facingMode: 'user', }; const WebcamCapture = () => { const webcamRef = useRef(null); const [imageSrc, setImageSrc] = useState(null); const capture = useCallback(() => { if (webcamRef.current) { const screenshot = webcamRef.current.getScreenshot(); setImageSrc(screenshot); console.log('Screenshot captured:', screenshot ? 'Yes' : 'No'); } }, [webcamRef]); return ( <div className="webcam-container"> <Webcam audio={false} ref={webcamRef} screenshotFormat="image/jpeg" width={640} height={360} videoConstraints={videoConstraints} onUserMediaError={(error) => console.error('Webcam error:', error)} /> <button onClick={capture}>Capture photo</button> {imageSrc && ( <div> <h3>Captured Image:</h3> <img src={imageSrc} alt="webcam-screenshot" /> </div> )} </div> ); }; export default WebcamCapture;

Debug

Known issues

breakingAccessing the webcam via `getUserMedia` (which react-webcam uses) is restricted to secure contexts (HTTPS or localhost). Browsers will throw a `NotAllowedError` or `SecurityError` if the page is loaded over HTTP.

fix

Ensure your application is served over HTTPS in production and development (e.g., using `https://localhost` or a tunneling service).

affects: >=1.0.0

gotchaThe `getScreenshot` method should only be called once the webcam stream is active and the component's `ref` is populated. Calling it too early can lead to `null` or `undefined` issues, or an empty screenshot.

fix

Use React's `useRef` and conditionally call `getScreenshot` after the component has mounted and `onUserMedia` has fired, or within an event handler triggered by user interaction.

affects: >=1.0.0

gotchaWebcam access requires explicit user permission. If the user denies permission, `onUserMediaError` will be called with a `MediaStreamError`, and the webcam stream will not activate, resulting in a blank video area.

fix

Implement robust error handling with the `onUserMediaError` prop to inform the user about permission issues and guide them on how to grant access (e.g., checking browser settings).

affects: >=1.0.0

gotchaThe `forceScreenshotSourceSize` prop, when true, forces `getScreenshot` to use the dimensions of the underlying video stream, potentially overriding `minScreenshotHeight`/`minScreenshotWidth` or dimensions passed directly to `getScreenshot`.

fix

Be mindful of this prop's interaction with other dimension-related settings for `getScreenshot` to avoid unexpected image sizes.

affects: >=1.0.0

Errors

Common errors & fixes

NotAllowedError: Permission denied

The user denied webcam access permission or the page is not served over HTTPS.

fix

Prompt the user to grant camera permissions and ensure the application is running on a secure origin (HTTPS or localhost).

TypeError: Cannot read properties of undefined (reading 'getScreenshot')

Attempting to call `getScreenshot` on a `webcamRef.current` that is `null` or `undefined` because the Webcam component hasn't rendered or mounted yet.

fix

Ensure the `webcamRef.current` exists before calling `getScreenshot`. This often means checking `if (webcamRef.current)` before accessing its methods.

MediaStreamError: Only secure origins are allowed.

The browser's `getUserMedia` API was invoked from an insecure origin (HTTP instead of HTTPS).

fix

Serve your application over HTTPS. For local development, use `https://localhost`.

Webcam showing blank screen

This can be due to various reasons: permission denied, no camera detected, incorrect video constraints, or browser compatibility issues.

fix

Check browser console for `MediaStreamError` messages. Verify camera is connected and not in use by another application. Review `videoConstraints` for validity and ensure HTTPS is used. Implement `onUserMediaError` to debug specific errors.

Upgrade

Version history

7.2.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

react-domrequiredPeer dependency for rendering React components to the DOM.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/mozmorris/react-webcam ↗

packagehttps://www.npmjs.com/package/react-webcam ↗