Capacitor Camera Preview

@capacitor-community/camera-preview

CAPACITOR 8

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

If you are using Capacitor 7, use version 7.0.5

If you are using Capacitor 6, use version 6.0.1

If you are using Capacitor 5, use version 5

If you are using Capacitor 4, use version 4

If you are using Capacitor 3, use version 3

If you are using Capacitor 2, use version 1

PR's are greatly appreciated.

-- @arielhernandezmusa and @pbowyer, current maintainers

Installation

yarn add @capacitor-community/camera-preview

or

npm install @capacitor-community/camera-preview

Then run

npx cap sync

Extra Android installation steps

Important camera-preview 3+ requires Gradle 7. If you are using Gradle 4, please use version 2 of this plugin.

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.

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

• androidxExifInterfaceVersion: version of androidx.exifinterface:exifinterface (default: 1.4.2)

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 { CameraPreview } from '@capacitor-community/camera-preview'; in the file where you want to use the plugin.

then in html add <div id="cameraPreview"></div>

and CameraPreview.start({ parent: "cameraPreview"}); will work.

Methods

start(options)

Starts the camera preview instance.

Android: the returned promise resolves only after the native preview has delivered its first frame and is ready for capture. It rejects if the camera or preview cannot be started, or if no first frame arrives within 10 seconds. Calling start() while the camera is already running or starting also rejects.

import { CameraPreview, 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;
}

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>

stop()

Stops the camera preview instance.

CameraPreview.stop();

flip()

Switch between rear and front camera only for android and ios, web is not supported javascript CameraPreview.flip()

Android: the returned promise resolves only after the switched-in camera has delivered its first preview frame. It rejects if the current preview is not ready, a capture or another flip is in progress, or the switched-in camera fails to start or times out. On a device with only one camera, it resolves without switching, preserving the existing behavior.

capture(options)

Android: capture() requires a camera preview that has delivered its first frame. It rejects if there is no active camera, the preview is not ready, or another capture is already in progress. Native capture and image-processing failures are returned as promise rejections instead of terminating the Android process.

An accepted capture is also rejected rather than left pending if the preview is paused or stopped, or if its output surface is destroyed. A flip() request made during capture is rejected without interrupting the capture. If restarting the preview after a picture fails, the capture rejects and isCameraStarted() becomes false.

import { CameraPreviewPictureOptions } 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)

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

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

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

setFlashMode(options)

const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch';

CameraPreview.setFlashMode(cameraPreviewFlashMode);

startRecordVideo(options) ---- ANDROID and iOS only

Start capturing video

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

CameraPreview.startRecordVideo(cameraPreviewOptions);

stopRecordVideo() ---- ANDROID and iOS 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();

setOpacity(options: CameraOpacityOptions): Promise<{}>; ---- ANDROID only

Set the opacity for the camera preview

const myCamera = CameraPreview.start({ enableOpacity: true });
myCamera.setOpacity({ opacity: 0.4 });

isCameraStarted() ---- ANDROID and iOS only

Check or detect if the camera has been started

Android: this reports camera preview readiness, that is, whether the native preview has produced a first frame and is usable. It is false while the preview is still starting up, and false again after the preview has been paused, stopped, or has lost its output surface.

const { value } = await CameraPreview.isCameraStarted();

Settings

FLASH_MODE

Flash mode settings:

Demo/Example App

A working example can be found at Example App