@pbowyer/camera-preview v2.0.0-beta.1

Version 2 of this plugin is compatible with Ionic 5 and Capacitor 3. If your project uses Capacitor 2, please make sure you install version 1 of this plugin.

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

Installation

yarn add @capacitor-community/camera-preview

or

npm install @capacitor-community/camera-preview

Then run

npx cap sync

Extra Android installation steps

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" />

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.

Extra Web installation steps

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.

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:

ion-content {
  --background: transparent;
}

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;
}

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)

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

const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
  quality: 50
};

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

// do sometime with base64PictureData

captureSample(options)

Captures a sample image from the video stream. Only for Android and iOS, web implementation falls back to capture method. This can be used to perform real-time analysis on the current frame in the video. The argument quality defaults to 85 and specifies the quality/compression value: 0=max compression, 100=max quality.

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

const cameraSampleOptions: CameraSampleOptions = {
  quality: 50
};

const result = await CameraPreview.captureSample(cameraSampleOptions);
const base64PictureData = result.value;

// do something 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:

Demo

A working example can be found at Demo

To run the demo on your local network and access media devices, a secure context is needed. Add an .env file at the root of the demo folder with HTTPS=true to start react with HTTPS.