Capacitor Canvas Camera plugin

Plugin's Purpose

The purpose of the plugin is to capture video to preview camera in a web page's canvas element. Allows to select front or back camera and to control the flash.

Install

npm install @jewel998/camera-preview
npx cap sync

API

• initialize(...)
• start()
• stop()
• setOrientationChange(...)
• flip()
• getSupportedFlashModes()
• setFlashMode(...)
• onRenderFrame(...)
• Type Aliases

initialize(...)

initialize(options: CameraInitOptions) => void

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | CameraInitOptions |

start()

start() => Promise<void>

stop()

stop() => Promise<void>

setOrientationChange(...)

setOrientationChange(option: { value: 'portrait' | 'landscape'; }) => Promise<void>

| Param | Type | | ------------ | -------------------------------------------------- | | option | { value: 'portrait' | 'landscape'; } |

flip()

flip() => Promise<void>

getSupportedFlashModes()

getSupportedFlashModes() => Promise<{ result: string[]; }>

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

setFlashMode(...)

setFlashMode(option: { value: boolean; }) => Promise<void>

| Param | Type | | ------------ | -------------------------------- | | option | { value: boolean; } |

onRenderFrame(...)

onRenderFrame(cb: RenderFrameCallback) => void

| Param | Type | | -------- | ------------------------------------------------------------------- | | cb | RenderFrameCallback |

Type Aliases

CameraInitOptions

{ flashMode?: boolean; cameraFacing?: 'front' | 'rear'; fps?: number; width?: number; height?: number; canvas?: { width: number; height: number }; capture?: { width: number; height: number }; }

RenderFrameCallback

(frame: Frame): unknown

Frame

{ data: string; width: number; height: number; timestamp: number }