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

Libraries

webf_camera