react-native-vision-camera

What is react-native-vision-camera?

The react-native-vision-camera package is a powerful and flexible camera library for React Native applications. It provides high-performance camera functionalities, including real-time frame processing, barcode scanning, and more. It is designed to be highly customizable and performant, making it suitable for a wide range of camera-related tasks in mobile applications.

What are react-native-vision-camera's main functionalities?

Basic Camera Usage

This code demonstrates the basic usage of the react-native-vision-camera package. It sets up a camera view using the back camera of the device and displays it full-screen.

import { Camera, useCameraDevices } from 'react-native-vision-camera';
import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';

const App = () => {
  const devices = useCameraDevices();
  const device = devices.back;

  if (device == null) return <View />;

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Frame Processing

This code demonstrates how to set up frame processing with the react-native-vision-camera package. The frameProcessor function is called for each frame captured by the camera, allowing for real-time processing.

import { Camera, useCameraDevices } from 'react-native-vision-camera';
import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';

const App = () => {
  const devices = useCameraDevices();
  const device = devices.back;

  const frameProcessor = (frame) => {
    // Process the frame here
    console.log('Processing frame:', frame);
  };

  if (device == null) return <View />;

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        frameProcessor={frameProcessor}
        frameProcessorFps={1}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Barcode Scanning

This code demonstrates how to use the react-native-vision-camera package for barcode scanning. It uses the vision-camera-code-scanner package to scan QR codes and logs the detected barcodes.

import { Camera, useCameraDevices } from 'react-native-vision-camera';
import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { useScanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

const App = () => {
  const devices = useCameraDevices();
  const device = devices.back;
  const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE]);

  useEffect(() => {
    if (barcodes.length > 0) {
      console.log('Barcodes:', barcodes);
    }
  }, [barcodes]);

  if (device == null) return <View />;

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Other packages similar to react-native-vision-camera

react-native-camera

react-native-camera is a popular camera library for React Native that provides a wide range of camera functionalities, including photo and video capture, barcode scanning, and face detection. Compared to react-native-vision-camera, it is more established but may not offer the same level of performance and flexibility for real-time frame processing.

expo-camera

expo-camera is a camera module provided by Expo, a framework for building React Native apps. It offers basic camera functionalities such as photo and video capture, along with barcode scanning. While it is easy to use and integrates well with the Expo ecosystem, it may not provide the same level of customization and performance as react-native-vision-camera.

react-native-qrcode-scanner

react-native-qrcode-scanner is a library specifically designed for QR code scanning in React Native applications. It provides a simple and straightforward API for scanning QR codes but lacks the broader camera functionalities and real-time frame processing capabilities of react-native-vision-camera.

README

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

• Guides
• API
• Example
• Frame Processor Plugins

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

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

• 🐦 Follow me on Twitter for updates
• 📝 Check out my blog for examples and experiments
• 💬 Join the Margelo Community Discord for chatting about VisionCamera
• 💖 Sponsor me on GitHub to support my work
• 🍪 Buy me a Ko-Fi to support my work