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

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`