Awesome

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: <code>Promise<{ resolution: string; }></code>

setResolution(...)

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

getAllCameras()

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

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

getSelectedCamera()

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

Returns: <code>Promise<{ selectedCamera: string; }></code>

selectCamera(...)

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

setScanRegion(...)

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

setZoom(...)

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

setFocus(...)

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

setDefaultUIElementURL(...)

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

Web Only

setElement(...)

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

Web Only

startCamera()

startCamera() => Promise<void>

stopCamera()

stopCamera() => Promise<void>

takeSnapshot(...)

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

take a snapshot as base64.

Returns: <code>Promise<{ base64: string; }></code>

saveFrame()

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

save a frame internally. Android and iOS only.

Returns: <code>Promise<{ success: boolean; }></code>

takeSnapshot2(...)

takeSnapshot2(options: { canvas: HTMLCanvasElement; maxLength?: number; }) => Promise<{ scaleRatio?: number; }>

take a snapshot on to a canvas. Web Only

Returns: <code>Promise<{ scaleRatio?: number; }></code>

takePhoto(...)

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

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

toggleTorch(...)

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

getOrientation()

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

get the orientation of the device.

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

startRecording()

startRecording() => Promise<void>

stopRecording(...)

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

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

setLayout(...)

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

requestCameraPermission()

requestCameraPermission() => Promise<void>

requestMicroPhonePermission()

requestMicroPhonePermission() => Promise<void>

isOpen()

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

Returns: <code>Promise<{ isOpen: boolean; }></code>

addListener('onPlayed', ...)

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

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener('onOrientationChanged', ...)

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

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

removeAllListeners()

removeAllListeners() => Promise<void>

Interfaces

ScanRegion

measuredByPercentage: 0 in pixel, 1 in percent

PluginListenerHandle

Type Aliases

onPlayedListener

<code>(result: { resolution: string; }): void</code>

onOrientationChangedListener

<code>(): void</code>