Capacitor Camera Preview Plugin

Capacitor plugin that allows camera interaction from Javascript and HTML
(based on cordova-plugin-camera-preview).

This plugin is compatible Capacitor 6 and above.

Use v5 for Capacitor 5 and below.

PR's are greatly appreciated.

-- @riderx, current maintainers

Remember to add the style below on your app's HTML or body element:

:root {
  --ion-background-color: transparent !important;
}

Take into account that this will make transparent all ion-content on application, if you want to show camera preview only in one page, just add a custom class to your ion-content and make it transparent:

.my-custom-camera-preview-content {
  --background: transparent;
}

If the camera preview is not displaying after applying the above styles, apply transparent background color to the root div element of the parent component Ex: VueJS >> App.vue component

<template>
  <ion-app id="app">
    <ion-router-outlet />
  </ion-app>
</template>

<style>
#app {
  background-color: transparent !important;
}
<style>

If it don't work in dark mode here is issue who explain how to fix it: https://github.com/capacitor-community/camera-preview/issues/199

Installation

yarn add @capgo/camera-preview

or

npm install @capgo/camera-preview

Then run

npx cap sync

Extra Android installation steps

Important camera-preview 3+ requires Gradle 7. Open android/app/src/main/AndroidManifest.xml and above the closing </manifest> tag add this line to request the CAMERA permission:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

For more help consult the Capacitor docs.

Extra iOS installation steps

You will need to add two permissions to Info.plist. Follow the Capacitor docs and add permissions with the raw keys NSCameraUsageDescription and NSMicrophoneUsageDescription. NSMicrophoneUsageDescription is only required, if audio will be used. Otherwise set the disableAudio option to true, which also disables the microphone permission request.

Extra Web installation steps

Add import '@capgo/camera-preview' to you entry script in ionic on app.module.ts, so capacitor can register the web platform from the plugin

Exemple with Capacitor uploader:

Documentation for the uploader

  import { CameraPreview } from '@capgo/camera-preview'
  import { Uploader } from '@capgo/capacitor-uploader';


  async function record() {
    await CameraPreview.startRecordVideo({ storeToFile: true })
    await new Promise(resolve => setTimeout(resolve, 5000))
    const fileUrl = await CameraPreview.stopRecordVideo()
    console.log(fileUrl.videoFilePath)
    await uploadVideo(fileUrl.videoFilePath)
  }

  async function uploadVideo(filePath: string) {
    Uploader.addListener('events', (event) => {
      switch (event.name) {
        case 'uploading':
          console.log(`Upload progress: ${event.payload.percent}%`);
          break;
        case 'completed':
          console.log('Upload completed successfully');
          console.log('Server response status code:', event.payload.statusCode);
          break;
        case 'failed':
          console.error('Upload failed:', event.payload.error);
          break;
      }
    });
    try {
      const result = await Uploader.startUpload({
        filePath,
        serverUrl: 'S#_PRESIGNED_URL',
        method: 'PUT',
        headers: {
          'Content-Type': 'video/mp4',
        },
        mimeType: 'video/mp4',
      });
      console.log('Video uploaded successfully:', result.id);
    } catch (error) {
      console.error('Error uploading video:', error);
      throw error;
    }
  }

API

start(options: CameraPreviewOptions) => Promise<void>

stop() => Promise<void>

capture(options: CameraPreviewPictureOptions) => Promise<{ value: string; }>

captureSample(options: CameraSampleOptions) => Promise<{ value: string; }>

getSupportedFlashModes() => Promise<{ result: CameraPreviewFlashMode[]; }>

getHorizontalFov() => Promise<{ result: any; }>

setFlashMode(options: { flashMode: CameraPreviewFlashMode | string; }) => Promise<void>

flip() => Promise<void>

setOpacity(options: CameraOpacityOptions) => Promise<void>

stopRecordVideo() => Promise<{ videoFilePath: string; }>

startRecordVideo(options: CameraPreviewOptions) => Promise<void>