VIDEO RECORDER

@capacitor-community/video-recorder

CAPACITOR 5

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!