capacitor plugin to record video

Install

Capacitor v6

npm install @capacitor-community/video-recorder
npx cap sync

Capacitor v5

npm install @capacitor-community/video-recorder@5
npx cap sync

To ensure the Android lib is downloadable when building the app, you can add the following to the repositories section of your project's build.gradle file:

repositories {
  google()
  mavenCentral()
  maven {
    url "https://jitpack.io"
  }
}

Platform Support

• iOS
• Android

On a web browser, we will fake the behavior to allow for easier development.

Example Usage

Initializing Camera

In order to initialize the camera feed (note: you are not recording at this point), you must first specify a config to the video recorder.

Note: To overlay your web UI on-top of the camera output, you must use stackPosition: back and make all layers of your app transparent so that the camera can be seen under the webview.

There are 2 changes needed to make the webview transparent on Android and iOS:

// in the scss file of your page
ion-content {
  --background: transparent;
}

// in the capacitor.config.ts
{
  'backgroundColor: '#ff000000', // this is needed mainly on iOS
}

Next in your app:

import { VideoRecorderCamera, VideoRecorderPreviewFrame } from '@capacitor-community/video-recorder';

const { VideoRecorder } = Plugins;

const config: VideoRecorderPreviewFrame = {
    id: 'video-record',
    stackPosition: 'back', // 'front' overlays your app', 'back' places behind your app.
    width: 'fill',
    height: 'fill',
    x: 0,
    y: 0,
    borderRadius: 0
};
await VideoRecorder.initialize({
    camera: VideoRecorderCamera.FRONT, // Can use BACK
    previewFrames: [config]
});

Recording

Starts recording against the capture device.

VideoRecorder.startRecording();

Stop Recording / Getting Result

Stops the capture device and returns the path of the local video file.

const res = await VideoRecorder.stopRecording();
// The video url is the local file path location of the video output.
return res.videoUrl;

Destroying Camera

Used to disconnect from the capture device and remove any native UI layers that exist.

VideoRecorder.destroy();

Demo App

The demo app can be found in the Example folder of this repo

API

• initialize(...)
• destroy()
• flipCamera()
• addPreviewFrameConfig(...)
• editPreviewFrameConfig(...)
• switchToPreviewFrame(...)
• showPreviewFrame(...)
• hidePreviewFrame()
• startRecording()
• stopRecording()
• getDuration()
• addListener('onVolumeInput', ...)
• Interfaces
• Enums

initialize(...)

initialize(options?: VideoRecorderOptions | undefined) => Promise<void>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | VideoRecorderOptions |

destroy()

destroy() => Promise<void>

flipCamera()

flipCamera() => Promise<void>

addPreviewFrameConfig(...)

addPreviewFrameConfig(config: VideoRecorderPreviewFrame) => Promise<void>

| Param | Type | | ------------ | ------------------------------------------------------------------------------- | | config | VideoRecorderPreviewFrame |

editPreviewFrameConfig(...)

editPreviewFrameConfig(config: VideoRecorderPreviewFrame) => Promise<void>

| Param | Type | | ------------ | ------------------------------------------------------------------------------- | | config | VideoRecorderPreviewFrame |

switchToPreviewFrame(...)

switchToPreviewFrame(options: { id: string; }) => Promise<void>

| Param | Type | | ------------- | ---------------------------- | | options | { id: string; } |

showPreviewFrame(...)

showPreviewFrame(config: { position: number; quality: number; }) => Promise<void>

| Param | Type | | ------------ | --------------------------------------------------- | | config | { position: number; quality: number; } |

hidePreviewFrame()

hidePreviewFrame() => Promise<void>

startRecording()

startRecording() => Promise<void>

stopRecording()

stopRecording() => Promise<{ videoUrl: string; }>

Returns: Promise<{ videoUrl: string; }>

getDuration()

getDuration() => Promise<{ value: number; }>

Returns: Promise<{ value: number; }>

addListener('onVolumeInput', ...)

addListener(eventName: 'onVolumeInput', listenerFunc: (event: { value: number; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | ------------------ | --------------------------------------------------- | | eventName | 'onVolumeInput' | | listenerFunc | (event: { value: number; }) => void |

Returns: Promise<PluginListenerHandle>

Interfaces

VideoRecorderOptions

| Prop | Type | Description | Default | | ------------------- | --------------------------------------------------------------------- | ------------------------------ | -------------------- | | camera | VideoRecorderCamera | | | | quality | VideoRecorderQuality | | | | autoShow | boolean | | | | previewFrames | VideoRecorderPreviewFrame[] | | | | videoBitrate | number | The default bitrate is 4.5Mbps | 4500000 |

VideoRecorderPreviewFrame

| Prop | Type | | ------------------- | ------------------------------------------------------------------- | | id | string | | stackPosition | 'front' | 'back' | | x | number | | y | number | | width | number | 'fill' | | height | number | 'fill' | | borderRadius | number | | dropShadow | { opacity?: number; radius?: number; color?: string; } |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

Enums

VideoRecorderCamera

| Members | Value | | ----------- | -------------- | | FRONT | 0 | | BACK | 1 |

VideoRecorderQuality

| Members | Value | | --------------- | -------------- | | MAX_480P | 0 | | MAX_720P | 1 | | MAX_1080P | 2 | | MAX_2160P | 3 | | HIGHEST | 4 | | LOWEST | 5 | | QVGA | 6 |

Dependencies

The Android code is using triniwiz/FancyCamera v1.2.4 (https://github.com/triniwiz/fancycamera)

The iOS code is implemented using AVFoundation

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!