Take Picture Field

• A custom Filament form component to capture photos from your device camera.
• Features
• Installation
• Requirements
• Usage
• Configuration Options
• Language / Translations (EN / DE / TL)
  • Publish translations (optional)
• ❗ IMPORTANT NOTICE: For Local development testing
  • Recommended (safer) options
  • Temporary Chrome workaround (for testing only)
  • Security notes
• Screenshots
• Contributing
• License
• Get in touch

#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:^1.2.1

#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')
    ->showCameraSelector(true)
    ->aspect('16:9')
    ->imageQuality(80)
    ->shouldDeleteOnEdit(false)

#Configuration Options

#Language / Translations (EN / DE / TL)

This package supports multiple languages out of the box:

• English (en)
• German (de)
• Tagalog / Filipino (tl)

It follows your Laravel app locale automatically (e.g. config('app.locale')).

#Publish translations (optional)

If you want to customize the wording, publish the translation files:

php artisan vendor:publish --tag=filament-take-picture-field-translations

#❗ IMPORTANT NOTICE: For Local development testing

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

Contributions and pull requests for improvements are welcome!

#License

MIT

# Get in touch