Take Picture Field by Emman Barrameda

A custom Filament form component to capture photos from your device camera.
Features
Installation
Requirements
Usage
Configuration Options
❗ IMPORTANT NOTICE: For Local development
Screenshots
Contributing
License
Get in touch

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

emmanpbarrameda-take-picture-field

#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.1 -W

#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.