React Native Vision Camera library to capture and record videos
Tags: javascript, reactnative, android, mobile
Published: 2023-07-05 18:17:57

Step 1: Create a new React Native project

Run the following command to create a new React Native project:


`npx react-native init VisionCameraExample`

Step 2: Install dependencies

`npm install react-native-vision-camera react-native-video react-native-fs react-native-permissions
`

Step 3: Link the dependencies

Link the installed dependencies to your project

```
npx react-native link react-native-video
npx react-native link react-native-fs
npx react-native link react-native-permissions

```

Step 4: Update AndroidManifest.xml

Open android/app/src/main/AndroidManifest.xml and add the following permissions

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

Step 5: Create a CameraScreen component

Create a new file called CameraScreen.js in the src directory with the following code

```
import React, { useState, useRef } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  StyleSheet
} from 'react-native';
import { Camera, FileSystem, Permissions } from 'react-native-vision-camera';
import Video from 'react-native-video';

const CameraScreen = () => {
  const [isRecording, setIsRecording] = useState(false);
  const [videoPath, setVideoPath] = useState('');
  const cameraRef = useRef();

  const startRecording = async () => {
    const hasPermission = await requestCameraPermission();
    if (!hasPermission) return;

    setIsRecording(true);

    const videoPath = `${FileSystem.cacheDirectory}/video.mp4`;
    setVideoPath(videoPath);

    cameraRef.current.startRecording({
      quality: '720p',
      videoBitrate: 2000000,
      maxDuration: 10, // Set the maximum duration in seconds (optional)
      maxFileSize: 100 * 1024 * 1024, // Set the maximum file size in bytes (optional)
      outputPath: videoPath,
    });
  };

  const stopRecording = async () => {
    setIsRecording(false);
    await cameraRef.current.stopRecording();
  };

  const requestCameraPermission = async () => {
    const { status } = await Permissions.requestMultiple([
      Permissions.PERMISSIONS.ANDROID.CAMERA,
      Permissions.PERMISSIONS.ANDROID.RECORD_AUDIO,
      Permissions.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE,
    ]);
    return (
      status[Permissions.PERMISSIONS.ANDROID.CAMERA] === 'granted' &&
      status[Permissions.PERMISSIONS.ANDROID.RECORD_AUDIO] === 'granted' &&
      status[Permissions.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE] === 'granted'
    );
  };

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} ref={cameraRef} />

      {isRecording ? (
        <TouchableOpacity style={styles.recordButton} onPress={stopRecording}>
          <Text style={styles.recordButtonText}>Stop Recording</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity style={styles.recordButton} onPress={startRecording}>
          <Text style={styles.recordButtonText}>Start Recording</Text>
        </TouchableOpacity>
      )}

      {videoPath !== '' && (
        <View style={styles.videoPlayer}>
          <Video source={{ uri: videoPath }} style={styles.videoPlayer} controls />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  camera: {
    flex: 1,
  },
  recordButton: {
    position: 'absolute',
    bottom: 20,
    left: 20,
    right: 20,
    backgroundColor: 'red',
    padding: 20,
    alignItems: 'center',
  },
  recordButtonText: {
    fontSize: 18,
    color: '#fff',
  },
  videoPlayer: {
    flex: 1,
    marginTop: 20,
  },
});

export default CameraScreen;

```

Step 6: Update App.js

Replace the contents of App.js with the following code:

```
import React from 'react';
import CameraScreen from './src/CameraScreen';

const App = () => {
  return <CameraScreen />;
};

export default App;

```

Step 7: Run the app

Connect your device or start an emulator, then run the following command to start the app:

```
npx react-native run-android

```

Make sure your device has the necessary permissions granted for the app to access the camera, record audio, and write to external storage.

The app should now open and display a camera preview. Press the "Start Recording" button to start recording a video, and press "Stop Recording" to stop. The recorded video will be displayed below the camera preview.