Capacitor Camera Preview

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

Releases are being kept up to date when appropriate. However, this plugin is under constant development. As such it is recommended to use master to always have the latest fixes & features.

PR's are greatly appreciated. Maintainer(s) wanted.

Installation

yarn add capacitor-camera-preview

or

npm install capacitor-camera-preview

Android Quirks

On Android remember to add the plugin to MainActivity

this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here 
      // Ex: add(TotallyAwesomePlugin.class); 
      add(CameraPreview.class);
}});

Web Quirks

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

Methods

start(options)

Starts the camera preview instance.

Option	values	descriptions
position	front | rear	Show front or rear camera when start the preview

import { Plugins } from "@capacitor/core"
 
const { CameraPreview } = Plugins
 
CameraPreview.start({position: "rear"});

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

html, body, .ion-app, .ion-content {
  background-color: transparent;
}

stop()

Stops the camera preview instance.

CameraPreview.stop();

flip()

Switch between rear and front camera only for android and ios, web is not supported

CameraPreview.flip()

capture()

const result = await CameraPreview.capture();
const base64PictureData = result.value;
 
// do sometime with base64PictureData
 

Demo

pending