{"id":15222,"library":"react-webcam","title":"React Webcam Component","description":"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.","status":"active","version":"7.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/mozmorris/react-webcam","tags":["javascript","react","react-component","webcam","typescript"],"install":[{"cmd":"npm install react-webcam","lang":"bash","label":"npm"},{"cmd":"yarn add react-webcam","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-webcam","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary Webcam component is a default export.","wrong":"import { Webcam } from 'react-webcam';","symbol":"Webcam","correct":"import Webcam from 'react-webcam';"},{"note":"Use 'type' import for TypeScript interfaces to ensure they are stripped from runtime bundles.","wrong":"import { WebcamProps } from 'react-webcam';","symbol":"WebcamProps","correct":"import type { WebcamProps } from 'react-webcam';"},{"note":"For CommonJS environments, explicitly access the '.default' property as it's an ESM default export.","wrong":"const Webcam = require('react-webcam');","symbol":"Webcam (CJS)","correct":"const Webcam = require('react-webcam').default;"}],"quickstart":{"code":"import React, { useRef, useState, useCallback } from 'react';\nimport Webcam from 'react-webcam';\n\nconst videoConstraints = {\n  width: 1280,\n  height: 720,\n  facingMode: 'user',\n};\n\nconst WebcamCapture = () => {\n  const webcamRef = useRef(null);\n  const [imageSrc, setImageSrc] = useState(null);\n\n  const capture = useCallback(() => {\n    if (webcamRef.current) {\n      const screenshot = webcamRef.current.getScreenshot();\n      setImageSrc(screenshot);\n      console.log('Screenshot captured:', screenshot ? 'Yes' : 'No');\n    }\n  }, [webcamRef]);\n\n  return (\n    <div className=\"webcam-container\">\n      <Webcam\n        audio={false}\n        ref={webcamRef}\n        screenshotFormat=\"image/jpeg\"\n        width={640}\n        height={360}\n        videoConstraints={videoConstraints}\n        onUserMediaError={(error) => console.error('Webcam error:', error)}\n      />\n      <button onClick={capture}>Capture photo</button>\n      {imageSrc && (\n        <div>\n          <h3>Captured Image:</h3>\n          <img src={imageSrc} alt=\"webcam-screenshot\" />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default WebcamCapture;","lang":"typescript","description":"Demonstrates how to integrate the Webcam component, configure video constraints, and capture a screenshot, handling potential errors."},"warnings":[{"fix":"Ensure your application is served over HTTPS in production and development (e.g., using `https://localhost` or a tunneling service).","message":"Accessing 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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).","message":"Webcam 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be mindful of this prop's interaction with other dimension-related settings for `getScreenshot` to avoid unexpected image sizes.","message":"The `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`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Prompt the user to grant camera permissions and ensure the application is running on a secure origin (HTTPS or localhost).","cause":"The user denied webcam access permission or the page is not served over HTTPS.","error":"NotAllowedError: Permission denied"},{"fix":"Ensure the `webcamRef.current` exists before calling `getScreenshot`. This often means checking `if (webcamRef.current)` before accessing its methods.","cause":"Attempting to call `getScreenshot` on a `webcamRef.current` that is `null` or `undefined` because the Webcam component hasn't rendered or mounted yet.","error":"TypeError: Cannot read properties of undefined (reading 'getScreenshot')"},{"fix":"Serve your application over HTTPS. For local development, use `https://localhost`.","cause":"The browser's `getUserMedia` API was invoked from an insecure origin (HTTP instead of HTTPS).","error":"MediaStreamError: Only secure origins are allowed."},{"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.","cause":"This can be due to various reasons: permission denied, no camera detected, incorrect video constraints, or browser compatibility issues.","error":"Webcam showing blank screen"}],"ecosystem":"npm"}