@teamhive/capacitor-video-recorder
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    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.

    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.

    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.

    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();

    Example Implementations

    iOS Android

    Install

    npm i @teamhive/capacitor-video-recorder

    DownloadsWeekly Downloads

    191

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    165 kB

    Total Files

    31

    Last publish

    Collaborators

    • em843
    • caleb_hursh
    • sarcolemna
    • wzachsmith
    • granttw
    • jpinkster
    • sbannigan
    • jgibson55
    • emrad
    • jsmit2239
    • ryankayne
    • mriess260
    • nkosy