Skip to content

Latest commit

 

History

History
387 lines (277 loc) · 13.5 KB

README.md

File metadata and controls

387 lines (277 loc) · 13.5 KB
Raw

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-community/camera-preview

or

npm install @capacitor-community/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-community/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. Defaults to front
width number (optional) The preview width in pixels, default window.screen.width (applicable to the android and ios platforms only)
height number (optional) The preview height in pixels, default window.screen.height (applicable to the android and ios platforms only)
x number (optional) The x origin, default 0 (applicable to the android and ios platforms only)
y number (optional) The y origin, default 0 (applicable to the android and ios platforms only)
toBack boolean (optional) Brings your html in front of your preview, default false (applicable to the android and ios platforms only)
paddingBottom number (optional) The preview bottom padding in pixes. Useful to keep the appropriate preview sizes when orientation changes (applicable to the android and ios platforms only)
rotateWhenOrientationChanged boolean (optional) Rotate preview when orientation changes (applicable to the ios platforms only; default value is true) 
import { Plugins } from "@capacitor/core"
const { CameraPreview } = Plugins;
import { CameraPreviewOptions } from '@capacitor-community/camera-preview';

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'rear',
  height: 1920,
  width: 1080
};
CameraPreview.start(cameraPreviewOptions);

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

Option values descriptions
quality number (optional) The picture quality, 0 - 100, default 85 
import { CameraPreviewFlashMode } from 'c@capacitor-community/camera-preview';

const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
  quality: 50
};

const result = await CameraPreview.capture(cameraPreviewPictureOptions);
const base64PictureData = result.value;

// do sometime with base64PictureData

getSupportedFlashModes()

Get the flash modes supported by the camera device currently started. Returns an array containing supported flash modes. See FLASH_MODE for possible values that can be returned

import { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';

const flashModes = await CameraPreview.getSupportedFlashModes();
const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;

setFlashMode(options)

Set the flash mode. See FLASH_MODE for details about the possible values for flashMode.

const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';

CameraPreview.setFlashMode(cameraPreviewFlashMode);

startRecordVideo(options) ---- ANDROID only

Start capturing video

const cameraPreviewOptions: CameraPreviewOptions = {
  position: 'front',
  width: window.screen.width,
  height: window.screen.height,
};

CameraPreview.startRecordVideo(cameraPreviewOptions);

stopCaptureVideo() ---- ANDROID only

Finish capturing a video. The captured video will be returned as a file path and the video format is .mp4

const resultRecordVideo = await CameraPreview.stopRecordVideo();
this.stopCamera();

Settings

FLASH_MODE

Flash mode settings:

Name Type Default Note
OFF string off
ON string on
AUTO string auto
RED_EYE string red-eye Android Only
TORCH string torch

Demo

pending