@capgo/camera-preview NPM

Capacitor Camera Preview Plugin

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" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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

API

start(...)

start(options: CameraPreviewOptions) => any

Start the camera preview instance.

Param	Type	Description
`options`	CameraPreviewOptions	the options to start the camera preview with

Returns: any

Since: 0.0.1

stop()

stop() => any

Stop the camera preview instance.

Returns: any

Since: 0.0.1

capture(...)

capture(options: CameraPreviewPictureOptions) => any

Switch camera.

Param	Type	Description
`options`	CameraPreviewPictureOptions	the options to switch the camera with

Returns: any

Since: 0.0.1

captureSample(...)

captureSample(options: CameraSampleOptions) => any

Capture a sample image.

Param	Type	Description
`options`	CameraSampleOptions	the options to capture the sample image with

Returns: any

Since: 0.0.1

getSupportedFlashModes()

getSupportedFlashModes() => any

Get supported flash modes.

Returns: any

Since: 0.0.1

getHorizontalFov()

getHorizontalFov() => any

Get horizontal field of view.

Returns: any

Since: 0.0.1

setFlashMode(...)

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

Set flash mode.

Param	Type	Description
`options`	{ flashMode: string; }	the options to set the flash mode with

Returns: any

Since: 0.0.1

flip()

flip() => any

Flip camera.

Returns: any

Since: 0.0.1

setOpacity(...)

setOpacity(options: CameraOpacityOptions) => any

Set opacity.

Param	Type	Description
`options`	CameraOpacityOptions	the options to set the camera opacity with

Returns: any

Since: 0.0.1

stopRecordVideo()

stopRecordVideo() => any

Stop recording video.

Returns: any

Since: 0.0.1

startRecordVideo(...)

startRecordVideo(options: CameraPreviewOptions) => any

Start recording video.

Param	Type	Description
`options`	CameraPreviewOptions	the options to start recording video with

Returns: any

Since: 0.0.1

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