From 245bdbe6e8db1a186ebc0e5e26636acf6a86ee7e Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Sun, 12 Jan 2025 19:21:40 +0100
Subject: [PATCH] Optimized camera display/selection in barcodescanner.js

---
 public/viewjs/components/barcodescanner.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/viewjs/components/barcodescanner.js b/public/viewjs/components/barcodescanner.js
index c8c887f1..e3fa9ad3 100644
--- a/public/viewjs/components/barcodescanner.js
+++ b/public/viewjs/components/barcodescanner.js
@@ -15,7 +15,8 @@ Grocy.Components.BarcodeScanner.CheckCapabilities = async function()
 	var cameraSelect = document.querySelector('.cameraSelect-wrapper');
 	if (cameraSelect)
 	{
-		cameraSelect.style.display = cameras.length > 1 ? 'inline-block' : 'none';
+		// Ignore devices without any name
+		cameraSelect.style.display = cameras.filter(x => x.label || x.deviceId).length > 1 ? 'inline-block' : 'none';
 	}
 
 	// Check if the camera is capable to turn on a torch.
@@ -254,16 +255,19 @@ $(document).on("click", "#barcodescanner-start-button", async function(e)
 	});
 
 	// Add camera select to existing dialog
-	dialog.find('.bootbox-body').append('<div class="form-group py-0 my-1 cameraSelect-wrapper"><select class="custom-control custom-select cameraSelect"><select class="custom-control custom-select cameraSelect" style="display: none"></select></div>');
+	dialog.find('.bootbox-body').append('<div class="form-group py-0 my-1 d-block cameraSelect-wrapper"><select class="custom-control custom-select cameraSelect"><select class="custom-control custom-select cameraSelect" style="display: none"></select></div>');
 	var cameraSelect = document.querySelector('.cameraSelect');
 
 	var cameras = await Quagga.CameraAccess.enumerateVideoDevices();
 	cameras.forEach(camera =>
 	{
 		var option = document.createElement("option");
-		option.text = camera.label ? camera.label : camera.deviceId; // Use camera label if it exists, else show device id
-		option.value = camera.deviceId;
-		cameraSelect.appendChild(option);
+		if (camera.label || camera.deviceId) // Ignore devices without any name
+		{
+			option.text = camera.label ? camera.label : camera.deviceId; // Use camera label if it exists, else show device id
+			option.value = camera.deviceId;
+			cameraSelect.appendChild(option);
+		}
 	});
 
 	// Set initial value to preferred camera if one exists - and if not, start out empty