A high-performance, responsive Web Block to scan 1D & 2D barcodes (QR Code, EAN-13, CODE-128, DataMatrix, etc.) using webcams with auto-stop protection, built-in camera switching, and flexible control options.

🌟 Key Features

• ⚡ Native Browser Scanning: Powered by html5-qrcode — zero native mobile plugins or extra app builds required.
• 🛑 Single-Scan Auto-Stop Protection: Automatically stops the camera stream immediately on success or error to prevent duplicate rapid scans and save battery.
• 📱 Cross-Platform: 100% compatible with Reactive Web, Progressive Web Apps (PWA), and Native Mobile Shells (iOS & Android).
• 🔄 Built-in Camera Switcher (ShowCameraSwitch): Optional UI button to switch seamlessly between front (selfie) and back (environment) cameras.
• ⏯️ Manual & Auto Controls (ShowStart_StopButtons): Configure hands-free auto-scanning on load or display built-in Start/Stop UI control buttons.
• 📦 Wide Barcode Support: Reads QR Code, EAN-13, EAN-8, CODE-39, CODE-128, UPC-A, UPC-E, DataMatrix, and PDF417.
• 🎨 Customizable Viewfinder: Configurable scan box dimensions (QrBoxWidth, QrBoxHeight), framerate (Fps), and extended CSS classes.
• 📢 Reactive Event Handlers: Returns decoded value, format name, and error messages via native OutSystems block events.

💻 Framework Compatibility

📖 User Manual & Technical Reference

1. Block Specification

📥 Input Parameters

📤 Block Events

⚙️ Block-Level Public Client Actions

Parent screens can invoke these public actions directly on the block instance widget reference (e.g. MyScannerBlock.StartScanner):

2. Integration & Usage Patterns

Pattern A: Single Code Scan (Default / Hands-Free)

Ideal for lookup forms, search inputs, or product detail pages.

1. Drag QRAndBarcodeScanner onto your Reactive Screen.
2. Set AutoStart = True.
3. In the OnScanSuccess event handler:
   • Assign SearchVariable = DecodedText.
   • Execute your search query or navigate to the target page. (The camera automatically stops as soon as the code is read).

Pattern B: Continuous Multi-Item Scanning (Inventory / Shopping Cart)

Ideal for scanning multiple items sequentially without re-opening screens.

1. Drag QRAndBarcodeScanner onto your screen and name the block widget ScannerWidget.
2. In the OnScanSuccess event handler:
   • Add DecodedText to your items list or database.
   • Call ScannerWidget.StartScanner to instantly restart the camera for the next item!

Pattern C: Manual User Control

Ideal when users scan occasionally and you want to conserve device battery.

1. Drag QRAndBarcodeScanner onto your screen.
2. Set AutoStart = False.
3. Set ShowStart_StopButtons = True.
4. Set ShowCameraSwitch = True.
5. Users can now click Start Scanner, switch cameras if needed, scan, and click Stop Scanner whenever they choose.

Pattern D: Parent Screen Button Controls

Ideal when you want custom action buttons outside the block on your screen.

1. Drag QRAndBarcodeScanner onto your screen and set its Name to MyScanner.
2. Set ShowStart_StopButtons = False.
3. Add a custom button on your Parent Screen labeled "Scan Barcode".
4. In the button's On Click action flow, call MyScanner.StartScanner.

🔍 Troubleshooting & FAQ

Q: Why does the scanner show a black box or permission error on HTTP?

A: Web browsers restrict camera access (getUserMedia) exclusively to Secure Contexts (HTTPS) or localhost. Ensure your deployment environment has a valid SSL certificate.

Q: How do I prevent rapid duplicate scans?

A: Duplicate scans are automatically prevented! The component automatically invokes StopScanner immediately when OnScanSuccess fires.

Q: How do parent screens trigger StartScanner or SwitchCamera?

A: Because these actions are Public Block-Level Client Actions, simply give your Block widget a name on your screen canvas (e.g. MyScanner) and invoke MyScanner.StartScanner or MyScanner.SwitchCamera from any screen action!

📄 License & Contribution

• Distributed under the MIT License. Free for commercial and non-commercial use in all OutSystems applications.