webf_camera 1.0.1

Camera component for WebF applications. Wraps Flutter's camera package as HTML custom element for use in WebF.

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