/video-recorder

A video recording plugin for Capacitor

Primary LanguageJavaMIT LicenseMIT


VIDEO RECORDER

@capacitor-community/video-recorder


CAPACITOR 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/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(...)

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) => PluginListenerHandle
Param Type
eventName 'onVolumeInput'
listenerFunc (event: { value: number; }) => void

Returns: PluginListenerHandle

Interfaces

VideoRecorderOptions

Prop Type
camera VideoRecorderCamera
quality VideoRecorderQuality
autoShow boolean
previewFrames VideoRecorderPreviewFrame[]

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!