Implement switching cameras

Also, use session storage to remember last selected camera deviceId, if any
This commit is contained in:
Vivianne Langdon 2022-02-26 21:32:01 -08:00
parent fee6ffcbd8
commit 464050deaa

View file

@ -645,8 +645,7 @@ let BookWyrm = new (class {
const cameraListNode = document.getElementById("barcode-camera-list");
let changeListener = cameraListNode.addEventListener('change', (event) => {
// TODO
//event.target.value
initBarcodes(event.target.value);
});
function toggleStatus(status) {
@ -655,6 +654,71 @@ let BookWyrm = new (class {
}
}
function initBarcodes(cameraId = null) {
if (!cameraId) {
cameraId = sessionStorage.getItem('preferredCam');
} else {
sessionStorage.setItem('preferredCam', cameraId);
}
scannerNode.replaceChildren();
Quagga.stop();
Quagga.init({
inputStream : {
name: "Live",
type: "LiveStream",
target: scannerNode,
constraints: {
facingMode: "environment",
deviceId: cameraId,
},
},
decoder : {
readers: [
"ean_reader",
{
format: "ean_reader",
config: {
supplements: [ "ean_2_reader", "ean_5_reader" ]
}
}
],
multiple: false
},
}, (err) => {
if (err) {
console.log(err);
toggleStatus('access-denied');
return;
}
let activeId = null;
const track = Quagga.CameraAccess.getActiveTrack();
if (track) {
activeId = track.getSettings().deviceId;
}
Quagga.CameraAccess.enumerateVideoDevices().then((devices) => {
cameraListNode.replaceChildren();
for (const device of devices) {
const child = document.createElement('option');
child.value = device.deviceId;
child.innerText = device.label.slice(0, 30);
if (activeId === child.value) {
child.selected = true;
}
cameraListNode.appendChild(child);
}
});
toggleStatus('scanning');
Quagga.start();
});
}
function cleanup(clearDrawing = true) {
Quagga.stop();
cameraListNode.removeEventListener('change', changeListener);
@ -709,55 +773,6 @@ let BookWyrm = new (class {
event.target.addEventListener('close', cleanup, { once: true });
toggleStatus('grant-access');
// Clear camera list
cameraListNode.replaceChildren();
Quagga.init({
inputStream : {
name: "Live",
type: "LiveStream",
target: scannerNode,
constraints: {
facingMode: "environment",
},
},
decoder : {
readers: [
"ean_reader",
{
format: "ean_reader",
config: {
supplements: [ "ean_2_reader", "ean_5_reader" ]
}
}
],
multiple: false
},
}, (err) => {
if (err) {
console.log(err);
toggleStatus('access-denied');
return;
}
const stream = Quagga.CameraAccess.getActiveStreamLabel();
Quagga.CameraAccess.enumerateVideoDevices().then((devices) => {
for (const device of devices) {
const child = document.createElement('option');
child.value = device.deviceId || device.id;
child.innerText = device.label.slice(0, 30);
if (stream === child.value) {
child.selected = true;
}
cameraListNode.appendChild(child);
}
});
Quagga.start();
toggleStatus('scanning');
});
initBarcodes();
}
})();