Capacitor Camera Preview Plugin

Check out: Capgo — Live updates for capacitor

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

This plugin is compatible Capacitor 4 only.

PR's are greatly appreciated.

-- @riderx, current maintainers

Installation

yarn add @capgo/camera-preview

or

npm install @capgo/camera-preview

Then run

npx cap sync

Extra Android installation steps

Important camera-preview 3+ requires Gradle 7. 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. 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 '@capgo/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)
storeToFile	boolean	(optional) Capture images to a file and return back the file path instead of returning base64 encoded data, default false.
disableExifHeaderStripping	boolean	(optional) Disable automatic rotation of the image, and let the browser deal with it, default true (applicable to the android and ios platforms only)
enableHighResolution	boolean	(optional) Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device
disableAudio	boolean	(optional) Disables audio stream to prevent permission requests, default false. (applicable to web and iOS only)
lockAndroidOrientation	boolean	(optional) Locks device orientation when camera is showing, default false. (applicable to Android only)
enableOpacity	boolean	(optional) Make the camera preview see-through. Ideal for augmented reality uses. Default false (applicable to Android and web only)
enableZoom	boolean	(optional) Set if you can pinch to zoom. Default false (applicable to the android and ios platforms only)

import { CameraPreview, CameraPreviewOptions } from '@capgo/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

CameraPreview.flip();

capture(options)

Option	values	descriptions
quality	number	(optional) The picture quality, 0 - 100, default 85
width	number	(optional) The picture width, default 0 (Device default)
height	number	(optional) The picture height, default 0 (Device default)

import { CameraPreviewPictureOptions } from '@capgo/camera-preview';

const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
  quality: 50,
};

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

// do sometime with base64PictureData

captureSample(options)

Option	values	descriptions
quality	number	(optional) The picture quality, 0 - 100, default 85

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 '@capgo/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 '@capgo/camera-preview';

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

getHorizontalFov()

Get the horizontal FOV of camera the camera device currently started. Returns a float

Please note that camera should be already started to get this value.

const cameraFovRequest = await CameraPreview.getHorizontalFov();
const cameraFovRequest = cameraFovRequest.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)

Start capturing video

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

CameraPreview.startRecordVideo(cameraPreviewOptions);

stopRecordVideo()

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

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

Set the opacity for the camera preview

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

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

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.

start(...)

start(options: CameraPreviewOptions) => any

Param	Type
`options`	`CameraPreviewOptions`

Returns: any

stop()

stop() => any

Returns: any

capture(...)

capture(options: CameraPreviewPictureOptions) => any

Param	Type
`options`	`CameraPreviewPictureOptions`

Returns: any

captureSample(...)

captureSample(options: CameraSampleOptions) => any

Param	Type
`options`	`CameraSampleOptions`

Returns: any

getSupportedFlashModes()

getSupportedFlashModes() => any

Returns: any

getHorizontalFov()

getHorizontalFov() => any

Returns: any

setFlashMode(...)

setFlashMode(options: { flashMode: CameraPreviewFlashMode | string; }) => any

Param	Type
`options`	`{ flashMode: string; }`

Returns: any

flip()

flip() => any

Returns: any

setOpacity(...)

setOpacity(options: CameraOpacityOptions) => any

Param	Type
`options`	`CameraOpacityOptions`

Returns: any

stopRecordVideo()

stopRecordVideo() => any

Returns: any

startRecordVideo(...)

startRecordVideo(options: CameraPreviewOptions) => any

Param	Type
`options`	`CameraPreviewOptions`

Returns: any

Interfaces

CameraPreviewOptions

Prop	Type	Description
`parent`	`string`	Parent element to attach the video preview element to (applicable to the web platform only)
`className`	`string`	Class name to add to the video preview element (applicable to the web platform only)
`width`	`number`	The preview width in pixels, default window.screen.width
`height`	`number`	The preview height in pixels, default window.screen.height
`x`	`number`	The x origin, default 0 (applicable to the android and ios platforms only)
`y`	`number`	The y origin, default 0 (applicable to the android and ios platforms only)
`toBack`	`boolean`	Brings your html in front of your preview, default false (applicable to the android only)
`paddingBottom`	`number`	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`	Rotate preview when orientation changes (applicable to the ios platforms only; default value is true)
`position`	`string`	Choose the camera to use 'front' or 'rear', default 'front'
`storeToFile`	`boolean`	Defaults to false - Capture images to a file and return the file path instead of returning base64 encoded data
`disableExifHeaderStripping`	`boolean`	Defaults to false - Android Only - Disable automatic rotation of the image, and let the browser deal with it (keep reading on how to achieve it)
`enableHighResolution`	`boolean`	Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device *
`disableAudio`	`boolean`	Defaults to false - Web only - Disables audio stream to prevent permission requests and output switching
`lockAndroidOrientation`	`boolean`	Android Only - Locks device orientation when camera is showing.
`enableOpacity`	`boolean`	Defaults to false - Android and Web only. Set if camera preview can change opacity.
`enableZoom`	`boolean`	Defaults to false - Android only. Set if camera preview will support pinch to zoom.

CameraPreviewPictureOptions

Prop	Type	Description
`height`	`number`	The picture height, optional, default 0 (Device default)
`width`	`number`	The picture width, optional, default 0 (Device default)
`quality`	`number`	The picture quality, 0 - 100, default 85
`format`	`PictureFormat`	The picture format, jpeg or png, default jpeg on `Web`. quality has no effect on png

CameraSampleOptions

Prop	Type	Description
`quality`	`number`	The picture quality, 0 - 100, default 85

CameraOpacityOptions

Prop	Type	Description
`opacity`	`number`	The percent opacity to set for camera view, default 1

Type Aliases

CameraPosition

'rear' | 'front'

PictureFormat

'jpeg' | 'png'

CameraPreviewFlashMode

'off' | 'on' | 'auto' | 'red-eye' | 'torch'

Name		Name	Last commit message	Last commit date
Latest commit History 498 Commits
.github		.github
android		android
demo		demo
ios		ios
src		src
.eslintignore		.eslintignore
.gitignore		.gitignore
.npmignore		.npmignore
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
CapgoCameraPreview.podspec		CapgoCameraPreview.podspec
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
renovate.json		renovate.json
rollup.config.mjs		rollup.config.mjs
tsconfig.json		tsconfig.json

License

adnbrownie/camera-preview

Folders and files

Latest commit

History

Repository files navigation

Capacitor Camera Preview Plugin

Check out: Capgo — Live updates for capacitor

Installation

Extra Android installation steps

Extra iOS installation steps

Extra Web installation steps

Methods

start(options)

stop()

flip()

capture(options)

captureSample(options)

getSupportedFlashModes()

getHorizontalFov()

setFlashMode(options)

startRecordVideo(options)

stopRecordVideo()

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

Settings

FLASH_MODE

Demo

API

start(...)

stop()

capture(...)

captureSample(...)

getSupportedFlashModes()

getHorizontalFov()

setFlashMode(...)

flip()

setOpacity(...)

stopRecordVideo()

startRecordVideo(...)

Interfaces

CameraPreviewOptions

CameraPreviewPictureOptions

CameraSampleOptions

CameraOpacityOptions

Type Aliases

CameraPosition

PictureFormat

CameraPreviewFlashMode

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages