This commit is contained in:
Vivianne Langdon 2022-02-27 14:01:25 -08:00
parent 789626a9da
commit fbe7e860e8

View file

@ -431,11 +431,11 @@ let BookWyrm = new (class {
}); });
modalElement.addEventListener("keydown", handleFocusTrap); modalElement.addEventListener("keydown", handleFocusTrap);
modalElement.dispatchEvent(new Event('open')); modalElement.dispatchEvent(new Event("open"));
} }
function handleModalClose(modalElement) { function handleModalClose(modalElement) {
modalElement.dispatchEvent(new Event('close')); modalElement.dispatchEvent(new Event("close"));
modalElement.removeEventListener("keydown", handleFocusTrap); modalElement.removeEventListener("keydown", handleFocusTrap);
htmlElement.classList.remove("is-clipped"); htmlElement.classList.remove("is-clipped");
modalElement.classList.remove("is-active"); modalElement.classList.remove("is-active");
@ -644,10 +644,10 @@ let BookWyrm = new (class {
const statusNode = document.getElementById("barcode-status"); const statusNode = document.getElementById("barcode-status");
const cameraListNode = document.querySelector("#barcode-camera-list > select"); const cameraListNode = document.querySelector("#barcode-camera-list > select");
cameraListNode.addEventListener('change', onChangeCamera); cameraListNode.addEventListener("change", onChangeCamera);
function onChangeCamera(event) { function onChangeCamera(event) {
initBarcodes(event.target.value); initBarcodes(event.target.value);
} }
function toggleStatus(status) { function toggleStatus(status) {
@ -657,76 +657,79 @@ let BookWyrm = new (class {
} }
function initBarcodes(cameraId = null) { function initBarcodes(cameraId = null) {
toggleStatus('grant-access'); toggleStatus("grant-access");
if (!cameraId) { if (!cameraId) {
cameraId = sessionStorage.getItem('preferredCam'); cameraId = sessionStorage.getItem("preferredCam");
} else { } else {
sessionStorage.setItem('preferredCam', cameraId); sessionStorage.setItem("preferredCam", cameraId);
} }
scannerNode.replaceChildren(); scannerNode.replaceChildren();
Quagga.stop(); Quagga.stop();
Quagga.init({ Quagga.init(
inputStream : { {
name: "Live", inputStream: {
type: "LiveStream", name: "Live",
target: scannerNode, type: "LiveStream",
constraints: { target: scannerNode,
facingMode: "environment", constraints: {
deviceId: cameraId, facingMode: "environment",
deviceId: cameraId,
},
},
decoder: {
readers: [
"ean_reader",
{
format: "ean_reader",
config: {
supplements: ["ean_2_reader", "ean_5_reader"],
},
},
],
multiple: false,
}, },
}, },
decoder : { (err) => {
readers: [ if (err) {
"ean_reader", scannerNode.replaceChildren();
{ console.log(err);
format: "ean_reader", toggleStatus("access-denied");
config: { return;
supplements: [ "ean_2_reader", "ean_5_reader" ]
}
}
],
multiple: false
},
}, (err) => {
if (err) {
scannerNode.replaceChildren();
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'); let activeId = null;
Quagga.start(); 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) { function cleanup(clearDrawing = true) {
Quagga.stop(); Quagga.stop();
cameraListNode.removeEventListener('change', onChangeCamera); cameraListNode.removeEventListener("change", onChangeCamera);
if (clearDrawing) { if (clearDrawing) {
scannerNode.replaceChildren(); scannerNode.replaceChildren();
@ -739,18 +742,34 @@ let BookWyrm = new (class {
if (result) { if (result) {
if (result.boxes) { if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height"))); drawingCtx.clearRect(
result.boxes.filter((box) => box !== result.box).forEach((box) => { 0,
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2}); 0,
}); parseInt(drawingCanvas.getAttribute("width")),
parseInt(drawingCanvas.getAttribute("height"))
);
result.boxes
.filter((box) => box !== result.box)
.forEach((box) => {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, {
color: "green",
lineWidth: 2,
});
});
} }
if (result.box) { if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2}); Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, {
color: "#00F",
lineWidth: 2,
});
} }
if (result.codeResult && result.codeResult.code) { if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3}); Quagga.ImageDebug.drawPath(result.line, { x: "x", y: "y" }, drawingCtx, {
color: "red",
lineWidth: 3,
});
} }
} }
}); });
@ -769,17 +788,17 @@ let BookWyrm = new (class {
const code = result.codeResult.code; const code = result.codeResult.code;
statusNode.querySelector('.isbn').innerText = code; statusNode.querySelector(".isbn").innerText = code;
toggleStatus('found'); toggleStatus("found");
const search = new URL('/search', document.location); const search = new URL("/search", document.location);
search.searchParams.set('q', code); search.searchParams.set("q", code);
cleanup(false); cleanup(false);
location.assign(search); location.assign(search);
}); });
event.target.addEventListener('close', cleanup, { once: true }); event.target.addEventListener("close", cleanup, { once: true });
initBarcodes(); initBarcodes();
} }