@chris/capacitor-custom-camera

A Capacitor plugin that provides a custom camera preview with HTML overlays, allowing photo capture and video recording directly within the app.

Install

npm install @chris/capacitor-custom-camera
npx cap sync

API

• startPreview(...)
• stopPreview()
• takePhoto(...)
• startRecording(...)
• stopRecording()
• flipCamera()
• tapToFocus(...)
• setFlashMode(...)
• setZoom(...)
• isPreviewActive()
• addListener('mediaCaptured', ...)
• removeAllListeners()
• Interfaces
• Type Aliases

startPreview(...)

startPreview(options: StartPreviewOptions) => Promise<void>

| Param | Type | | ------------- | ------------------------------------------------------------------- | | options | StartPreviewOptions |

stopPreview()

stopPreview() => Promise<void>

takePhoto(...)

takePhoto(options?: TakePhotoOptions | undefined) => Promise<TakePhotoResult>

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | TakePhotoOptions |

Returns: Promise<TakePhotoResult>

startRecording(...)

startRecording(options: StartRecordingOptions) => Promise<void>

| Param | Type | | ------------- | ----------------------------------------------------------------------- | | options | StartRecordingOptions |

stopRecording()

stopRecording() => Promise<StopRecordingResult>

Returns: Promise<StopRecordingResult>

flipCamera()

flipCamera() => Promise<void>

tapToFocus(...)

tapToFocus(options: TapToFocusOptions) => Promise<void>

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | TapToFocusOptions |

setFlashMode(...)

setFlashMode(mode: FlashMode) => Promise<void>

| Param | Type | | ---------- | ----------------------------------------------- | | mode | FlashMode |

setZoom(...)

setZoom(level: number) => Promise<void>

| Param | Type | | ----------- | ------------------- | | level | number |

isPreviewActive()

isPreviewActive() => Promise<{ active: boolean; }>

Returns: Promise<{ active: boolean; }>

addListener('mediaCaptured', ...)

addListener(eventName: 'mediaCaptured', listenerFunc: (data: MediaCapturedEvent) => void) => Promise<PluginListenerHandle>

| Param | Type | | ------------------ | ------------------------------------------------------------------------------------ | | eventName | 'mediaCaptured' | | listenerFunc | (data: MediaCapturedEvent) => void |

Returns: Promise<PluginListenerHandle>

removeAllListeners()

removeAllListeners() => Promise<void>

Interfaces

StartPreviewOptions

| Prop | Type | | ---------------------------- | ------------------------------ | | camera | 'front' | 'rear' | | toBack | boolean | | containerId | string | | matchOutputToContainer | boolean |

TakePhotoResult

| Prop | Type | | ------------ | ------------------- | | path | string | | base64 | string |

TakePhotoOptions

| Prop | Type | | ------------------- | -------------------- | | quality | number | | saveToGallery | boolean |

StartRecordingOptions

| Prop | Type | | --------------- | ---------------------------------------- | | quality | 'low' | 'medium' | 'high' | | withAudio | boolean |

StopRecordingResult

| Prop | Type | | -------------- | ------------------- | | path | string | | duration | number | | size | number |

TapToFocusOptions

| Prop | Type | | ------- | ------------------- | | x | number | | y | number |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

MediaCapturedEvent

| Prop | Type | | -------------- | ------------------------------- | | type | 'photo' | 'video' | | path | string | | duration | number | | size | number |

Type Aliases

FlashMode

'on' | 'off' | 'auto' | 'torch'