### Run React Development Server with npm start

Source: https://github.com/purple-technology/react-camera-pro/blob/master/example/README.md

Starts the React application in development mode. It opens the app in the browser at http://localhost:3000 and reloads on code changes. Any lint errors are displayed directly in the console.

```Shell
npm start
```

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

### Install react-camera-pro via npm

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Command to install the react-camera-pro package using npm.

```shell
npm install --save react-camera-pro
```

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

### Eject Create React App Configuration with npm run eject

Source: https://github.com/purple-technology/react-camera-pro/blob/master/example/README.md

Removes the single build dependency from a Create React App project, copying all configuration files (Webpack, Babel, ESLint, etc.) directly into your project. This is a one-way operation that provides full control over the build setup but means the user is responsible for managing these configurations going forward.

```Shell
npm run eject
```

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

### Build React App for Production with npm run build

Source: https://github.com/purple-technology/react-camera-pro/blob/master/example/README.md

Builds the React application for production deployment. This command correctly bundles React in production mode, optimizes the build for best performance, minifies code, and includes hashes in filenames, preparing the app for deployment.

```Shell
npm run build
```

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

### Execute React Tests with npm test

Source: https://github.com/purple-technology/react-camera-pro/blob/master/example/README.md

Launches the test runner in interactive watch mode. This command allows developers to run tests and see results as code changes, facilitating a rapid testing workflow and improving development efficiency.

```Shell
npm test
```

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

### Handle Multiple Cameras and Switch Modes

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Illustrates how to detect the number of available cameras using numberOfCamerasCallback and programmatically switch between 'user' and 'environment' cameras using switchCamera().

```javascript
const Component = () => {
  const camera = useRef(null);
  const [numberOfCameras, setNumberOfCameras] = useState(0);
  const [image, setImage] = useState(null);

  //...

  return (
    <Camera ref={camera} numberOfCamerasCallback={setNumberOfCameras} />
      <img src={image} alt='Image preview' />
      <button
        onClick={() => {
            const photo = camera.current.takePhoto();
            setImage(photo);
        }}
      />
      <button
        hidden={numberOfCameras <= 1}
        onClick={() => {
          camera.current.switchCamera();
        }}
      />
  )

```

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

### Basic React Camera Component Usage

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Demonstrates how to integrate and use the Camera component in a React functional component, including taking a photo and displaying it. It uses useRef to control the camera and useState to manage the image.

```javascript
import React, { useState, useRef } from "react";
import {Camera} from "react-camera-pro";

const Component = () => {
  const camera = useRef(null);
  const [image, setImage] = useState(null);

  return (
    <div>
      <Camera ref={camera} />
      <button onClick={() => setImage(camera.current.takePhoto())}>Take photo</button>
      <img src={image} alt='Taken photo'/>
    </div>
  );
}

export Component;
```

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

### Camera Component Public Methods

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Describes the public methods available on the Camera component's ref, allowing programmatic control over camera functions like taking photos and switching cameras.

```APIDOC
Camera Component Methods:
- takePhoto():
    Returns: string (base64 encoded image)
    Description: Returns a base64 encoded string of the taken image.
- switchCamera():
    Returns: 'user' | 'environment'
    Description: Switches the camera (user to environment or vice versa). Returns the new camera mode.
- getNumberOfCameras():
    Returns: number
    Description: Returns the total number of available cameras.
```

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

### Set Camera Video Aspect Ratio

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Demonstrates how to define a custom aspect ratio for the camera video feed, such as 16:9, using the aspectRatio prop.

```javascript
const Cam = () => <Camera ref={camera} aspectRatio={16 / 9} />;
```

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

### Configure Camera Facing Mode

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Shows how to explicitly set the default camera facing mode to 'environment' (rear camera) using the facingMode prop.

```javascript
const Cam = () => <Camera ref={camera} facingMode='environment'} />
```

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

### Camera Component Props Reference

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Defines the configurable properties for the Camera React component, including camera mode, aspect ratio, and error message customization.

```APIDOC
Camera Component Props:
- facingMode:
    Type: 'user' | 'environment'
    Default: 'user'
    Notes: Default camera - 'user' (front) or 'environment' (back).
- aspectRatio:
    Type: 'cover' | number
    Default: 'cover'
    Notes: Aspect ratio of video (e.g., 16/9, 4/3).
- numberOfCamerasCallback:
    Type: (numberOfCameras: number) => void
    Default: () => null
    Notes: Callback invoked when the number of available cameras changes.
- errorMessages:
    Type: object? (see below)
    Default: (see below)
    Notes: Optional object to customize error messages.

errorMessages Type Definition:
{
  noCameraAccessible?: string;
  permissionDenied?: string;
  switchCamera?: string;
  canvas?: string;
}

errorMessages Default Values:
{
  noCameraAccessible: 'No camera device accessible. Please connect your camera or try a different browser.',
  permissionDenied: 'Permission denied. Please refresh and give camera permission.',
  switchCamera: 'It is not possible to switch camera to different one because there is only one video device accessible.',
  canvas: 'Canvas is not supported.'
}
```

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

### Embed Camera Component in Iframe

Source: https://github.com/purple-technology/react-camera-pro/blob/master/README.md

Provides the necessary HTML iframe tag with the allow attribute to enable camera access when embedding the component in a cross-origin iframe.

```html
<iframe src="https://example.com/camera-pro-iframe" allow="camera;"/>
```

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