[mobile] Camera to Barcode

[lauty95]

Resolves

#293

Dependency

I chose to use the html5-qrcode dependency based on its download count and documentation quality.
I also reviewed vue-barcode-reader and @zxing/browser. The first one has only ~5k downloads compared to html5-qrcode's ~248k, and it does not seem to have the same level of support.
@zxing/browser could also be a good alternative, but I decided to proceed with html5-qrcode.

How to test

To access the device camera, the app must be served over HTTPS. For this reason, I used ngrok (I believe we used it before): https://dashboard.ngrok.com/get-started/setup/windows

Once ngrok is installed, open a new terminal and run: ngrok http 8000 (in my case I used port 8004)

Demo

For now, I only implemented the camera on the Move page.

On my computer, I do not have a camera installed, so the button to open the camera does not appear:

On my phone:

Live Demo

Screen_Recording_20251114_134313_Chrome.mp4

[github-actions]

Coverage Report

File	Stmts	Miss	Cover	Missing
__init__.py	1	0	100%
beam
barcodes.py	107	39	63%	21, 30, 36–37, 43, 46, 58, 80–81, 83–84, 90–92, 94–96, 103–105, 111, 121, 129, 136, 139–140, 146–147, 153, 159, 165, 171, 183, 186–189, 191–192
handling_unit.py	81	36	55%	32, 64–66, 84, 95–96, 102–103, 105–106, 108–109, 111–112, 114, 116–119, 121–123, 125, 127, 129–130, 135, 137, 141, 143–144, 147, 149–150, 158
printing.py	93	55	40%	18–19, 48, 50–53, 62–66, 70–71, 83–87, 91, 97, 106–112, 114–115, 117, 122, 124–125, 140–145, 147–153, 160–163, 165–168
zpl_layout.py	244	244	0%	12–15, 17, 20, 36, 47–48, 51–52, 54–55, 58, 61, 64–67, 69–71, 77, 81–83, 86–87, 90–91, 93–94, 99, 101, 110–111, 113, 115, 118–120, 122–125, 128–129, 132, 140–141, 144–146, 154, 157, 161, 164, 167, 177–183, 185, 188, 193–196, 198, 201–206, 209–215, 217, 219, 222, 224–227, 231–233, 235–239, 241–245, 249–253, 258, 260, 263–269, 278–282, 285–292, 295–308, 311–313, 316–328, 331, 334–336, 339–353, 356–361, 364, 366, 369, 384, 386–387, 390–391, 393, 395, 397–399, 402, 411, 418–420, 423–424, 427, 429–433, 436, 439–442, 445–448, 451–453, 469, 471, 474–475, 496–501, 505, 507–508, 516–521
beam/demand
demand.py	338	32	90%	51, 66, 243, 463–464, 493, 543, 621, 625, 662, 667, 674, 695–696, 707, 713–729
receiving.py	125	17	86%	79, 131, 173, 214, 244, 249–260
sqlite.py	60	1	98%	41
utils.py	59	6	89%	56, 67, 73–75, 83
beam/doctype/beam_mobile_route
beam_mobile_route.py	3	0	100%
beam/doctype/beam_settings
beam_settings.py	34	17	50%	35–37, 40–41, 43, 50, 55–58, 66–68, 72–74
beam/doctype/handling_unit
__init__.py	9	3	66%	12–14
handling_unit.py	17	1	94%	27
beam/doctype/warehouse_types
warehouse_types.py	3	0	100%
beam/overrides
network_printer_settings.py	40	32	20%	14–18, 24–34, 42–46, 49, 52–55, 57–62
sales_order.py	10	6	40%	11–16
stock_entry.py	91	16	82%	115–116, 121–128, 134–135, 151, 183, 186–187
work_order.py	10	2	80%	14, 16
beam/report/demand_map
demand_map.py	35	35	0%	4–5, 7–8, 11–12, 15–16, 103–111, 127, 129–143, 146–147
beam/report/handling_unit_traceability
handling_unit_traceability.py	44	44	0%	4–6, 9–11, 30–32, 34–35, 37–38, 41–42, 45–46, 48–49, 51–52, 54–55, 57, 63–65, 67–69, 71, 74–77, 79–81, 83–86, 89–90
beam/scan
__init__.py	191	27	85%	24, 34, 161–162, 172, 174–175, 179, 183–184, 187, 193, 204–205, 209, 230, 234, 263, 265, 284–285, 291, 294, 297, 406, 414, 421
config.py	28	28	0%	4, 6, 9–17, 19–21, 23–26, 28–30, 32–35, 38–39, 41
user_login.py	31	31	0%	4–6, 8, 11–13, 17–19, 21–22, 24–25, 27–29, 31–33, 35–38, 40–45, 47
www/beam
__init__.py	14	14	0%	4–7, 10–19
index.py	7	7	0%	4, 6, 9–13
TOTAL	1675	693	58%

[agritheory]

@lauty95 How can we add tests for this? Does Playwright offer a way to mock the camera?

[lauty95]

@agritheory

Playwright offers a way to mock the browser's navigator.mediaDevices APIs, so:

I added tests for:

• Camera button visibility based on camera availability (enumerateDevices mock)
• Camera activation when the button is clicked (getUserMedia called)
• Permission-denied error handling
• Component behavior and UI state changes

What I haven’t found a way to test with Playwright:

• Actual barcode/QR code detection by the html5-qrcode library
• Video processing and frame analysis
• Real camera hardware functionality

What I tried but didn't work:

• Pre-recorded videos with QR codes - Failed to load Blob URLs in headless browser
• Canvas streams from static images - html5-qrcode didn't detect codes from canvas streams

[agritheory]

@lauty Getting an error on when I try to navigate to a PO/PR.

Update: this is a fixturing issue. The employee users that are fixtured don't have the "Purchase User" Role.

[github-actions]

Draft Changelog Entry

Changelog Entry

Camera barcode scanning functionality has been added to the Move page. When a device with a camera is used, a button appears that allows the camera to be activated for scanning barcodes. The camera scanner automatically detects when a device does not have a camera available and hides the button accordingly. This feature is currently available on the Move page.

This changelog entry was automatically generated by the Changelog Generator Action.