Gathering detailed insights and metrics for capacitor-plugin-camera
Gathering detailed insights and metrics for capacitor-plugin-camera
Installations
npm install capacitor-plugin-cameraDeveloper
xulihang
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
20.9.0
NPM Version
10.1.0
Statistics
9 Stars
87 Commits
1 Watching
1 Branches
1 Contributors
Updated on 15 Nov 2024
Languages
Java (41.78%)
Swift (24.15%)
TypeScript (14.21%)
JavaScript (13.38%)
HTML (3.21%)
Objective-C (1.82%)
Ruby (1.39%)
SCSS (0.07%)
Total Downloads
Cumulative downloads
Total Downloads
2,769
Last day
-4.7%
41
Compared to previous day
Last week
32.8%
235
Compared to previous week
Last month
145%
642
Compared to previous month
Last year
2,009.8%
2,574
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
Peer Dependencies
1
Versions
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.
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.