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 6 and above.

Use v5 for Capacitor 5 and below.

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) * [`stop()`](#stop) * [`capture(...)`](#capture) * [`captureSample(...)`](#capturesample) * [`getSupportedFlashModes()`](#getsupportedflashmodes) * [`getHorizontalFov()`](#gethorizontalfov) * [`setFlashMode(...)`](#setflashmode) * [`flip()`](#flip) * [`setOpacity(...)`](#setopacity) * [`stopRecordVideo()`](#stoprecordvideo) * [`startRecordVideo(...)`](#startrecordvideo) * [Interfaces](#interfaces) * [Type Aliases](#type-aliases)

### start(...) ```typescript start(options: CameraPreviewOptions) => Promise ``` Start the camera preview instance. | Param | Type | Description | | ------------- | --------------------------------------------------------------------- | -------------------------------------------- | | **`options`** | CameraPreviewOptions | the options to start the camera preview with | **Since:** 0.0.1 -------------------- ### stop() ```typescript stop() => Promise ``` Stop the camera preview instance. **Since:** 0.0.1 -------------------- ### capture(...) ```typescript capture(options: CameraPreviewPictureOptions) => Promise<{ value: string; }> ``` Switch camera. | Param | Type | Description | | ------------- | ----------------------------------------------------------------------------------- | ------------------------------------- | | **`options`** | CameraPreviewPictureOptions | the options to switch the camera with | **Returns:** Promise<{ value: string; }> **Since:** 0.0.1 -------------------- ### captureSample(...) ```typescript captureSample(options: CameraSampleOptions) => Promise<{ value: string; }> ``` Capture a sample image. | Param | Type | Description | | ------------- | ------------------------------------------------------------------- | -------------------------------------------- | | **`options`** | CameraSampleOptions | the options to capture the sample image with | **Returns:** Promise<{ value: string; }> **Since:** 0.0.1 -------------------- ### getSupportedFlashModes() ```typescript getSupportedFlashModes() => Promise<{ result: CameraPreviewFlashMode[]; }> ``` Get supported flash modes. **Returns:** Promise<{ result: CameraPreviewFlashMode[]; }> **Since:** 0.0.1 -------------------- ### getHorizontalFov() ```typescript getHorizontalFov() => Promise<{ result: any; }> ``` Get horizontal field of view. **Returns:** Promise<{ result: any; }> **Since:** 0.0.1 -------------------- ### setFlashMode(...) ```typescript setFlashMode(options: { flashMode: CameraPreviewFlashMode | string; }) => Promise ``` Set flash mode. | Param | Type | Description | | ------------- | ----------------------------------- | -------------------------------------- | | **`options`** | { flashMode: string; } | the options to set the flash mode with | **Since:** 0.0.1 -------------------- ### flip() ```typescript flip() => Promise ``` Flip camera. **Since:** 0.0.1 -------------------- ### setOpacity(...) ```typescript setOpacity(options: CameraOpacityOptions) => Promise ``` Set opacity. | Param | Type | Description | | ------------- | --------------------------------------------------------------------- | ------------------------------------------ | | **`options`** | CameraOpacityOptions | the options to set the camera opacity with | **Since:** 0.0.1 -------------------- ### stopRecordVideo() ```typescript stopRecordVideo() => Promise<{ videoFilePath: string; }> ``` Stop recording video. **Returns:** Promise<{ videoFilePath: string; }> **Since:** 0.0.1 -------------------- ### startRecordVideo(...) ```typescript startRecordVideo(options: CameraPreviewOptions) => Promise ``` Start recording video. | Param | Type | Description | | ------------- | --------------------------------------------------------------------- | ----------------------------------------- | | **`options`** | CameraPreviewOptions | the options to start recording video with | **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. | | **`cameraMode`** | boolean | default to false - IOS only. Set the CameraPreview to use the video mode preset | #### 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"

Cap-go / camera-preview

readme