📸 React Webcam Ultimate

Ultimate tool for working with media stream and displaying it in your React application

Installation

Install with npm or yarn

npm i react-webcam-ultimate
# or
yarn add react-webcam-ultimate

Usage

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

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

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

Get webcam snapshot

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

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
muted	boolean	true
autoPlay	boolean	true
playsInline	boolean	true
controls	boolean	false

The component also supports many properties for more specific work:

Prop	Type	Default	Note
stream	boolean		external media stream (turns off internal media stream handling logic)
mirrored	boolean	false	show camera preview and get the screenshot mirrored
mainCamera	boolean	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
cameraResolutionType	string		video track resolution size - 'UHD'
cameraResolutionMode	string	'ideal'	video track resolution mode - 'min'
audioConstraints	object		audio track constraints - MediaStreamConstraints['audio']
videoConstraints	object		video track constraints - MediaStreamConstraints['video']
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