Camera Preview
Camera preview
Capacitor Camera Preview Plugin
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
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 |
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"
@capgo/camera-preview Package Tutorial
In this tutorial, we will walk through the steps to use the @capgo/camera-preview package in your Capacitor project. This package allows you to interact with the camera from your JavaScript and HTML code.
Installation
To install the @capgo/camera-preview package, open your terminal and run one of the following commands:
yarn add @capgo/camera-preview
or
npm install @capgo/camera-preview
After the installation is complete, run the following command to sync your Capacitor project:
npx cap sync
Extra Android Installation Steps
If you are using Android, you need to make some additional changes to your project. Open the android/app/src/main/AndroidManifest.xml file and add the following line above the closing </application> tag to request the CAMERA permission:
<uses-permission android:name="android.permission.CAMERA" />
For more help, refer to the Capacitor documentation.
Extra iOS Installation Steps
If you are using iOS, you need to add two permissions to your Info.plist file. Follow the Capacitor documentation and add the NSCameraUsageDescription and NSMicrophoneUsageDescription permissions. The NSMicrophoneUsageDescription permission is only required if you will be using audio. If you don't need audio, you can set the disableAudio option to true to disable the microphone permission request.
Extra Web Installation Steps
If you are using the web platform with Ionic, add the following line to your entry script in app.module.ts:
import '@capgo/camera-preview';
This will allow Capacitor to register the web platform from the plugin.
API
The @capgo/camera-preview package provides the following API methods:
start(options: CameraPreviewOptions)
Starts the camera preview instance.
stop()
Stops the camera preview instance.
capture(options: CameraPreviewPictureOptions)
Captures a picture from the camera.
captureSample(options: CameraSampleOptions)
Captures a sample image.
getSupportedFlashModes()
Gets the supported flash modes.
getHorizontalFov()
Gets the horizontal field of view.
setFlashMode(options: { flashMode: CameraPreviewFlashMode | string; })
Sets the flash mode.
flip()
Flips the camera.
setOpacity(options: CameraOpacityOptions)
Sets the camera opacity.
stopRecordVideo()
Stops recording a video.
startRecordVideo(options: CameraPreviewOptions)
Starts recording a video.
For more details on the parameters and return values of these methods, refer to the @capgo/camera-preview package documentation.
Conclusion
In this tutorial, we learned how to install and use the @capgo/camera-preview package in a Capacitor project. We explored the available API methods and their usage. Now you can integrate camera functionality into your application using this package.