Optimized camera display/selection in barcodescanner.js

This commit is contained in:
Bernd Bestel
2025-01-12 19:21:40 +01:00
parent 4a674e3bfa
commit 245bdbe6e8

View File

@@ -15,7 +15,8 @@ Grocy.Components.BarcodeScanner.CheckCapabilities = async function()
var cameraSelect = document.querySelector('.cameraSelect-wrapper'); var cameraSelect = document.querySelector('.cameraSelect-wrapper');
if (cameraSelect) 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. // 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 // 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 cameraSelect = document.querySelector('.cameraSelect');
var cameras = await Quagga.CameraAccess.enumerateVideoDevices(); var cameras = await Quagga.CameraAccess.enumerateVideoDevices();
cameras.forEach(camera => cameras.forEach(camera =>
{ {
var option = document.createElement("option"); var option = document.createElement("option");
option.text = camera.label ? camera.label : camera.deviceId; // Use camera label if it exists, else show device id if (camera.label || camera.deviceId) // Ignore devices without any name
option.value = camera.deviceId; {
cameraSelect.appendChild(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);
}
}); });
// Set initial value to preferred camera if one exists - and if not, start out empty // Set initial value to preferred camera if one exists - and if not, start out empty