Camera Plugin

1import { useRef } from 'react';
2import { FlutterCamera, FlutterCameraElement } from '@openwebf/react-camera';
3
4function CameraPreview() {
5  const cameraRef = useRef<FlutterCameraElement>(null);
6
7  const handleCameraReady = (e: CustomEvent) => {
8    console.log('Camera ready:', e.detail);
9    console.log('Available cameras:', e.detail.cameras);
10    console.log('Zoom range:', e.detail.minZoom, '-', e.detail.maxZoom);
11  };
12
13  return (
14    <FlutterCamera
15      ref={cameraRef}
16      facing="back"
17      resolution="high"
18      flashMode="auto"
19      autoInit={true}
20      enableAudio={true}
21      style={{ width: '100%', height: '400px' }}
22      onCameraready={handleCameraReady}
23    />
24  );
25}

1import { useRef, useState } from 'react';
2import { FlutterCamera, FlutterCameraElement } from '@openwebf/react-camera';
3
4function PhotoCapture() {
5  const cameraRef = useRef<FlutterCameraElement>(null);
6  const [capturedImage, setCapturedImage] = useState<string>('');
7
8  const handlePhotoCaptured = (e: CustomEvent) => {
9    const { path, width, height, size } = e.detail;
10    console.log(`Photo captured: ${width}x${height}, ${size} bytes`);
11    setCapturedImage(`file://${path}`);
12  };
13
14  const takePicture = () => {
15    cameraRef.current?.takePicture();
16  };
17
18  return (
19    <div>
20      <FlutterCamera
21        ref={cameraRef}
22        facing="back"
23        resolution="high"
24        onPhotocaptured={handlePhotoCaptured}
25        onCapturefailed={(e) => console.error('Capture failed:', e.detail.error)}
26      />
27      <button onClick={takePicture}>Take Photo</button>
28      {capturedImage && <img src={capturedImage} alt="Captured" />}
29    </div>
30  );
31}

1import { useRef, useState } from 'react';
2import { FlutterCamera, FlutterCameraElement } from '@openwebf/react-camera';
3
4function VideoRecording() {
5  const cameraRef = useRef<FlutterCameraElement>(null);
6  const [isRecording, setIsRecording] = useState(false);
7
8  const handleRecordingStarted = () => {
9    setIsRecording(true);
10    console.log('Recording started');
11  };
12
13  const handleRecordingStopped = (e: CustomEvent) => {
14    setIsRecording(false);
15    const { path, duration } = e.detail;
16    console.log(`Video saved: ${path}, duration: ${duration}s`);
17  };
18
19  const toggleRecording = () => {
20    if (isRecording) {
21      cameraRef.current?.stopVideoRecording();
22    } else {
23      cameraRef.current?.startVideoRecording();
24    }
25  };
26
27  return (
28    <div>
29      <FlutterCamera
30        ref={cameraRef}
31        facing="back"
32        enableAudio={true}
33        onRecordingstarted={handleRecordingStarted}
34        onRecordingstopped={handleRecordingStopped}
35        onRecordingfailed={(e) => console.error('Recording failed:', e.detail.error)}
36      />
37      <button onClick={toggleRecording}>
38        {isRecording ? 'Stop Recording' : 'Start Recording'}
39      </button>
40    </div>
41  );
42}

1import { useRef, useState } from 'react';
2import { FlutterCamera, FlutterCameraElement } from '@openwebf/react-camera';
3
4function CameraControls() {
5  const cameraRef = useRef<FlutterCameraElement>(null);
6  const [flashMode, setFlashMode] = useState('auto');
7  const [zoomLevel, setZoomLevel] = useState(1.0);
8
9  // Switch between front and back cameras
10  const switchCamera = () => {
11    cameraRef.current?.switchCamera();
12  };
13
14  // Cycle through flash modes
15  const cycleFlashMode = () => {
16    const modes = ['off', 'auto', 'always', 'torch'];
17    const nextIndex = (modes.indexOf(flashMode) + 1) % modes.length;
18    const nextMode = modes[nextIndex];
19    cameraRef.current?.setFlashMode(nextMode);
20    setFlashMode(nextMode);
21  };
22
23  // Handle zoom slider change
24  const handleZoomChange = (e: React.ChangeEvent<HTMLInputElement>) => {
25    const zoom = parseFloat(e.target.value);
26    cameraRef.current?.setZoomLevel(zoom);
27    setZoomLevel(zoom);
28  };
29
30  // Set focus point on tap
31  const handleTapToFocus = (e: React.MouseEvent) => {
32    const rect = e.currentTarget.getBoundingClientRect();
33    const x = (e.clientX - rect.left) / rect.width;
34    const y = (e.clientY - rect.top) / rect.height;
35    cameraRef.current?.setFocusPoint(x, y);
36  };
37
38  return (
39    <div>
40      <div onClick={handleTapToFocus}>
41        <FlutterCamera
42          ref={cameraRef}
43          flashMode={flashMode}
44          onCameraswitched={(e) => console.log('Switched to:', e.detail.facing)}
45          onZoomchanged={(e) => setZoomLevel(e.detail.zoom)}
46        />
47      </div>
48      <div>
49        <button onClick={switchCamera}>Switch Camera</button>
50        <button onClick={cycleFlashMode}>Flash: {flashMode}</button>
51        <input
52          type="range"
53          min="1"
54          max="5"
55          step="0.1"
56          value={zoomLevel}
57          onChange={handleZoomChange}
58        />
59        <span>Zoom: {zoomLevel.toFixed(1)}x</span>
60      </div>
61    </div>
62  );
63}