📸 Webcam React

Ultimate tool for working with media stream in your React application

References

• Demo
• Web API
• Browser Сompatibility

Installation

Install with npm or yarn

npm i @webcam/react
# or
yarn add @webcam/react

🦉 Philosophy

📸 Webcam React is a package that includes ready-made solutions for common cases of setting up and using a media stream from your webcam using Web API. Our goal is to create simple and flexible tools that allow users to create, test and maintain their products.

Features

• TypeScript support out of the box - full typed package
• Webcam Snapshots - creating an image from a video stream
• Media Stream Handling - request, errors, update, stop, etc
• Advanced Video Settings - selecting camera type and resolution
• Legacy API Support - outdated implementations for each browser
• React Apps Support - component and hooks for working with playing a media stream

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Webcam } from '@webcam/react';

const App = () => (
  <Webcam />
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

How to get webcam snapshot

Returns a base64 encoded string of the current video stream frame in the specified format and quality.

import { Webcam } from '@webcam/react';

const YourComponent = () => (
  <Webcam mirrored>
    {({ getSnapshot }) => (
      <button onClick={() => getSnapshot({ quality: 0.8 })}>
        Make photo
      </button>
    )}
  </Webcam>
);

API

You can pass any supported properties to the underlying video tag (eg autoPlay, className, etc). However, for convenience, the component uses its own values for these properties, but you can reassign them without any problems: | Prop | Type | Default | Note | | ------------------------- | -------- | ------------ | --------------------------------------------------------------------------------------- | | muted | boolean | true | excludes audio constraints from the MediaStream request | | autoPlay | boolean | true | | | playsInline | boolean | true | | | controls | boolean | false | |

The component also supports many properties for more specific work: | Prop | Type | Default | Note | | ------------------------- | -------- | ------------ | --------------------------------------------------------------------------------------- | | mirrored | boolean | false | show camera preview and get the screenshot mirrored | | mainCamera | boolean | object | false | should use a main camera (requires Navigator.mediaDevices.enumerateDevices) | | frontCamera | boolean | false | should use a front camera (MediaTrackConstraints['facingFront'] === 'user') | | applyConstraints | boolean | false | should new constraints be applied to the media stream | | cameraResolutionMode | string | 'ideal' | video track resolution mode - ('min' \| 'max' \| 'ideal' \| 'exact') | | cameraResolutionType | string | | video track resolution size - ('UHD' \| 'QHD' \| 'FHD' \| 'HD') | | requestTimeLimit | number | | limiting the media stream request by time | | onStreamRequest | function | | callback for when component requests a media stream | | onStreamStart | function | | callback for when component starts a media stream | | onStreamStop | function | | callback for when component stops a media stream | | onStreamError | function | | callback for when component can't receive a media stream | | audioConstraints | object ||MediaStreamConstraints['audio']| | videoConstraints | object ||MediaStreamConstraints['video']| | stream | object ||external MediaStream (turns off internal media stream handling logic)|

✨ Contributors