Skip to content

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

License

Notifications You must be signed in to change notification settings

michael-mir/react-webcam-ultimate

Repository files navigation

📸 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

About

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

Resources

License

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published