{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-webcam"],"cli":null},"imports":["import Webcam from 'react-webcam';","import type { WebcamProps } from 'react-webcam';","const Webcam = require('react-webcam').default;"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}