WebF Camera

Camera component for WebF applications. Wraps Flutter's camera package as an HTML custom element for capturing photos and videos.

Installation

Add this package to your pubspec.yaml:

dependencies:
  webf_camera: ^1.0.1

Setup

Register the custom element in your Flutter app's main function:

import 'package:webf_camera/webf_camera.dart';

void main() {
  installWebFCamera();
  runApp(MyApp());
}

Usage

React

Install the React package:

npm install @openwebf/react-camera

Basic usage:

import { useRef } from 'react';
import { FlutterCamera, FlutterCameraElement } from '@openwebf/react-camera';

function CameraApp() {
  const cameraRef = useRef<FlutterCameraElement>(null);

  const handleCameraReady = (e: CustomEvent) => {
    console.log('Camera ready:', e.detail);
    console.log('Zoom range:', e.detail.minZoom, '-', e.detail.maxZoom);
  };

  const takePicture = () => {
    cameraRef.current?.takePicture();
  };

  return (
    <div>
      <FlutterCamera
        ref={cameraRef}
        facing="back"
        resolution="high"
        flashMode="auto"
        autoInit={true}
        enableAudio={true}
        style={{ width: '100%', height: '400px' }}
        onCameraready={handleCameraReady}
        onPhotocaptured={(e) => console.log('Photo:', e.detail.path)}
        onCapturefailed={(e) => console.error('Failed:', e.detail.error)}
      />
      <button onClick={takePicture}>Take Photo</button>
    </div>
  );
}

Vue

Install the Vue package:

npm install @openwebf/vue-camera

Basic usage (type-only import with custom element):

<script setup lang="ts">
import { ref } from 'vue';
// Type-only import - no runtime JS in Vue package
import type { FlutterCameraElement } from '@openwebf/vue-camera';

const cameraRef = ref<FlutterCameraElement | null>(null);

function handleCameraReady(e: CustomEvent) {
  console.log('Camera ready:', e.detail);
  console.log('Zoom range:', e.detail.minZoom, '-', e.detail.maxZoom);
}

function handlePhotoCaptured(e: CustomEvent) {
  console.log('Photo saved to:', e.detail.path);
}

function handleCameraFailed(e: CustomEvent) {
  console.error('Camera error:', e.detail.error);
}

function takePicture() {
  cameraRef.value?.takePicture();
}
</script>

<template>
  <div>
    <flutter-camera
      ref="cameraRef"
      facing="back"
      resolution="high"
      flash-mode="auto"
      auto-init
      enable-audio
      :style="{ width: '100%', height: '400px' }"
      @cameraready="handleCameraReady"
      @photocaptured="handlePhotoCaptured"
      @camerafailed="handleCameraFailed"
    />
    <button @click="takePicture">Take Photo</button>
  </div>
</template>

HTML Custom Element

Basic example:

<flutter-camera></flutter-camera>

With options:

<flutter-camera
  facing="back"
  resolution="high"
  flash-mode="auto"
  enable-audio="true"
  auto-init="true"
></flutter-camera>

JavaScript Control

const camera = document.querySelector('flutter-camera');

// Listen for camera ready
camera.addEventListener('cameraready', (e) => {
  console.log('Available cameras:', e.detail.cameras);
  console.log('Zoom range:', e.detail.minZoom, '-', e.detail.maxZoom);
});

// Take a photo
camera.takePicture();

// Listen for photo captured
camera.addEventListener('photocaptured', (e) => {
  console.log('Photo saved to:', e.detail.path);
});

// Record video
camera.startVideoRecording();
// ... recording ...
camera.stopVideoRecording();

// Listen for recording stopped
camera.addEventListener('recordingstopped', (e) => {
  console.log('Video saved to:', e.detail.path);
});

// Switch between front/back cameras
camera.switchCamera();

// Control zoom
camera.setZoomLevel(2.0);

// Set flash mode
camera.setFlashMode('torch');

