Device label (human-readable name for the camera device) is empty string in android app webview

[aminurrashid]

Describe the bug
I'm developing an android app, which has a webview in it. When loading the qr scanning demo page (https://blog.minhazav.dev/research/html5-qrcode.html) or a page that implemented the html5-qrcode library, device label (human-readable name for the camera device) is empty string.

sample:
id: "4c2c562185edeff69ceb28984aec24160b359fc3567422065818a41e4070f60c"
label: ""

To Reproduce
Steps to reproduce the behavior:

1. Load https://blog.minhazav.dev/research/html5-qrcode.html in android webview
2. Click "Select Camera" drop down list.

Expected behavior
Device names (camera) should be shown in drop down list.

Smartphone

• Device: Nexus 6P
• OS: android 8.1.0

[sensationpanda]

the same problem, some Android phone has many cameras

[mebjas]

@sensationpanda There is a way to handle this if you want to build for smartphones - with latest version you can use the facing mode instead of the cameraId + label

const html5QrCode = new Html5Qrcode("#reader");
const qrCodeSuccessCallback = message => { /* handle success */ }
const config = { fps: 10, qrbox: 250 };

// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

// If you want to prefer back camera
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

// Select front camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

// Select back camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

This is a demo for that - https://blog.minhazav.dev/research/h5q-direct, this might be helpful for the webview related issue as well. Can you check if this helps?

[mebjas]

This is documented in the main readme - https://github.com/mebjas/html5-qrcode/blob/master/README.md#scanning-without-cameraid