Convert Figma logo to code with AI

mrousavy logoreact-native-vision-camera

📸 A powerful, high-performance React Native Camera library.

8,165
1,165
8,165
242

Top Related Projects

📸 A powerful, high-performance React Native Camera library.

A Camera component for React Native. Also supports barcode scanning!

An unified permissions API for React Native on iOS, Android and Windows.

Quick Overview

React Native Vision Camera is a powerful and feature-rich camera library for React Native applications. It provides a high-performance, easy-to-use API for capturing photos, recording videos, and implementing advanced camera features like face detection and barcode scanning.

Pros

  • High performance and low memory usage
  • Extensive feature set including photo capture, video recording, and frame processors
  • Support for both iOS and Android platforms
  • Active development and community support

Cons

  • Requires React Native 0.63 or higher
  • Some advanced features may require additional setup or permissions
  • Learning curve for developers new to camera APIs
  • Limited support for older devices

Code Examples

  1. Basic camera setup:
import { Camera, useCameraDevices } from 'react-native-vision-camera';

function CameraComponent() {
  const devices = useCameraDevices();
  const device = devices.back;

  if (device == null) return <LoadingView />;
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  );
}
  1. Capturing a photo:
const photo = await camera.current.takePhoto({
  qualityPrioritization: 'speed',
  flash: 'auto',
});
console.log(`Photo taken: ${photo.path}`);
  1. Recording a video:
const video = await camera.current.startRecording({
  flash: 'on',
  onRecordingFinished: (video) => console.log(video),
  onRecordingError: (error) => console.error(error),
});

// Stop recording after 5 seconds
setTimeout(() => {
  camera.current.stopRecording();
}, 5000);

Getting Started

  1. Install the library:

    npm install react-native-vision-camera
    
  2. Add camera permissions to your app:

    • iOS: Add NSCameraUsageDescription and NSMicrophoneUsageDescription to Info.plist
    • Android: Add <uses-permission android:name="android.permission.CAMERA" /> to AndroidManifest.xml
  3. Import and use the Camera component in your React Native app:

    import { Camera, useCameraDevices } from 'react-native-vision-camera';
    
    function App() {
      const devices = useCameraDevices();
      const device = devices.back;
    
      if (device == null) return <LoadingView />;
      return (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
        />
      );
    }
    

Competitor Comparisons

📸 A powerful, high-performance React Native Camera library.

Pros of react-native-vision-camera

  • Identical repository names make comparison irrelevant
  • Both repositories are the same project by the same author

Cons of react-native-vision-camera

  • No meaningful differences to compare
  • Identical repositories lead to redundant analysis

Code Comparison

As both repositories are identical, there are no code differences to highlight.

Additional Notes

The comparison request appears to be for the same repository: mrousavy/react-native-vision-camera. This project is a powerful camera library for React Native, offering features like:

  • High-performance camera capture and processing
  • Frame processors for real-time video analysis
  • Support for photo, video, and RAW captures
  • Extensive device controls (zoom, focus, exposure, etc.)
  • Cross-platform compatibility (iOS and Android)

To provide a meaningful comparison, different repositories or projects would need to be specified. If you intended to compare this camera library with another React Native camera solution, please provide the name of the alternative project for a proper analysis.

A Camera component for React Native. Also supports barcode scanning!

Pros of react-native-camera

  • More mature and established project with a larger community
  • Supports a wider range of devices and older React Native versions
  • Offers additional features like face detection and barcode scanning

Cons of react-native-camera

  • Less performant compared to Vision Camera
  • Slower development cycle and less frequent updates
  • More complex API and configuration process

Code Comparison

react-native-camera:

<RNCamera
  ref={ref => {
    this.camera = ref;
  }}
  style={styles.preview}
  type={RNCamera.Constants.Type.back}
  flashMode={RNCamera.Constants.FlashMode.on}
  androidCameraPermissionOptions={{
    title: 'Permission to use camera',
    message: 'We need your permission to use your camera',
    buttonPositive: 'Ok',
    buttonNegative: 'Cancel',
  }}
/>

Vision Camera:

<Camera
  style={StyleSheet.absoluteFill}
  device={device}
  isActive={true}
  photo={true}
/>

Vision Camera offers a more streamlined API with fewer configuration options required for basic functionality. The code is more concise and easier to understand, while react-native-camera provides more granular control over camera settings and permissions.

An unified permissions API for React Native on iOS, Android and Windows.

Pros of react-native-permissions

  • Broader scope: Handles various types of permissions beyond camera access
  • Simpler API: Easier to use for general permission management
  • More mature: Longer development history and wider adoption

Cons of react-native-permissions

  • Less specialized: Doesn't provide advanced camera-specific features
  • Performance: May be less optimized for camera-related tasks
  • Updates: Potentially slower to adopt new platform-specific camera features

Code Comparison

react-native-permissions:

import { check, request, PERMISSIONS } from 'react-native-permissions';

const checkCameraPermission = async () => {
  const result = await check(PERMISSIONS.IOS.CAMERA);
  if (result === 'denied') {
    await request(PERMISSIONS.IOS.CAMERA);
  }
};

react-native-vision-camera:

import { Camera, useCameraPermission } from 'react-native-vision-camera';

function App() {
  const { hasPermission, requestPermission } = useCameraPermission();
  if (!hasPermission) {
    requestPermission();
  }
  return <Camera />;
}

The react-native-permissions code is more generic and can handle various permission types, while react-native-vision-camera provides a more streamlined approach specifically for camera permissions and usage.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

VisionCamera

Features

VisionCamera is a powerful, high-performance Camera library for React Native. It features:

  • 📸 Photo and Video capture
  • 👁️ QR/Barcode scanner
  • 📱 Customizable devices and multi-cameras ("fish-eye" zoom)
  • 🎞️ Customizable resolutions and aspect-ratios (4k/8k images)
  • ⏱️ Customizable FPS (30..240 FPS)
  • 🧩 Frame Processors (JS worklets to run facial recognition, AI object detection, realtime video chats, ...)
  • 🎨 Drawing shapes, text, filters or shaders onto the Camera
  • 🔍 Smooth zooming (Reanimated)
  • ⏯️ Fast pause and resume
  • 🌓 HDR & Night modes
  • ⚡ Custom C++/GPU accelerated video pipeline (OpenGL)

Install VisionCamera from npm:

npm i react-native-vision-camera
cd ios && pod install

..and get started by setting up permissions!

Documentation

ShadowLens

To see VisionCamera in action, check out ShadowLens!

Example

function App() {
  const device = useCameraDevice('back')

  if (device == null) return <NoCameraErrorView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

See the example app

Adopting at scale

This library helped you? Consider sponsoring!

VisionCamera is provided as is, I work on it in my free time.

If you're integrating VisionCamera in a production app, consider funding this project and contact me to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating VisionCamera and/or Frame Processors, and more.

Socials

NPM DownloadsLast 30 Days