🎥 Use Simple Camera



Use Simple Camera is a production-ready, zero-dependency React hook library for comprehensive camera and media handling. It provides a robust set of hooks for video recording, local/remote storage, computer vision (barcodes, motion detection), and hardware controls (zoom, flash, pan, tilt).

✨ Features

- 📸 Easy Camera Access: Simple API to get camera stream, switch cameras, and capture images.
- 🎥 Video Recording: Record video/audio blobs with MediaRecorder API.
- 💾 Storage: Save recordings to IndexedDB or upload via XHR/S3.
- 🔍 Computer Vision: Built-in hooks for Barcode detection and Motion detection.
- 🛠 Hardware Controls: Control Zoom, Flash, Pan, and Tilt if supported.
- 🎙 Audio Utilities: Monitor microphone volume levels in real-time.
- 📱 Orientation: Detect device orientation for responsive UI.
- 🌲 Tree Shakeable: Import only the hooks you need.

---

📦 Installation

``bash
npm install /use-simple-camera

or

pnpm add /use-simple-camera

or

yarn add /use-simple-camera
`

---

⚡ Quick Start

The useSimpleCamera hook is the entry point that composes most features, but you can use individual hooks as standalone primitives.

`tsx
import { useSimpleCamera } from "/use-simple-camera";

const App = () => {
const { stream, ref, error, startCamera, captureImage } = useSimpleCamera();

if (error) return

Error: {error.message}

;

return (

);
};
`

---

📚 API Documentation

$3

The main hook for managing camera lifecycle, permissions, and stream state.

| Property | Type | Description |
| :--- | :--- | :--- |
| stream | MediaStream \| null | The active camera stream. |
| startCamera | (constraints?) => Promise | Manually starts the camera. |
| stopCamera | () => void | Stops all tracks and releases camera. |
| captureImage | (options?) => string | Captures a base64 image. |
| error | CameraError \| null | Typed error object if something fails. |
| isCameraActive | boolean | True if stream is active. |
| switchCamera | () => void | Toggles between front and back cameras. |

$3

Handles video and audio recording with support for separate streams and callbacks.

`tsx
import { useRecorder } from "use-simple-camera";
const { startRecording, stopRecording, isRecording } = useRecorder(stream);
`

| Property | Type | Description |
| :--- | :--- | :--- |
| startRecording | (options?) => void | Starts recording media. Options: mode, onComplete. |
| stopRecording | () => void | Stops recording and triggers onComplete with blob. |
| takeSnapshot | () => Promise | Captures a high-res still photo. |

$3

Manage local persistence (IndexedDB) and remote uploads (S3/XHR).

`tsx
import { useStorage } from "use-simple-camera";
const { saveToLocal, uploadToRemote } = useStorage();
`

| Property | Type | Description |
| :--- | :--- | :--- |
| saveToLocal | (blob, name, opts) => Promise | Save blob to IndexedDB with optional retention. |
| getFromLocal | (name) => Promise | Retrieve blob from IndexedDB. |
| uploadToRemote | (blob, opts) => Promise | Upload to signed URL. Options: headers, timeout, etc. |

$3

Control hardware features like Zoom, Flash, Pan, and Tilt.

`tsx
import { useCameraControls } from "use-simple-camera";
const { zoom, setZoom, flash, setFlash, supports } = useCameraControls(stream);
`

$3

Detects QR codes and Barcodes in real-time.

`tsx
const { barcodes, isScanning } = useBarcodeScanner(stream, { formats: ['qr_code'] });
`

$3

Detects movement in the video feed using pixel differencing.

`tsx
const { motionDetected } = useMotionDetection(stream, { threshold: 10 });
`

$3

Monitors real-time microphone volume.

`tsx
const { volume } = useAudioLevel(stream); // 0-100
`

$3

Tracks device screen orientation.

`tsx
const { orientation, angle } = useOrientation(); // 'portrait' | 'landscape'
`

$3

Enumerates available audio and video inputs.

`tsx
const { videoDevices, audioDevices } = useMediaDevices();
``

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.