https://github.com/TeamMaestro/capacitor-video-recorder

Video recorder plugin for Capacitor
https://github.com/TeamMaestro/capacitor-video-recorder

Last synced: 24 days ago
JSON representation

Video recorder plugin for Capacitor

• Host: GitHub
• URL: https://github.com/TeamMaestro/capacitor-video-recorder
• Owner: TeamMaestro
• Created: 2018-05-12T14:08:30.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T07:35:13.000Z (almost 2 years ago)
• Last Synced: 2024-05-19T02:12:41.303Z (7 months ago)
• Language: Swift
• Size: 3.16 MB
• Stars: 56
• Watchers: 4
• Forks: 32
• Open Issues: 32
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-capacitorjs - @teamhive/capacitor-video-recorder - Video recorder plugin for Capacitor. (Plugins / Community Plugins)

README

        
# Capacitor Video Recorder

A video recording plugin for Capacitor that allows applications to use the native camera and microphone and display the recording interface either below or above their application.

#### Installation

`npm install @teamhive/capacitor-video-recorder`

#### Platform Support

- iOS

- Android

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

## Example Usage

feature.module.ts

> Import the plugin as defined below to allow the plugin to register correctly to the feature module.

```typescript

import '@teamhive/capacitor-video-recorder';

```

### 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.

```typescript

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

const { VideoRecorder } = Plugins;

const config: VideoRecorderPreviewFrame = {

    id: 'video-record',

    stackPosition: 'front', // '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();

```

### Example Implementations

|iOS|Android|

|---|---|

|||