Gathering detailed insights and metrics for @capacitor-community/camera-preview
Gathering detailed insights and metrics for @capacitor-community/camera-preview
Gathering detailed insights and metrics for @capacitor-community/camera-preview
Gathering detailed insights and metrics for @capacitor-community/camera-preview
capacitor-community-multilens-camerapreview
fork of capacitor community camera preview with support for switchting lenses
@michaelwolz/camera-preview-lite
Fork of the capacitor-community/camera-preview plugin focusing on high resolution photos without bloating up the code.
@carviz/capacitor-camera-preview
Fork of the capacitor-community/camera-preview plugin focusing on high resolution photos without bloating up the code.
Capacitor plugin that allows camera interaction from HTML code
npm install @capacitor-community/camera-preview
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Java (53.44%)
Swift (27.83%)
TypeScript (11.88%)
JavaScript (2.78%)
SCSS (1.58%)
HTML (1.44%)
Ruby (1.05%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
207 Stars
422 Commits
183 Forks
18 Watchers
6 Branches
58 Contributors
Updated on Jul 01, 2025
Latest Version
7.0.1
Package Id
@capacitor-community/camera-preview@7.0.1
Unpacked Size
290.89 kB
Size
90.75 kB
File Count
51
NPM Version
10.5.0
Node Version
20.11.1
Published on
Apr 03, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
@capacitor-community/camera-preview
CAPACITOR 7
Capacitor plugin that allows camera interaction from Javascript and HTML
(based on cordova-plugin-camera-preview).
If you are using Capacitor 6, use version 6.1
If you are using Capacitor 5, use version 5
If you are using Capacitor 4, use version 4
If you are using Capacitor 3, use version 3
If you are using Capacitor 2, use version 1
PR's are greatly appreciated.
-- @arielhernandezmusa and @pbowyer, current maintainers
yarn add @capacitor-community/camera-preview
or
npm install @capacitor-community/camera-preview
Then run
npx cap sync
Important camera-preview
3+ requires Gradle 7. If you are using Gradle 4, please use version 2 of this plugin.
Open android/app/src/main/AndroidManifest.xml
and above the closing </manifest>
tag add this line to request the CAMERA permission:
1<uses-permission android:name="android.permission.CAMERA" />
For more help consult the Capacitor docs.
This plugin will use the following project variables (defined in your app's variables.gradle
file):
androidxExifInterfaceVersion
: version of androidx.exifinterface:exifinterface
(default: 1.3.6
)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.
Add import { CameraPreview } from '@capacitor-community/camera-preview';
in the file where you want to use the plugin.
then in html add <div id="cameraPreview"></div>
and CameraPreview.start({ parent: "cameraPreview"});
will work.
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) |
1import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview'; 2 3const cameraPreviewOptions: CameraPreviewOptions = { 4 position: 'rear', 5 height: 1920, 6 width: 1080 7}; 8CameraPreview.start(cameraPreviewOptions);
Remember to add the style below on your app's HTML or body element:
1ion-content { 2 --background: transparent; 3}
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:
1.my-custom-camera-preview-content { 2 --background: transparent; 3}
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
1<template> 2 <ion-app id="app"> 3 <ion-router-outlet /> 4 </ion-app> 5</template> 6 7<style> 8#app { 9 background-color: transparent !important; 10} 11<style>
1CameraPreview.stop();
javascript CameraPreview.flip()
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) |
1import { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview'; 2 3const cameraPreviewPictureOptions: CameraPreviewPictureOptions = { 4 quality: 50 5}; 6 7const result = await CameraPreview.capture(cameraPreviewPictureOptions); 8const base64PictureData = result.value; 9 10// do sometime with base64PictureData 11
Option | values | descriptions |
---|---|---|
quality | number | (optional) The picture quality, 0 - 100, default 85 |
1import { CameraSampleOptions } from '@capacitor-community/camera-preview'; 2 3const cameraSampleOptions: CameraSampleOptions = { 4 quality: 50 5}; 6 7const result = await CameraPreview.captureSample(cameraSampleOptions); 8const base64PictureData = result.value; 9 10// do something with base64PictureData 11
[FLASH_MODE](#camera_Settings.FlashMode)
for possible values that can be returned
1import { CameraPreviewFlashMode } from '@capacitor-community/camera-preview'; 2 3const flashModes = await CameraPreview.getSupportedFlashModes(); 4const supportedFlashModes: CameraPreviewFlashMode[] = flashModes.result;
[FLASH_MODE](#camera_Settings.FlashMode)
for details about the possible values
for flashMode.
1const CameraPreviewFlashMode: CameraPreviewFlashMode = 'torch'; 2 3CameraPreview.setFlashMode(cameraPreviewFlashMode);
1const cameraPreviewOptions: CameraPreviewOptions = { 2 position: 'front', 3 width: window.screen.width, 4 height: window.screen.height, 5}; 6 7CameraPreview.startRecordVideo(cameraPreviewOptions);
1const resultRecordVideo = await CameraPreview.stopRecordVideo();
1const myCamera = CameraPreview.start({ enableOpacity: true }); 2myCamera.setOpacity({ opacity: 0.4 });
1const { value } = await CameraPreview.isCameraStarted();
Name | Type | Default | Note |
---|---|---|---|
OFF | string | off | |
ON | string | on | |
AUTO | string | auto | |
RED_EYE | string | red-eye | Android Only |
TORCH | string | torch |
A working example can be found at Example App
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
1 existing vulnerabilities detected
Details
Reason
binaries present in source code
Details
Reason
5 commit(s) and 4 issue activity found in the last 90 days -- score normalized to 7
Reason
Found 8/23 approved changesets -- score normalized to 3
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More