@capgo/camera-preview
v6.5.14
Published
Camera preview
Downloads
2,730
Readme
Capacitor Camera Preview Plugin
This plugin is compatible Capacitor 6 and above.
Use v5 for Capacitor 5 and below.
PR's are greatly appreciated.
-- @riderx, current maintainers
Remember to add the style below on your app's HTML or body element:
:root {
--ion-background-color: transparent !important;
}
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>
If it don't work in dark mode here is issue who explain how to fix it: https://github.com/capacitor-community/camera-preview/issues/199
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.MODIFY_AUDIO_SETTINGS" />
<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
Exemple with Capacitor uploader:
Documentation for the uploader
import { CameraPreview } from '@capgo/camera-preview'
import { Uploader } from '@capgo/capacitor-uploader';
async function record() {
await CameraPreview.startRecordVideo({ storeToFile: true })
await new Promise(resolve => setTimeout(resolve, 5000))
const fileUrl = await CameraPreview.stopRecordVideo()
console.log(fileUrl.videoFilePath)
await uploadVideo(fileUrl.videoFilePath)
}
async function uploadVideo(filePath: string) {
Uploader.addListener('events', (event) => {
switch (event.name) {
case 'uploading':
console.log(`Upload progress: ${event.payload.percent}%`);
break;
case 'completed':
console.log('Upload completed successfully');
console.log('Server response status code:', event.payload.statusCode);
break;
case 'failed':
console.error('Upload failed:', event.payload.error);
break;
}
});
try {
const result = await Uploader.startUpload({
filePath,
serverUrl: 'S#_PRESIGNED_URL',
method: 'PUT',
headers: {
'Content-Type': 'video/mp4',
},
mimeType: 'video/mp4',
});
console.log('Video uploaded successfully:', result.id);
} catch (error) {
console.error('Error uploading video:', error);
throw error;
}
}
API
start(...)
stop()
capture(...)
captureSample(...)
getSupportedFlashModes()
getHorizontalFov()
getSupportedPictureSizes()
setFlashMode(...)
flip()
setOpacity(...)
stopRecordVideo()
startRecordVideo(...)
- Interfaces
- Type Aliases
start(...)
start(options: CameraPreviewOptions) => Promise<void>
Start the camera preview instance.
| Param | Type | Description |
| ------------- | --------------------------------------------------------------------- | -------------------------------------------- |
| options
| CameraPreviewOptions | the options to start the camera preview with |
Since: 0.0.1
stop()
stop() => Promise<void>
Stop the camera preview instance.
Since: 0.0.1
capture(...)
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(...)
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()
getSupportedFlashModes() => Promise<{ result: CameraPreviewFlashMode[]; }>
Get supported flash modes.
Returns: Promise<{ result: CameraPreviewFlashMode[]; }>
Since: 0.0.1
getHorizontalFov()
getHorizontalFov() => Promise<{ result: any; }>
Get horizontal field of view.
Returns: Promise<{ result: any; }>
Since: 0.0.1
getSupportedPictureSizes()
getSupportedPictureSizes() => Promise<{ supportedPictureSizes: { facing: string; supportedPictureSizes: { width: number; height: number; }[]; }[]; }>
Gets the supported picture sizes for a given device.
Returns: Promise<{ supportedPictureSizes: { facing: string; supportedPictureSizes: { width: number; height: number; }[]; }[]; }>
setFlashMode(...)
setFlashMode(options: { flashMode: CameraPreviewFlashMode | string; }) => Promise<void>
Set flash mode.
| Param | Type | Description |
| ------------- | ----------------------------------- | -------------------------------------- |
| options
| { flashMode: string; } | the options to set the flash mode with |
Since: 0.0.1
flip()
flip() => Promise<void>
Flip camera.
Since: 0.0.1
setOpacity(...)
setOpacity(options: CameraOpacityOptions) => Promise<void>
Set opacity.
| Param | Type | Description |
| ------------- | --------------------------------------------------------------------- | ------------------------------------------ |
| options
| CameraOpacityOptions | the options to set the camera opacity with |
Since: 0.0.1
stopRecordVideo()
stopRecordVideo() => Promise<{ videoFilePath: string; }>
Stop recording video.
Returns: Promise<{ videoFilePath: string; }>
Since: 0.0.1
startRecordVideo(...)
startRecordVideo(options: CameraPreviewOptions) => Promise<void>
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 - 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"