What is react native vision camera and how to install it in react native project?

What is react native vision camera and how to install it in react native project?

Vision Camera is a React Native camera library with all its features. Some important benefits include:

• Lots of developer support: VisionCamera's developer community is extensive and all features are well documented and supported.
• Feature-rich: VisionCamera has all the features you'd expect from a modern smartphone camera and complete device control, including the ability to alter settings like frame rate and more.
• Simple to use: With Hooks and functions, you can quickly get started using the library with full control.

React native vision camera and how to install it in react native project

Features provided by react-native-vision-camera:-

• Photo, Video and Snapshot capture
• Customizable devices and multi-cameras (smoothly zoom out to "fish-eye" camera)
• Customizable FPS
• Frame Processors (JS worklets to run QR-Code scanning, facial recognition, AI object detection, realtime video chats, ...)
• Smooth zooming (Reanimated)
• Fast pause and resume
• HDR & Night modes

How to install react native vision camera in react native project?

We will explain everything you need to know about React Native Vision Camera in this blog.

Setting up the project

We will need to create a new React Native project before we begin. With the following commands, we can achieve that:

In below example I have used yarn as a package manager you can also use rpm for the same.

npx react-native init react_native_camera_demo
cd react_native_camera_demo
yarn ios

How to install react native vision camera dependencies?

Open up your project's root folder in terminal and execute following commands for install react native vision camera in your project

yarn add react-native-vision-camera
npx pod-install 

Note: - this library requires iOS 11.0 + and android sdk version 21.0 +

It is essential to keep in mind that operating systems prevent access to cameras by default as a security measure. As a result, it is absolutely necessary to be able to add permissions to the Info.plist app on iOS, for instance. You'll learn how to do it below:

Add following code in your info.plist file located in iOS folder

<key> NSCameraUsageDescription</key>.
<string>  message to show user when the camera is accessed for the first time</string>.

<key> NSPhotoLibraryAddUsageDescription</key>.
<string> message to show user when the photo library is accessed for the first time</string>.

<key> NSPhotoLibraryUsageDescription</key>.
<string> message to show user when the photo library is accessed for the first time</string>.

<key> NSMicrophoneUsageDescription</key>.
<string> message to show user
 when the microphone is accessed for the first time</string>.

Now follow this step for android

go to Android/app/src/main/AndroidManifest.xml is required. 

then add this code

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>

In addition, you will need to modify the rows in Android/app/build.gradle. You'll need to include:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

Usage Example :-

 import React, {  
      PureComponent  
 } from 'react';  
 import {  
      RNCamera  
 } from 'react-native-camera';  
 export default class Camera extends PureComponent {  
      constructor(props) {  
           super(props);  
      }  
      render() {  
                return ( < RNCamera ref = {  
                               ref => {  
                                    this.camera = ref;  
                               }  
                          }  
                          captureAudio = {  
                               false  
                          }  
                          style = {  
                               {  
                                    flex: 1  
                               }  
                          }  
                          type = {  
                               RNCamera.Constants.Type.back  
                          }  
                          androidCameraPermissionOptions = {  
                               {  
                                    title: 'Permission to use camera',  
                                    message: 'We need your permission to use your camera',  
                                    buttonPositive: 'Ok',  
                                    buttonNegative: 'Cancel',  
                               }  
                          }  
                          />  ); }}  

Let's understand step by step

ref={ref => {
this.camera = ref;
‍}}

The ref gives us access to an instance of the camera component

type={RNCamera.Constants.Type.back}

Allows us to  decide which camera to use, either front or back
androidCameraPermissionOptions={{ title: 'Permission to use camera', message: 'We need your permission to use your camera', buttonPositive: 'Ok', buttonNegative: 'Cancel', }}


Allows us to specify the permissions message on android.

captureAudio={false}
Because we don't need to record audio for this example we set this option so a permission message doesn't pop up.

style={{flex: 1}}
We need the camera to cover the container space.

Now just add following code in which screen you want to use this Camera component

import React from 'react';
import Camera from './components/Camera';
import {SafeAreaView} from 'react-native';
const YourComponent = () => {
  return (
    <>‍
      <SafeAreaView styles={{flex:1}}>‍
        <Camera />‍
      </SafeAreaView>‍
    </>
‍
  );};
export default YourComponent;