Filament Take Picture Field v1

A custom Filament form component to capture photos from your device camera.

Features

• Take photos directly from the user's device camera
• Seamless integration with Filament forms
• Configurable storage options (disk, directory, visibility)
• Camera selector for devices with multiple cameras
• Adjustable aspect ratio and image quality
• Modal support for better user experience

Installation

composer require emmanpbarrameda/filament-take-picture-field

Requirements

• Laravel 11^
• PHP: 8.1^
• Filament: v3^ and v4^
• A device with camera access (desktop or mobile)

Usage

Add the component to your Filament form:

use emmanpbarrameda\FilamentTakePictureField\Forms\Components\TakePicture;

// ...

TakePicture::make('camera_test')
    ->label('Camera Test')
    ->disk('public')
    ->directory('uploads/services/payment_receipts_proof')
    ->visibility('public')
    ->useModal(true)
    ->showCameraSelector(true)
    ->aspect('16:9')
    ->imageQuality(80)
    ->shouldDeleteOnEdit(false)

Configuration Options

Method	Description
disk(string $disk)	Set the storage disk for saving photos (default: 'public')
directory(string $directory)	Set the directory path within the disk where photos will be stored
visibility(string $visibility)	Set the file visibility (e.g., 'public', 'private')
useModal(bool $useModal)	Enable or disable modal view for the camera (default: 'true')
showCameraSelector(bool $showSelector)	Enable or disable camera selection option for devices with multiple cameras (default: 'true')
aspect(string $aspect)	Set the aspect ratio for the captured image (e.g., '16:9', '4:3', '1:1')
imageQuality(int $quality)	Set the JPEG quality of the captured image (0-100)
shouldDeleteOnEdit(bool $shouldDelete)	Whether to delete the previous file when editing (default: 'false')

❗ IMPORTANT NOTICE: For Local development

The browser's Camera API only works on secure origins (HTTPS). Many browsers treat https://localhost as secure, but plain http:// over an IP (e.g., http://127.0.0.1:8000) is considered insecure and the camera will be blocked. If it isn't working for you on localhost, switch to HTTPS or use the temporary Chrome test flags below.

Recommended (safer) options

Temporary Chrome workaround (for testing only)

If you must test over plain HTTP on a LAN IP, you can launch Chrome to temporarily treat that origin as secure. Do not use this for normal browsing. Use a separate profile and close all Chrome windows first.

Replace http://127.0.0.1:8000 with your dev server's URL.

Windows:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\chrome-dev-test" --unsafely-treat-insecure-origin-as-secure=http://127.0.0.1:8000 --disable-web-security

macOS:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --user-data-dir="/tmp/chrome-dev-test" \
  --unsafely-treat-insecure-origin-as-secure=http://127.0.0.1:8000 \
  --disable-web-security

Linux:

google-chrome \
  --user-data-dir="/tmp/chrome-dev-test" \
  --unsafely-treat-insecure-origin-as-secure=http://127.0.0.1:8000 \
  --disable-web-security

Security notes

• These flags removes important browser protections. Use them only for local testing of your app.
• Always use a separate --user-data-dir so your main Chrome profile stays safe.
• Close all Chrome windows before running the command, and avoid visiting untrusted sites in that session.

Screenshots

Contributing

This is version 1.0 of the filament-take-picture-field component plugin. Contributions and pull requests for improvements are welcome!

License

MIT

Get in touch