[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	79	34	56%	20, 22, 24, 27, 38–39, 41–42, 47–48, 50–51, 53–55, 61, 71, 79, 86, 89–90, 96–97, 103, 109, 115, 121, 128, 131–134, 136–137
handling_unit.py	81	37	54%	26, 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	82	64	21%	18–19, 32–43, 45–48, 57–61, 65–66, 68–69, 78–82, 85–86, 92–94, 101–102, 104–106, 108–109, 111, 116, 118–119, 134–139, 141–150
beam/demand
demand.py	338	44	86%	51, 66, 123, 209, 243, 463–464, 483–485, 490–491, 493, 495–497, 499, 504, 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	59	1	98%	40
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	28	17	39%	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	15	0	100%
beam/doctype/warehouse_types
warehouse_types.py	3	0	100%
beam/overrides
sales_order.py	10	6	40%	11–16
stock_entry.py	80	17	78%	80–81, 86–93, 99–100, 116, 131, 148, 151–152
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	143	26	81%	21, 25, 31, 39, 71, 118–119, 129, 131–132, 136, 140–141, 144, 155–156, 160, 181, 185, 214, 216, 235–236, 242, 245, 248
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	1284	433	66%

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