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.

For Capacitor 7, use versions 3.x.

Install

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

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

Objective-C:

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

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:

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

Add the following to iOS's Info.plist:

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

1ion-content {
2  --background: transparent;
3}

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

1document.documentElement.style.setProperty('--ion-background-color', 'transparent');

API

1initialize(options?: { quality?: number | undefined; } | undefined) => Promise<void>

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

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

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

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

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

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

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

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

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

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

1startCamera() => Promise<void>

1stopCamera() => Promise<void>

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

1detectBlur(options: { image: string; }) => Promise<{ isBlur: boolean; blurConfidence: number; sharpConfidence: number; }>

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

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

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

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

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

1startRecording() => Promise<void>

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

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

1requestCameraPermission() => Promise<void>

1requestMicroPhonePermission() => Promise<void>

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

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

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

1removeAllListeners() => Promise<void>

Blur Detection

The plugin includes blur detection capabilities using TensorFlow Lite models with Laplacian variance fallback, providing consistent results across all platforms.

Analyze Existing Images

Use the detectBlur method to analyze any base64 image with detailed confidence scores:

1// Analyze an existing image (base64 string or data URL)
2const result = await CameraPreview.detectBlur({
3  image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..."
4  // or just the base64 string: "/9j/4AAQSkZJRgABAQEASABIAAD..."
5});
6
7console.log('Is Blurry:', result.isBlur);           // boolean: true/false
8console.log('Blur Confidence:', result.blurConfidence);   // 0.0-1.0 (higher = more blurry)  
9console.log('Sharp Confidence:', result.sharpConfidence); // 0.0-1.0 (higher = more sharp)
10
11// Use confidence scores for advanced logic
12if (result.blurConfidence > 0.7) {
13  console.log('High confidence this image is blurry');
14} else if (result.sharpConfidence > 0.8) {
15  console.log('High confidence this image is sharp');
16} else {
17  console.log('Uncertain blur status - manual review needed');
18}

Basic Usage (Capture + Detection)

1// Take a snapshot with blur detection
2const result = await CameraPreview.takeSnapshot({
3  quality: 85,
4  checkBlur: true  // Optional, defaults to false for performance
5});
6
7console.log('Base64:', result.base64);
8if (result.blurScore !== undefined) {
9  console.log('Blur Score:', result.blurScore);
10  
11  // Implement your own blur threshold logic
12  const threshold = 50.0; // Adjust based on your quality requirements
13  const isBlurry = result.blurScore < threshold;
14  
15  if (isBlurry) {
16    console.log('Image appears to be blurry');
17  } else {
18    console.log('Image appears to be sharp');
19  }
20}

Performance Control

Blur detection is disabled by default for optimal performance. Enable it only when needed:

1// Blur detection OFF (default) - faster performance
2const result = await CameraPreview.takeSnapshot({ quality: 85 });
3
4// Blur detection ON - includes blur analysis
5const resultWithBlur = await CameraPreview.takeSnapshot({ 
6  quality: 85, 
7  checkBlur: true 
8});

Understanding Blur Results

New detectBlur Method (Recommended):

• Returns standardized confidence scores (0.0-1.0 range) across all platforms
• blurConfidence: Higher values indicate more blur (>0.7 = likely blurry)
• sharpConfidence: Higher values indicate more sharpness (>0.8 = likely sharp)
• isBlur: Simple boolean result based on confidence thresholds

Legacy takeSnapshot Method:

• Higher values = Sharper images
• Lower values = Blurrier images
• Threshold guidelines:
  • iOS: Consider values below 0.001 as blurry
  • Android/Web: Consider values below 50-100 as blurry
  • Adjust thresholds based on your specific quality requirements

When to Use Which Method

Use detectBlur for:

• Analyzing already captured images
• Batch processing multiple images
• Getting detailed confidence scores for advanced decision logic
• Post-processing workflows
• When you need consistent confidence values across platforms

Use takeSnapshot with checkBlur: true for:

• Real-time capture with immediate blur feedback
• Simple blur detection during image capture
• When you only need a basic blur/sharp indication

Performance Impact

Implementation Notes

• TensorFlow Lite models for advanced blur detection with high accuracy
• Laplacian variance fallback when TFLite models unavailable
• Pixel sampling for performance optimization
• Hardware acceleration on iOS with Core Image
• Client-side threshold logic for maximum flexibility
• Cross-platform algorithm consistency
• Dual API: takeSnapshot for capture+detection, detectBlur for analyzing existing images