VideoCapture Component

Introduction

The VideoCapture component is a React-based video recording utility that leverages the browser's MediaDevices API to provide a customizable interface for capturing video and audio. This component includes advanced features such as Picture-in-Picture (PiP) support, video mirroring, and customizable quality settings, making it versatile for web applications requiring video recording functionality.

Table of Contents

1. Features
2. Installation
3. Props
4. Usage
5. Examples
6. Error Handling
7. Contributors
8. License

Features

• Customizable video quality: Choose between low, medium, or high quality.
• Mirror video: Option to mirror the video feed horizontally.
• Camera selection: Use the front or back camera.
• Audio and video support: Toggle audio and video recording independently.
• Picture-in-Picture mode: Enable PiP for multitasking.
• Stream events: Callbacks for stream start, errors, and recording completion.
• Customizable UI rendering through the render prop.

Installation

Install the component via npm or yarn:

npm install react-video-capture

yarn add react-video-capture

pnpm install react-video-capture

Props

| Prop | Type | Default | Description | |-------------------------------|----------------------------------|------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------| | videoEnabled | boolean | true | Enables or disables video capture. | | audioEnabled | boolean | true | Enables or disables audio capture. | | pipEnabled | boolean | true | Enables or disables Picture-in-Picture mode. | | mirrorVideo | boolean | false | Mirrors the video feed horizontally when enabled. | | quality | "low" | "medium" | "high" | "medium" | Sets the video quality. | | cameraType | "front" | "back" | "front" | Selects the camera type: front-facing or back-facing. | | onStreamStart | (stream: MediaStream) => void| undefined | Callback triggered when the media stream starts. | | onStreamError | (error: Error, errorMessage: string) => void | undefined | Callback triggered when an error occurs. Includes detailed error message. | | onRecordingComplete | (blob: Blob, videoUrl: string) => void | undefined | Callback triggered when the recording is complete, providing the video blob and URL. | | className | string | undefined | CSS class for styling the video element. | | style | React.CSSProperties | undefined | Inline styles for the video element. | | wrapperClassName | string | undefined | CSS class for styling the wrapper div. | | render | ({ isRecording, onClick }) => React.ReactNode | undefined | Custom render prop for UI customization, with control over recording state. | | errorClassName | string | undefined | CSS class for styling the error message div. | | errorMessageTranslate | object | undefined | Translations for error messages, including notAllowedErrorMessage, notFoundErrorMessage, etc. |

Usage

// Basic Example
import React from "react";
import VideoCapture from "./VideoCapture";

const App = () => {
  const handleRecordingComplete = (blob: Blob, videoUrl: string) => {
    console.log("Recording complete!", { blob, videoUrl });
  };

  return (
    <VideoCapture
      videoEnabled={true}
      audioEnabled={true}
      onRecordingComplete={handleRecordingComplete}
      className="video-class"
      wrapperClassName="wrapper-class"
    />
  );
};

export default App;

// Custom Render Example
<VideoCapture
  render={({ isRecording, onClick }) => (
    <button onClick={onClick}>
      {isRecording ? "Stop Recording" : "Start Recording"}
    </button>
  )}
/>

Examples

// Mirrored Video Example
<VideoCapture mirrorVideo={true} />

// Using the Back Camera
<VideoCapture cameraType="back" />

// High-Quality Video Recording
<VideoCapture quality="high" />

// Error Message Translation
<VideoCapture
  errorMessageTranslate={{
    notAllowedErrorMessage: "You need to allow camera access.",
    notFoundErrorMessage: "No camera found on this device.",
  }}
/>

Error Handling

// Example of Handling Errors
import React from "react";
import VideoCapture from "./VideoCapture";

const App = () => {
  const handleStreamError = (error: Error, message: string) => {
    console.error("Stream error:", error);
    alert(message);
  };

  return (
    <VideoCapture
      onStreamError={handleStreamError}
    />
  );
};

export default App;

Contributors

We welcome contributions from the community! If you have suggestions, improvements, or bug fixes, feel free to submit a pull request or open an issue on GitHub.

Current Contributors

• [Mohammad Garmabi] - Initial implementation and development.

Want to contribute? Follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or fix.
3. Submit a pull request describing your changes.

Thank you for helping make this project better!

License

This project is licensed under the MIT License.

You are free to use, modify, and distribute this software, as long as proper credit is given. See the LICENSE file in the repository for more details.

MIT License

Copyright (c) [2024] [Mohammad Garmabi]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.