PHPackages chengkangzai/filament-qrcode-scanner-html5 - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. chengkangzai/filament-qrcode-scanner-html5 ActiveLibrary[Utility & Helpers](/categories/utility) chengkangzai/filament-qrcode-scanner-html5 ========================================== A Filament form action for scanning barcodes and QR codes using the device camera with html5-qrcode library v2.1.0(2mo ago)01.3k↓21.6%MITPHPPHP ^8.2CI passing Since Jan 6Pushed 2mo agoCompare [ Source](https://github.com/chengkangzai/filament-qrcode-scanner-html5)[ Packagist](https://packagist.org/packages/chengkangzai/filament-qrcode-scanner-html5)[ Docs](https://github.com/chengkangzai/filament-qrcode-scanner-html5)[ RSS](/packages/chengkangzai-filament-qrcode-scanner-html5/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (8)Versions (9)Used By (0) Filament QR Code Scanner (html5-qrcode) ======================================= [](#filament-qr-code-scanner-html5-qrcode) [![Latest Version on Packagist](https://camo.githubusercontent.com/bc47618d1b1ab33e97b4e9f68cf0c0d33d9bb71ad679775546a60c12fab6cbf6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6368656e676b616e677a61692f66696c616d656e742d7172636f64652d7363616e6e65722d68746d6c352e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/chengkangzai/filament-qrcode-scanner-html5)[![Tests](https://github.com/chengkangzai/filament-qrcode-scanner-html5/actions/workflows/tests.yml/badge.svg)](https://github.com/chengkangzai/filament-qrcode-scanner-html5/actions/workflows/tests.yml)[![Total Downloads](https://camo.githubusercontent.com/2b7e32d6e8a7b3627b3f47b71d946c579b7362383042cb199f1b79d98906c81c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6368656e676b616e677a61692f66696c616d656e742d7172636f64652d7363616e6e65722d68746d6c352e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/chengkangzai/filament-qrcode-scanner-html5)[![License](https://camo.githubusercontent.com/71f403542e961565ca39ab82aeabf3b542006ded12eb02bd700f261d457f5aeb/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6368656e676b616e677a61692f66696c616d656e742d7172636f64652d7363616e6e65722d68746d6c352e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/chengkangzai/filament-qrcode-scanner-html5) A Filament form action for scanning barcodes and QR codes using the device camera. Built with the [html5-qrcode](https://github.com/mebjas/html5-qrcode) library. Features -------- [](#features) - **Three-tier architecture**: Use as Filament action, standalone Livewire component, or pure Alpine.js - Scan QR codes and various barcode formats (Code128, Code39, EAN-13, UPC-A, ITF, and more) - Works on mobile and desktop devices with camera access - **Configurable scanner options**: fps, qrbox, aspect ratio, camera facing mode - Automatic camera switching (front/back) or force specific camera - Transform scanned values with PHP closures or JavaScript functions - **Header action support** for standalone scanning (e.g., attendance check-in) - Fully customizable labels and error messages - Dark mode support - Accessible with ARIA labels Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11.28+ - Filament 4.x or 5.x - Livewire 3.x or 4.x Installation ------------ [](#installation) Install the package via Composer: ``` composer require chengkangzai/filament-qrcode-scanner-html5 ``` The package will auto-register its service provider. ### Upgrading from v1.x [](#upgrading-from-v1x) v2.0 requires Filament 4, PHP 8.2+, and Laravel 11.28+. **For Filament 3 support, use v1.x:** ``` composer require chengkangzai/filament-qrcode-scanner-html5 "^1.3" ``` See [UPGRADE.md](UPGRADE.md) for detailed migration instructions. Usage ----- [](#usage) ### Basic Usage [](#basic-usage) Add the `BarcodeScannerAction` as a suffix action to any text input: ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerAction; TextInput::make('barcode') ->suffixAction(BarcodeScannerAction::make()) ``` ### Limit Supported Formats [](#limit-supported-formats) Restrict scanning to specific barcode formats: ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerAction; use CCK\FilamentQrcodeScannerHtml5\Enums\BarcodeFormat; TextInput::make('product_code') ->suffixAction( BarcodeScannerAction::make() ->supportedFormats([ BarcodeFormat::QRCode, BarcodeFormat::Code128, BarcodeFormat::Ean13, ]) ) ``` ### Transform Scanned Values (PHP) [](#transform-scanned-values-php) Use a PHP closure to transform the scanned value server-side: ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerAction; use CCK\FilamentQrcodeScannerHtml5\Enums\BarcodeFormat; TextInput::make('barcode') ->suffixAction( BarcodeScannerAction::make() ->modifyStateUsing(fn (string $value, ?BarcodeFormat $format) => // Strip leading zeros from ITF barcodes $format === BarcodeFormat::ITF ? ltrim($value, '0') : $value ) ) ``` ### Transform Scanned Values (JavaScript) [](#transform-scanned-values-javascript) Use a JavaScript function to transform the scanned value client-side: ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerAction; TextInput::make('barcode') ->suffixAction( BarcodeScannerAction::make() ->modifyStateUsingJs("(value, formatId) => value.replace(/^0+/, '')") ) ``` Format IDs for JavaScript: QR=0, PDF417=10, Code39=4, Code128=6, DataMatrix=12, ITF=8 ### Customize Labels and Messages [](#customize-labels-and-messages) ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerAction; TextInput::make('barcode') ->suffixAction( BarcodeScannerAction::make() ->switchCameraLabel('Toggle Camera') ->cameraUnavailableMessage('No camera detected on this device.') ->permissionDeniedMessage('Please allow camera access in your browser settings.') ) ``` ### Header Action (Standalone Scanning) [](#header-action-standalone-scanning) Use `BarcodeScannerHeaderAction` for standalone scanning without a form field, such as attendance check-in or inventory lookup: ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerHeaderAction; use CCK\FilamentQrcodeScannerHtml5\Enums\BarcodeFormat; use Filament\Notifications\Notification; // In your Filament Resource page (ListRecords, ViewRecord, etc.) protected function getHeaderActions(): array { return [ BarcodeScannerHeaderAction::make() ->label('Scan Attendance') ->afterScan(function (string $value, ?BarcodeFormat $format) { $user = User::where('qr_code', $value)->first(); if (! $user) { Notification::make() ->title('User not found') ->danger() ->send(); return null; // Just close the modal } // Mark attendance $user->attendances()->create(['checked_in_at' => now()]); // Redirect to user page return redirect()->route('filament.admin.resources.users.view', $user); }), ]; } ``` The `afterScan` callback can return: - `redirect('/url')` or `redirect()->route('name', $params)` - Redirect to a URL - `'/url'` - String URL to redirect - `null` - Just close the modal (useful after showing a notification) ### Scanner Configuration Options [](#scanner-configuration-options) Configure scanner behavior with these options (available on all actions): ``` use CCK\FilamentQrcodeScannerHtml5\BarcodeScannerAction; use CCK\FilamentQrcodeScannerHtml5\Enums\BarcodeFormat; TextInput::make('barcode') ->suffixAction( BarcodeScannerAction::make() ->fps(15) // Frames per second (1-30, default: 10) ->qrbox(250) // Square focus box (250x250) ->qrbox(300, 200) // Rectangle focus box (300x200) ->aspectRatio(1.777778) // Camera aspect ratio (16:9) ->preferBackCamera() // Force back/environment camera ->preferFrontCamera() // Force front/user camera ->facingMode('environment') // Alternative: 'user' or 'environment' ->supportedFormats([...]) // Limit barcode formats ->iconOnly() // Show only icon (no text label) ->controlPosition('center') // Align controls: 'left', 'center', 'right' ->hideCameraName() // Hide camera name label ) ``` #### Configuration Options Reference [](#configuration-options-reference) OptionTypeDefaultDescription`fps(int)`1-3010Frames per second for scanning`qrbox(int, ?int)`pixelsnullFocus box dimensions (width, height)`aspectRatio(float)`rationullCamera feed aspect ratio`facingMode(string)`'user'|'environment'nullCamera facing mode`preferBackCamera()`--Alias for `facingMode('environment')``preferFrontCamera()`--Alias for `facingMode('user')``controlButtonStyle(string)`'icon'|'icon-text''icon-text'Switch camera button display style`iconOnly()`--Convenience for `controlButtonStyle('icon')``iconWithText()`--Convenience for `controlButtonStyle('icon-text')``controlPosition(string)`'left'|'center'|'right''left'Controls alignment`showCameraName(bool)`booleantrueShow/hide camera name label`hideCameraName()`--Convenience for `showCameraName(false)`### Standalone Usage (Without Filament) [](#standalone-usage-without-filament) This package can be used outside of Filament panels for custom integrations. #### Livewire Component [](#livewire-component) Use the standalone Livewire component in any Laravel application: ``` // In your Livewire component use CCK\FilamentQrcodeScannerHtml5\Enums\BarcodeFormat; class CheckInPage extends Component { public $scannedValue = null; public function handleScan($value, $formatId) { $this->scannedValue = $value; $format = BarcodeFormat::fromHtml5QrcodeFormat($formatId); // Your custom logic here $this->processCheckIn($value); } public function render() { return view('livewire.check-in-page'); } } ``` ``` {{-- In your blade view --}} @if($scannedValue) Scanned: {{ $scannedValue }} @endif ``` #### Pure Alpine.js Component [](#pure-alpinejs-component) Use the base component without any framework dependencies: ``` function handleScan(detail) { console.log('Scanned value:', detail.value); console.log('Format:', detail.formatName); console.log('Format ID:', detail.formatId); console.log('Timestamp:', detail.timestamp); console.log('Scanner ID:', detail.scannerId); } function handleError(detail) { console.error('Scanner error:', detail.error); console.log('Error type:', detail.errorType); } ``` #### Browser Events [](#browser-events) The Alpine.js component emits these browser events: EventDetail PropertiesDescription`barcode-scanned``value`, `formatId`, `formatName`, `scannerId`, `timestamp`Barcode successfully scanned`barcode-scanner-error``error`, `errorType`, `scannerId`, `timestamp`Scanner error occurred`barcode-scanner-ready``cameraCount`, `currentCamera`, `scannerId`, `timestamp`Scanner initialized`barcode-scanner-stopped``scannerId`, `timestamp`Scanner stoppedError types: `'not_supported'`, `'overconstrained'`, `'permission_denied'`, `'camera_unavailable'`, `'unknown'` Supported Barcode Formats ------------------------- [](#supported-barcode-formats) FormatEnum ValueFormat IDQR Code`BarcodeFormat::QRCode`0Aztec`BarcodeFormat::Aztec`1Codabar`BarcodeFormat::Codabar`2Code 39`BarcodeFormat::Code39`4Code 93`BarcodeFormat::Code93`5Code 128`BarcodeFormat::Code128`6ITF`BarcodeFormat::ITF`8EAN-13`BarcodeFormat::Ean13`9PDF417`BarcodeFormat::Pdf417`10EAN-8`BarcodeFormat::Ean8`11Data Matrix`BarcodeFormat::DataMatrix`12UPC-A`BarcodeFormat::UpcA`14UPC-E`BarcodeFormat::UpcE`15Publishing Views ---------------- [](#publishing-views) If you need to customize the scanner modal view: ``` php artisan vendor:publish --tag=filament-qrcode-scanner-html5-views ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. Security -------- [](#security) If you discover any security-related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [CCK](https://github.com/chengkangzai) - [html5-qrcode](https://github.com/mebjas/html5-qrcode) by Minhaz License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 44 — FairBetter than 92% of packages Maintenance85 Actively maintained with recent releases Popularity21 Limited adoption so far Community6 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~7 days Total 8 Last Release 78d ago Major Versions v1.3.0 → v2.0.0-alpha2026-01-28 PHP version history (2 changes)v1.0.0PHP ^8.1 v2.0.0-alphaPHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/a370741c6674c16bdde48fe05be751779341eea55bf51bd75eb165e146a836fc?d=identicon)[chengkangzai](/maintainers/chengkangzai) --- Top Contributors [![chengkangzai](https://avatars.githubusercontent.com/u/43839286?v=4)](https://github.com/chengkangzai "chengkangzai (22 commits)") --- Tags qrcodelaravelbarcodescannerfilamentcamerahtml5-qrcode ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/chengkangzai-filament-qrcode-scanner-html5/health.svg) ``` [![Health](https://phpackages.com/badges/chengkangzai-filament-qrcode-scanner-html5/health.svg)](https://phpackages.com/packages/chengkangzai-filament-qrcode-scanner-html5) ``` ### Alternatives [jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[aymanalhattami/filament-context-menu context menu (right click menu) for filament 9838.0k](/packages/aymanalhattami-filament-context-menu)[asosick/filament-layout-manager Allow users to create & customize their own FilamentPHP pages composed of Livewire components 5718.8k2](/packages/asosick-filament-layout-manager)[defstudio/filament-searchable-input A searchable autocomplete input for Filament forms 3212.4k](/packages/defstudio-filament-searchable-input)[agencetwogether/hookshelper Simple plugin to toggle display hooks available in current page. 2312.7k](/packages/agencetwogether-hookshelper)[cocosmos/filament-quick-add-select Instantly create and select new options in Filament relationship selects without opening modals 131.3k](/packages/cocosmos-filament-quick-add-select) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)