Gathering detailed insights and metrics for capacitor-plugin-camera
Gathering detailed insights and metrics for capacitor-plugin-camera
Installations
npm install capacitor-plugin-cameraDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
20.9.0
NPM Version
10.1.0
Releases
10
Languages
8
Java
Swift
TypeScript
JavaScript
HTML
Objective-C
Ruby
SCSS
Java (41.62%)
Swift (24.47%)
TypeScript (14.16%)
JavaScript (13.3%)
HTML (3.2%)
Objective-C (1.81%)
Ruby (1.38%)
SCSS (0.07%)
Developer
xulihang
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
18 Stars
97 Commits
4 Forks
1 Watchers
2 Branches
2 Contributors
Updated on Jul 10, 2025
Maintainers
1
Package Meta Information
Latest Version
3.0.1
Package Id
capacitor-plugin-camera@3.0.1
Unpacked Size
250.44 kB
Size
44.96 kB
File Count
32
NPM Version
10.1.0
Node Version
20.9.0
Published on
Mar 12, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
capacitor-plugin-camera
A capacitor camera plugin.
Supported Platforms
- Android (based on CameraX)
- iOS (based on AVCaptureSession)
- Web (based on getUserMedia with Dynamsoft Camera Enhancer)
Versions
For Capacitor 5, use versions 1.x.
For Capacitor 6, use versions 2.x.
For Capacitor 7, use versions 3.x.
Install
1npm install capacitor-plugin-camera 2npx cap sync
Get Bitmap/UIImage via Reflection
If you are developing a plugin, you can use reflection to get the camera frames as Bitmap or UIImage on the native side.
Java:
1Class cls = Class.forName("com.tonyxlh.capacitor.camera.CameraPreviewPlugin"); 2Method m = cls.getMethod("getBitmap",null); 3Bitmap bitmap = (Bitmap) m.invoke(null, null);
Objective-C:
1- (UIImage*)getUIImage{ 2 UIImage *image = ((UIImage* (*)(id, SEL))objc_msgSend)(objc_getClass("CameraPreviewPlugin"), sel_registerName("getBitmap")); 3 return image; 4}
You have to call saveFrame beforehand.
Declare Permissions
To use camera and microphone, we need to declare permissions.
Add the following to Android's AndroidManifest.xml:
1<uses-permission android:name="android.permission.CAMERA" /> 2<uses-permission android:name="android.permission.RECORD_AUDIO" />
Add the following to iOS's Info.plist:
1<key>NSCameraUsageDescription</key> 2<string>For camera usage</string> 3<key>NSMicrophoneUsageDescription</key> 4<string>For video recording</string>
FAQ
Why I cannot see the camera?
For native platforms, the plugin puts the native camera view behind the webview and sets the webview as transparent so that we can display HTML elements above the camera.
You may need to add the style below on your app's HTML or body element to avoid blocking the camera view:
1ion-content { 2 --background: transparent; 3}
In dark mode, it is neccessary to set the --ion-blackground-color property. You can do this with the following code:
1document.documentElement.style.setProperty('--ion-background-color', 'transparent');API
initialize()getResolution()setResolution(...)getAllCameras()getSelectedCamera()selectCamera(...)setScanRegion(...)setZoom(...)setFocus(...)setDefaultUIElementURL(...)setElement(...)startCamera()stopCamera()takeSnapshot(...)saveFrame()takeSnapshot2(...)takePhoto(...)toggleTorch(...)getOrientation()startRecording()stopRecording(...)setLayout(...)requestCameraPermission()requestMicroPhonePermission()isOpen()addListener('onPlayed', ...)addListener('onOrientationChanged', ...)removeAllListeners()- Interfaces
- Type Aliases
initialize()
1initialize() => Promise<void>
getResolution()
1getResolution() => Promise<{ resolution: string; }>
Returns: Promise<{ resolution: string; }>
setResolution(...)
1setResolution(options: { resolution: number; }) => Promise<void>
| Param | Type |
|---|---|
options | { resolution: number; } |
getAllCameras()
1getAllCameras() => Promise<{ cameras: string[]; }>
Returns: Promise<{ cameras: string[]; }>
getSelectedCamera()
1getSelectedCamera() => Promise<{ selectedCamera: string; }>
Returns: Promise<{ selectedCamera: string; }>
selectCamera(...)
1selectCamera(options: { cameraID: string; }) => Promise<void>
| Param | Type |
|---|---|
options | { cameraID: string; } |
setScanRegion(...)
1setScanRegion(options: { region: ScanRegion; }) => Promise<void>
| Param | Type |
|---|---|
options | { region: ScanRegion; } |
setZoom(...)
1setZoom(options: { factor: number; }) => Promise<void>
| Param | Type |
|---|---|
options | { factor: number; } |
setFocus(...)
1setFocus(options: { x: number; y: number; }) => Promise<void>
| Param | Type |
|---|---|
options | { x: number; y: number; } |
setDefaultUIElementURL(...)
1setDefaultUIElementURL(url: string) => Promise<void>
Web Only
| Param | Type |
|---|---|
url | string |
setElement(...)
1setElement(ele: any) => Promise<void>
Web Only
| Param | Type |
|---|---|
ele | any |
startCamera()
1startCamera() => Promise<void>
stopCamera()
1stopCamera() => Promise<void>
takeSnapshot(...)
1takeSnapshot(options: { quality?: number; }) => Promise<{ base64: string; }>
take a snapshot as base64.
| Param | Type |
|---|---|
options | { quality?: number; } |
Returns: Promise<{ base64: string; }>
saveFrame()
1saveFrame() => Promise<{ success: boolean; }>
save a frame internally. Android and iOS only.
Returns: Promise<{ success: boolean; }>
takeSnapshot2(...)
1takeSnapshot2(options: { canvas: HTMLCanvasElement; maxLength?: number; }) => Promise<{ scaleRatio?: number; }>
take a snapshot on to a canvas. Web Only
| Param | Type |
|---|---|
options | { canvas: any; maxLength?: number; } |
Returns: Promise<{ scaleRatio?: number; }>
takePhoto(...)
1takePhoto(options: { pathToSave?: string; includeBase64?: boolean; }) => Promise<{ path?: string; base64?: string; blob?: Blob; }>
| Param | Type |
|---|---|
options | { pathToSave?: string; includeBase64?: boolean; } |
Returns: Promise<{ path?: string; base64?: string; blob?: any; }>
toggleTorch(...)
1toggleTorch(options: { on: boolean; }) => Promise<void>
| Param | Type |
|---|---|
options | { on: boolean; } |
getOrientation()
1getOrientation() => Promise<{ "orientation": "PORTRAIT" | "LANDSCAPE"; }>
get the orientation of the device.
Returns: Promise<{ orientation: 'PORTRAIT' | 'LANDSCAPE'; }>
startRecording()
1startRecording() => Promise<void>
stopRecording(...)
1stopRecording(options: { includeBase64?: boolean; }) => Promise<{ path?: string; base64?: string; blob?: Blob; }>
| Param | Type |
|---|---|
options | { includeBase64?: boolean; } |
Returns: Promise<{ path?: string; base64?: string; blob?: any; }>
setLayout(...)
1setLayout(options: { top: string; left: string; width: string; height: string; }) => Promise<void>
| Param | Type |
|---|---|
options | { top: string; left: string; width: string; height: string; } |
requestCameraPermission()
1requestCameraPermission() => Promise<void>
requestMicroPhonePermission()
1requestMicroPhonePermission() => Promise<void>
isOpen()
1isOpen() => Promise<{ isOpen: boolean; }>
Returns: Promise<{ isOpen: boolean; }>
addListener('onPlayed', ...)
1addListener(eventName: 'onPlayed', listenerFunc: onPlayedListener) => Promise<PluginListenerHandle>
| Param | Type |
|---|---|
eventName | 'onPlayed' |
listenerFunc | onPlayedListener |
Returns: Promise<PluginListenerHandle>
addListener('onOrientationChanged', ...)
1addListener(eventName: 'onOrientationChanged', listenerFunc: onOrientationChangedListener) => Promise<PluginListenerHandle>
| Param | Type |
|---|---|
eventName | 'onOrientationChanged' |
listenerFunc | onOrientationChangedListener |
Returns: Promise<PluginListenerHandle>
removeAllListeners()
1removeAllListeners() => Promise<void>
Interfaces
ScanRegion
measuredByPercentage: 0 in pixel, 1 in percent
| Prop | Type |
|---|---|
left | number |
top | number |
right | number |
bottom | number |
measuredByPercentage | number |
PluginListenerHandle
| Prop | Type |
|---|---|
remove | () => Promise<void> |
Type Aliases
onPlayedListener
(result: { resolution: string; }): void
onOrientationChangedListener
(): void
No vulnerabilities found.
No security vulnerabilities found.