@juannpz/capacitor-video-recorder v6.1.5

capacitor plugin to record video

Install

npm install @capacitor-community/video-recorder
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 '@teamhive/@juannpz/capacitor-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>

destroy()

destroy() => Promise<void>

flipCamera()

flipCamera() => Promise<void>

addPreviewFrameConfig(...)

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

editPreviewFrameConfig(...)

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

switchToPreviewFrame(...)

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

showPreviewFrame(...)

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

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) => PluginListenerHandle

Returns: PluginListenerHandle

Interfaces

VideoRecorderOptions

VideoRecorderPreviewFrame

PluginListenerHandle

Enums

VideoRecorderCamera

VideoRecorderQuality

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!