capacitor-plugin-camera

capacitor-plugin-camera

A capacitor camera plugin.

Online demo

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

npm install capacitor-plugin-camera
npx 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:

Class cls = Class.forName("com.tonyxlh.capacitor.camera.CameraPreviewPlugin");
Method m = cls.getMethod("getBitmap",null);
Bitmap bitmap = (Bitmap) m.invoke(null, null);

Objective-C:

- (UIImage*)getUIImage{
    UIImage *image = ((UIImage* (*)(id, SEL))objc_msgSend)(objc_getClass("CameraPreviewPlugin"), sel_registerName("getBitmap"));
    return image;
}

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:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Add the following to iOS's Info.plist:

<key>NSCameraUsageDescription</key>
<string>For camera usage</string>
<key>NSMicrophoneUsageDescription</key>
<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:

ion-content {
  --background: transparent;
}

In dark mode, it is neccessary to set the --ion-blackground-color property. You can do this with the following code:

document.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()

initialize() => Promise<void>

---

getResolution()

getResolution() => Promise<{ resolution: string; }>

Returns: Promise<{ resolution: string; }>

---

setResolution(...)

setResolution(options: { resolution: number; }) => Promise<void>

Param	Type
options	{ resolution: number; }

---

getAllCameras()

getAllCameras() => Promise<{ cameras: string[]; }>

Returns: Promise<{ cameras: string[]; }>

---

getSelectedCamera()

getSelectedCamera() => Promise<{ selectedCamera: string; }>

Returns: Promise<{ selectedCamera: string; }>

---

selectCamera(...)

selectCamera(options: { cameraID: string; }) => Promise<void>

Param	Type
options	{ cameraID: string; }

---

setScanRegion(...)

setScanRegion(options: { region: ScanRegion; }) => Promise<void>

Param	Type
options	{ region: ScanRegion; }

---

setZoom(...)

setZoom(options: { factor: number; }) => Promise<void>

Param	Type
options	{ factor: number; }

---

setFocus(...)

setFocus(options: { x: number; y: number; }) => Promise<void>

Param	Type
options	{ x: number; y: number; }

---

setDefaultUIElementURL(...)

setDefaultUIElementURL(url: string) => Promise<void>

Web Only

Param	Type
url	string

---

setElement(...)

setElement(ele: any) => Promise<void>

Web Only

Param	Type
ele	any

---

startCamera()

startCamera() => Promise<void>

---

stopCamera()

stopCamera() => Promise<void>

---

takeSnapshot(...)

takeSnapshot(options: { quality?: number; }) => Promise<{ base64: string; }>

take a snapshot as base64.

Param	Type
options	{ quality?: number; }

Returns: Promise<{ base64: string; }>

---

saveFrame()

saveFrame() => Promise<{ success: boolean; }>

save a frame internally. Android and iOS only.

Returns: Promise<{ success: boolean; }>

---

takeSnapshot2(...)

takeSnapshot2(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(...)

takePhoto(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(...)

toggleTorch(options: { on: boolean; }) => Promise<void>

Param	Type
options	{ on: boolean; }

---

getOrientation()

getOrientation() => Promise<{ "orientation": "PORTRAIT" | "LANDSCAPE"; }>

get the orientation of the device.

Returns: Promise<{ orientation: 'PORTRAIT' | 'LANDSCAPE'; }>

---

startRecording()

startRecording() => Promise<void>

---

stopRecording(...)

stopRecording(options: { includeBase64?: boolean; }) => Promise<{ path?: string; base64?: string; blob?: Blob; }>

Param	Type
options	{ includeBase64?: boolean; }

Returns: Promise<{ path?: string; base64?: string; blob?: any; }>

---

setLayout(...)

setLayout(options: { top: string; left: string; width: string; height: string; }) => Promise<void>

Param	Type
options	{ top: string; left: string; width: string; height: string; }

---

requestCameraPermission()

requestCameraPermission() => Promise<void>

---

requestMicroPhonePermission()

requestMicroPhonePermission() => Promise<void>

---

isOpen()

isOpen() => Promise<{ isOpen: boolean; }>

Returns: Promise<{ isOpen: boolean; }>

---

addListener('onPlayed', ...)

addListener(eventName: 'onPlayed', listenerFunc: onPlayedListener) => Promise<PluginListenerHandle>

Param	Type
eventName	'onPlayed'
listenerFunc	onPlayedListener

Returns: Promise<PluginListenerHandle>

---

addListener('onOrientationChanged', ...)

addListener(eventName: 'onOrientationChanged', listenerFunc: onOrientationChangedListener) => Promise<PluginListenerHandle>

Param	Type
eventName	'onOrientationChanged'
listenerFunc	onOrientationChangedListener

Returns: Promise<PluginListenerHandle>

---

removeAllListeners()

removeAllListeners() => 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