// Set focus point (normalized 0-1 coordinates)
camera.setFocusPoint(0.5, 0.5);

// Handle errors
camera.addEventListener('camerafailed', (e) => {
  console.error('Camera error:', e.detail.error, e.detail.code);
});

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | facing | string | 'back' | Camera facing: 'front', 'back', 'external' | | resolution | string | 'high' | Resolution: 'low', 'medium', 'high', 'veryHigh', 'ultraHigh', 'max' | | flash-mode | string | 'auto' | Flash mode: 'off', 'auto', 'always', 'torch' | | enable-audio | boolean | true | Enable audio for video recording | | auto-init | boolean | true | Auto-initialize camera on mount | | zoom | number | 1.0 | Current zoom level | | exposure-offset | number | 0.0 | Current exposure offset | | focus-mode | string | 'auto' | Focus mode: 'auto', 'locked' | | exposure-mode | string | 'auto' | Exposure mode: 'auto', 'locked' |

Methods

Async Methods

| Method | Returns | Description | |--------|---------|-------------| | initialize() | Promise | Initialize the camera | | dispose() | Promise | Dispose camera resources | | takePicture() | Promise | Take a photo | | startVideoRecording() | Promise | Start video recording | | stopVideoRecording() | Promise | Stop video recording | | pauseVideoRecording() | Promise | Pause video recording (iOS only) | | resumeVideoRecording() | Promise | Resume video recording (iOS only) | | switchCamera() | Promise | Switch between cameras | | setFlashMode(mode) | Promise | Set flash mode | | setZoomLevel(zoom) | Promise | Set zoom level (1.0 to maxZoom) | | setExposureOffset(offset) | Promise | Set exposure offset | | setFocusPoint(x, y) | Promise | Set focus point (normalized 0-1) | | setExposurePoint(x, y) | Promise | Set exposure point (normalized 0-1) | | lockCaptureOrientation(orientation) | Promise | Lock capture orientation | | unlockCaptureOrientation() | Promise | Unlock capture orientation | | getAvailableCameras() | Promise<CameraInfo[]> | Get available cameras |

Sync Methods

| Method | Returns | Description | |--------|---------|-------------| | getMinZoomLevel() | number | Get minimum zoom level | | getMaxZoomLevel() | number | Get maximum zoom level | | getMinExposureOffset() | number | Get minimum exposure offset | | getMaxExposureOffset() | number | Get maximum exposure offset |

Events

| Event | Detail | Description | |-------|--------|-------------| | cameraready | {cameras, currentCamera, minZoom, maxZoom, minExposureOffset, maxExposureOffset} | Camera initialized | | camerafailed | {error, code} | Camera initialization failed | | photocaptured | {path, width, height, size} | Photo captured successfully | | capturefailed | {error} | Photo capture failed | | recordingstarted | - | Video recording started | | recordingstopped | {path, duration} | Video recording stopped | | recordingfailed | {error} | Video recording failed | | cameraswitched | {facing, camera} | Camera switched | | zoomchanged | {zoom} | Zoom level changed | | focusset | {x, y} | Focus point set | | cameradisposed | - | Camera disposed |

Error Codes

| Code | Description | |------|-------------| | NO_CAMERAS | No cameras available on device | | INIT_ERROR | Failed to initialize cameras | | CONTROLLER_ERROR | Failed to create camera controller |

Platform Configuration

iOS

Add to ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for taking photos and videos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for recording video with audio.</string>

Android

Add to android/app/src/main/AndroidManifest.xml:

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

Set minimum SDK version in android/app/build.gradle:

minSdkVersion 21

macOS

Add to macos/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for taking photos and videos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for recording video with audio.</string>

Add to macos/Runner/DebugProfile.entitlements and macos/Runner/Release.entitlements:

<key>com.apple.security.device.camera</key>
<true/>
<key>com.apple.security.device.audio-input</key>
<true/>

License

Apache License 2.0