### Install react-webcam with npm or yarn

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

Instructions for installing the react-webcam package using either npm or yarn package managers.

```shell
# with npm
npm install react-webcam

# with yarn
yarn add react-webcam
```

--------------------------------

### Capture Screenshot using React Webcam Render Props

Source: https://github.com/mozmorris/react-webcam/blob/master/examples/index.html

This example demonstrates capturing a screenshot using the render props pattern provided by react-webcam. The Webcam component accepts a function as a child, which receives a getScreenshot function. This function can then be called, for instance, on a button click, to capture the current webcam frame.

```javascript
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenshot: null
    };
  }

  render() {
    return (
      <div>
        <h1>react-webcam</h1>
        <Webcam >
          {({ getScreenshot }) => (
            <button onClick={() => {
              const screenshot = getScreenshot()
              this.setState({ screenshot });
            }} >
              Capture photo
            </button>
          )}
        </Webcam>
        {this.state.screenshot ? <img src={this.state.screenshot} /> : null}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Basic Usage of Webcam Component in React

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

A simple example demonstrating how to import and use the Webcam component within a React application.

```jsx
import React from "react";
import Webcam from "react-webcam";

const WebcamComponent = () => <Webcam />;
```

--------------------------------

### Capture Screenshot with react-webcam

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

An example of how to capture a screenshot from the webcam using the getScreenshot method. It includes an option to specify dimensions for the captured image.

```javascript
getScreenshot({width: 1920, height: 1080});
```

--------------------------------

### Capture Screenshot using React Webcam Ref

Source: https://github.com/mozmorris/react-webcam/blob/master/examples/index.html

This snippet shows how to capture a screenshot from the webcam using a ref. It involves creating a ref to the Webcam component and calling the getScreenshot() method on it. The captured screenshot is then stored in the component's state and displayed as an image.

```javascript
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      screenshot: null
    };
  }

  handleClick = () => {
    const screenshot = this.webcam.getScreenshot();
    this.setState({ screenshot });
  }

  render() {
    return (
      <div>
        <h1>react-webcam</h1>
        <Webcam ref={node => this.webcam = node} />
        <div>
          <h2>Screenshot (via ref)</h2>
          <div className='screenshots'>
            <div className='controls'>
              <button onClick={this.handleClick}>capture</button>
            </div>
            {this.state.screenshot ? <img src={this.state.screenshot} /> : null}
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Display All Available Cameras (React JSX)

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

This React component enumerates all available video input devices and renders a Webcam instance for each. It uses `navigator.mediaDevices.enumerateDevices()` to get the device list and filters for video inputs. The `deviceId` is then used to specify which camera to use for each Webcam instance.

```jsx
const WebcamCapture = () => {
  const [deviceId, setDeviceId] = React.useState({});
  const [devices, setDevices] = React.useState([]);

  const handleDevices = React.useCallback(
    mediaDevices =>
      setDevices(mediaDevices.filter(({ kind }) => kind === "videoinput")),
    [setDevices]
  );

  React.useEffect(
    () => {
      navigator.mediaDevices.enumerateDevices().then(handleDevices);
    },
    [handleDevices]
  );

  return (
    <>
      {devices.map((device, key) => (
          <div>
            <Webcam audio={false} videoConstraints={{ deviceId: device.deviceId }} />
            {device.label || `Device ${key + 1}`}
          </div>

        ))}
    </>
  );
};

```

--------------------------------

### Select User/Selfie Camera (React JSX)

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

This example shows how to configure the Webcam component to use the user-facing (selfie) camera. It utilizes the `videoConstraints` prop with `facingMode: 'user'`. This is useful for applications requiring front-camera access.

```jsx
class WebcamCapture extends React.Component {
  render() {
    const videoConstraints = {
      facingMode: "user"
    };

    return <Webcam videoConstraints={videoConstraints} />;
  }
}

```

--------------------------------

### Capture Screenshot using Webcam Ref (React JSX)

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

This snippet demonstrates how to capture a screenshot using a ref to the Webcam component. It defines video constraints, a capture function that gets the screenshot data, and renders the Webcam component along with a capture button. Dependencies include React and the Webcam component.

```jsx
const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};

const WebcamCapture = () => {
  const webcamRef = React.useRef(null);
  const capture = React.useCallback(
    () => {
      const imageSrc = webcamRef.current.getScreenshot();
    },
    [webcamRef]
  );
  return (
    <>
      <Webcam
        audio={false}
        height={720}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={1280}
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>Capture photo</button>
    </>
  );
};

```

--------------------------------

### Apply CSS Filters to React Webcam Streams

Source: https://github.com/mozmorris/react-webcam/blob/master/examples/index.html

This snippet showcases how to apply various CSS filters directly to Webcam components using the 'style' prop. Filters like grayscale, sepia, saturate, hue-rotate, invert, brightness, contrast, and blur can be applied to alter the visual appearance of the webcam feed. Each Webcam instance can have unique styling.

```javascript
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>react-webcam</h1>
        <div>
          <h2>CSS Filters & style prop</h2>
          <div className='webcams'>
            <Webcam width='212' height='160' />
            <Webcam width='212' height='160' style={{ transform: 'rotate(180deg)' }} />
            <Webcam width='212' height='160' />
            <Webcam width='212' height='160' style={{ transform: 'rotate(180deg)' }} />
            <Webcam width='212' height='160' />
            <Webcam width='212' height='160' style={{ transform: 'rotate(180deg)' }} />
            <Webcam width='212' height='160' />
            <Webcam width='212' height='160' style={{ transform: 'rotate(180deg)'}}/>
            <Webcam width='212' height='160' />
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### React Webcam Component API

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

Documentation for the react-webcam component, detailing its props and methods for capturing webcam images.

```APIDOC
## React Webcam Component

### Description
Provides a reusable webcam component for React applications, enabling easy integration of webcam functionality.

### Method
Component

### Endpoint
N/A

### Props
#### Component Props
- **audio** (boolean) - Optional - Defaults to `false`. Enable/disable audio.
- **audioConstraints** (object) - Optional - MediaStreamConstraint(s) for the audio.
- **disablePictureInPicture** (boolean) - Optional - Defaults to `false`. Disable Picture-in-Picture.
- **forceScreenshotSourceSize** (boolean) - Optional - Defaults to `false`. Uses size of underlying source video stream.
- **imageSmoothing** (boolean) - Optional - Defaults to `true`. Pixel smoothing of the screenshot taken.
- **mirrored** (boolean) - Optional - Defaults to `false`. Show camera preview and get the screenshot mirrored.
- **minScreenshotHeight** (number) - Optional - Minimum height of screenshot.
- **minScreenshotWidth** (number) - Optional - Minimum width of screenshot.
- **onUserMedia** (function) - Optional - Callback for when component receives a media stream.
- **onUserMediaError** (function) - Optional - Callback for when component can't receive a media stream.
- **screenshotFormat** (string) - Optional - Defaults to `'image/webp'`. Format of screenshot.
- **screenshotQuality** (number) - Optional - Defaults to `0.92`. Quality of screenshot (0 to 1).
- **videoConstraints** (object) - Optional - MediaStreamConstraints(s) for the video.

Any other valid HTML video tag props can also be passed.

### Methods
#### getScreenshot
- **Description**: Returns a base64 encoded string of the current webcam image.
- **Usage**: `getScreenshot()`
- **With Dimensions**: `getScreenshot({width: 1920, height: 1080})`

### Request Example
```jsx
<Webcam />
```

### Response Example
#### Success Response (Screenshot)
- **screenshot** (string) - Base64 encoded image string.

```javascript
// Example of getting a screenshot
const webcamRef = React.useRef(null);
const capture = React.useCallback(
  () => {
    const imageSrc = webcamRef.current.getScreenshot();
    console.log(imageSrc);
  },
  [webcamRef]
);
```

### The Constraints
Constraints can be passed via the `videoConstraints` prop to configure the media stream. Refer to MDN for details:
- [MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
- [Media Streams API/Constraints](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints)

**Example Constraint:**
```javascript
const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};
```
```

--------------------------------

### Advanced Screenshot Capture with Render Props

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

Demonstrates using render props to capture a photo. It configures video constraints for resolution and camera facing mode, and includes a button to trigger the screenshot capture.

```jsx
const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};

const WebcamCapture = () => (
  <Webcam
    audio={false}
    height={720}
    screenshotFormat="image/jpeg"
    width={1280}
    videoConstraints={videoConstraints}
  >
    {( { getScreenshot } ) => (
      <button
        onClick={() => {
          const imageSrc = getScreenshot()
        }}
      >
        Capture photo
      </button>
    )}
  </Webcam>
);
```

--------------------------------

### Allow Cross-Origin Iframe Access (HTML)

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

This HTML snippet shows how to configure an iframe to allow access to the camera and microphone when embedding a webcam-enabled page from a different origin. The `allow` attribute is crucial for overcoming Chrome's security restrictions.

```html
<iframe src="https://my-website.com/page-with-webcam" allow="camera; microphone;"/>

```

--------------------------------

### Upload Image with JSON Data via Curl

Source: https://github.com/mozmorris/react-webcam/wiki/Home

This snippet demonstrates how to use curl to send a POST request to a server endpoint. It constructs a JSON payload containing a base64 encoded image and other metadata. This approach is useful for testing server-side image upload functionalities, especially when dealing with complex JSON structures and binary data.

```shell
curl -v -X POST -H "Content-Type: application/json"  https://foo.bar/api/image     -d @<( 
  printf ' { "image": "data:image/webp;base64,' 
  /usr/bin/base64  ~/vertical_4.jpg | tr -d '\n' 
  printf '", "assayInstance": "Q", "email": "eric@meterbolic.org"}\n'
)
```

--------------------------------

### Select Environment/Facing-Out Camera (React JSX)

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

This code snippet demonstrates how to select the environment-facing (rear) camera using the `videoConstraints` prop with `facingMode: { exact: 'environment' }`. This is suitable for applications needing access to the device's back camera.

```jsx
class WebcamCapture extends React.Component {
  render() {
    const videoConstraints = {
      facingMode: { exact: "environment" }
    };

    return <Webcam videoConstraints={videoConstraints} />;
  }
}

```

--------------------------------

### Mirror Video with CSS (CSS)

Source: https://github.com/mozmorris/react-webcam/blob/master/README.md

This CSS rule applies a horizontal flip (transform: scaleX(-1)) to the video element. This is used to display a mirrored video feed while ensuring that screenshots taken from the webcam are not mirrored.

```css
video {
  transform: scaleX(-1);
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.