VIDEO RECORDER
@capacitor-community/video-recorder
CAPACITOR 5
capacitor plugin to record video ## Install Capacitor v6 ```bash npm install @capacitor-community/video-recorder npx cap sync ``` Capacitor v5 ```bash 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: ```gradle 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: ```scss // in the scss file of your page ion-content { --background: transparent; } ``` ```ts // in the capacitor.config.ts { 'backgroundColor: '#ff000000', // this is needed mainly on iOS } ``` Next in your app: ```typescript 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. ```typescript VideoRecorder.startRecording(); ``` ### Stop Recording / Getting Result Stops the capture device and returns the path of the local video file. ``` typescript 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. ```typescript VideoRecorder.destroy(); ``` ### Demo App The demo app can be found in the Example folder of this repo ## API
VideoRecorderOptions |
--------------------
### destroy()
```typescript
destroy() => PromiseVideoRecorderPreviewFrame |
--------------------
### editPreviewFrameConfig(...)
```typescript
editPreviewFrameConfig(config: VideoRecorderPreviewFrame) => PromiseVideoRecorderPreviewFrame |
--------------------
### switchToPreviewFrame(...)
```typescript
switchToPreviewFrame(options: { id: string; }) => Promise{ id: string; } |
--------------------
### showPreviewFrame(...)
```typescript
showPreviewFrame(config: { position: number; quality: number; }) => Promise{ position: number; quality: number; } |
--------------------
### hidePreviewFrame()
```typescript
hidePreviewFrame() => PromisePromise<{ videoUrl: string; }>
--------------------
### getDuration()
```typescript
getDuration() => Promise<{ value: number; }>
```
**Returns:** Promise<{ value: number; }>
--------------------
### addListener('onVolumeInput', ...)
```typescript
addListener(eventName: 'onVolumeInput', listenerFunc: (event: { value: number; }) => void) => Promise'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 |
