DarDarBinks/dpu-food-scanner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add torch, use zxing library

Browse Source
This commit is contained in:
Darius
2025-11-22 01:30:01 +01:00
parent dafee157ed
commit c176ed7a8d
1 changed files with 83 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/components/Scanner.astro
View File

@@ -617,21 +617,38 @@ body {
Point the camera at the barcode or QR code
</p>
<button id="stop-scanner-btn" class="btn btn-cancel">
<svg
class="icon-sm"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
Cancel
</button>
<div style="display: flex; gap: 0.5rem;">
<button id="toggle-torch-btn" class="btn btn-green" style="flex: 1;">
<svg
class="icon-sm"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
</svg>
Torch
</button>
<button id="stop-scanner-btn" class="btn btn-cancel" style="flex: 1;">
<svg
class="icon-sm"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
Cancel
</button>
</div>
</div>
<div
@@ -659,15 +676,12 @@ body {
<script>
import type { ProductAnalysis } from "../types";
import { analyzeProduct } from "../utils/productAnalysis";
import { BrowserMultiFormatReader } from "@zxing/library";
declare global {
interface Window {
ZXing: any;
}
}
let codeReader: any = null;
let codeReader: BrowserMultiFormatReader | null = null;
let scanning = false;
let torchEnabled = false;
let videoTrack: MediaStreamTrack | null = null;
// Get DOM elements
const initialView = document.getElementById("initial-view")!;
@@ -891,24 +905,19 @@ body {
async function startScanner() {
try {
if (!window.ZXing) {
showError("Barcode scanner not yet loaded. Please wait...");
return;
}
scanning = true;
barcodeDisplay.style.display = "none";
barcodeDisplay.textContent = "";
showView(scannerView);
codeReader = new window.ZXing.BrowserMultiFormatReader();
codeReader = new BrowserMultiFormatReader();
waitForElement('scanner-video', () => {
codeReader.decodeFromVideoDevice(undefined, 'scanner-video', (result: unknown, err: unknown) => {
codeReader!.decodeFromVideoDevice(undefined, 'scanner-video', (result: { getText: Function }, err: unknown) => {
if (result) {
const code = result.getText();
barcodeDisplay.textContent = code;
barcodeDisplay.style.display = "block";
codeReader.reset();
codeReader!.reset();
searchProduct(code);
}
})
@@ -927,9 +936,50 @@ body {
codeReader.reset();
}
scanning = false;
torchEnabled = false;
videoTrack = null;
showView(initialView);
}
async function toggleTorch() {
try {
if (!videoTrack) {
const videoElement = document.getElementById('scanner-video') as HTMLVideoElement;
if (videoElement && videoElement.srcObject) {
const stream = videoElement.srcObject as MediaStream;
const tracks = stream.getVideoTracks();
if (tracks.length > 0) {
videoTrack = tracks[0];
}
}
}
if (!videoTrack) {
console.error('No video track available');
return;
}
const capabilities = videoTrack.getCapabilities() as any;
if (!capabilities.torch) {
showError('Torch is not supported on this device');
return;
}
torchEnabled = !torchEnabled;
await videoTrack.applyConstraints({
advanced: [{ torch: torchEnabled } as any]
});
const torchBtn = document.getElementById('toggle-torch-btn');
if (torchBtn) {
torchBtn.textContent = torchEnabled ? 'Torch On' : 'Torch Off';
}
} catch (err) {
console.error('Error toggling torch:', err);
showError('Could not toggle torch. Feature may not be supported.');
}
}
// Event listeners
document
.getElementById("start-scanner-btn")!
@@ -937,6 +987,9 @@ body {
document
.getElementById("stop-scanner-btn")!
.addEventListener("click", stopScanner);
document
.getElementById("toggle-torch-btn")!
.addEventListener("click", toggleTorch);
document.getElementById("error-back-btn")!.addEventListener("click", () => {
showView(initialView);
});