Add support for Custom camera labels when not available.

changelog.md

@@ -1,3 +1,22 @@
+### Version 2.2.8
+
+#### Custom camera labels when not available.
+In certain browsers as well as cases like Android Webview it looks like camera
+name is not returned by the browser. In such cases the camera selection has
+empty named options.
+
+To make the UX better, the library will give custom names to the cameras.
+
+-   Github Issue: [Issue#578](https://github.com/mebjas/html5-qrcode/issues/578)
+
+For example in Duck Duck Go browser which has this behavior, it will look like
+this
+
+| Before selection | After selection |
+| --- | --- |
+| ![Screenshot_20221105-005544](https://user-images.githubusercontent.com/3007365/200032567-eb50b4f0-e25f-4bdb-a233-fcbb906122aa.png) | ![Screenshot_20221105-005550](https://user-images.githubusercontent.com/3007365/200032557-21679229-3d21-4212-a22f-1f2558b6f6b6.png) |
+
+
 ### Version 2.2.7
 
 #### Add support for custom CSS

src/html5-qrcode-scanner.ts

@@ -712,9 +712,19 @@ export class Html5QrcodeScanner {
                 = `${selectCameraString} (${cameras.length})  `;
         }
         const options = [];
+        let anonymousCameraId = 1;
         for (const camera of cameras) {
             const value = camera.id;
-            const name = camera.label == null ? value : camera.label;
+            let name = camera.label == null ? value : camera.label;
+            // If no name is returned by the browser, replace it with custom
+            // camera label with a count.
+            if (!name || name === "") {
+                name = [
+                    Html5QrcodeScannerStrings.anonymousCameraPrefix(),
+                    anonymousCameraId++
+                    ].join(" ");
+            }
+
             const option = document.createElement("option");
             option.value = value;
             option.innerText = name;

src/strings.ts

@@ -151,6 +151,11 @@ export class Html5QrcodeScannerStrings {
     public static fileSelectionNoImageSelected(): string {
         return "No image choosen";
     }
+
+    /** Prefix to be given to anonymous cameras. */
+    public static anonymousCameraPrefix(): string {
+        return "Anonymous Camera";
+    }
 }
 
 /** Strings used in {@class LibraryInfoDiv} */