Skip to content
Capacitor plugin that allows camera interaction from HTML code
Java Swift TypeScript Ruby Objective-C JavaScript
Branch: master
Clone or download
Latest commit 9214154 Oct 9, 2019

README.md

Capacitor Camera Preview

NPM Downloads Build Status

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

You can’t perform that action at this time.