@capacitor-mobi/camera-preview v2.0.22

Capacitor Camera Preview Of Hanuman

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

Installation

npm install @capacitor-mobi/camera-preview

Then run

npx cap update

Features

-Support create a thumbnail image together with the original image.

-Use CoreMotion to detect the orientation when use lock to portrait mode.

-Play audio like a native camera when clicking on the take picture button.

-Tap to focus.

-Pinch to zoom.

-Support zoom out for the rear camera. ("builtInDualWideCamera": one ultra wide and one wide angle)

-Listen on volume button to take image.

-Show flash screen animation when taking picture.

-Support the camera frame rotate to landscape left or landscape right.

Methods

prepare(options)

Prepare the camera preview instance. (Not showing camera preview on UI yet)

import { Plugins } from "@capacitor/core";
const { CameraPreview } = Plugins;
import { CameraPreviewOptions } from "@capacitor-community/camera-preview";

const cameraPreviewOptions: CameraPreviewOptions = {
  position: "rear",
  height: 1920,
  width: 1080,
  quality: 50,
  thumbnailWidth: 200,
  
  // Support camera frame rotate to landscape left or landscape right
  primaryX: cameraHeaderHeight,
  secondaryX: cameraFooterHeight
};
CameraPreview.prepare(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 cutom class to your ion-content and make it transparent:

.my-custom-camera-preview-content {
  --background: transparent;
}

start()

Show the camera preview after the preparation is done.

CameraPreview.start();

hide()

Hide the camera preview but not destroy it. (Useful when your want to show it immediately)

CameraPreview.hide();

show()

Show the camera preview immediately.

CameraPreview.show();

stop()

Stops the camera preview instance. (After it stops, we need to call the "prepare" and "start" as the beginning)

CameraPreview.stop();

flip()

Switch between rear and front camera

CameraPreview.flip();

capture()

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

const result = await CameraPreview.capture();
// If "storeToFile = true", the result.image will be the file path.
// If "storeToFile = false", the result.image will be the Base64 string.
const imagePath = result.image;
const thumbnailPath = result.thumbnailImage as string;

listenOnVolumeButton()

Listen on volume button (up or down)

CameraPreview.listenOnVolumeButton(async (res: VolumeButtonResult | null) => {
	if (!res || !res.volumeButtonChanged) {
		return;
	}
	// Call your capture function
});

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

Settings

FLASH_MODE

Flash mode settings: