Scanner QR & Streger: Din guide

I en verden, der i stigende grad er digitaliseret, er evnen til hurtigt og effektivt at interagere med information blevet afgørende. QR-koder og stregkoder er blevet almindelige værktøjer til at formidle information øjeblikkeligt, lige fra produktdetaljer på hylderne i supermarkedet til din seneste koncertbillet. Men hvad er en QR-kode og stregkodescanner egentlig, og hvordan kan du udnytte dens potentiale? Denne artikel dykker ned i, hvad disse scannere er, hvordan de fungerer, og hvordan du kan implementere dem i dine egne webapplikationer ved hjælp af det kraftfulde html5-qrcode bibliotek.

Hvad er en QR-kode og Stregkodescanner?

En QR-kode (Quick Response-kode) er en todimensionel matrixkode, der kan lagre forskellige typer data, såsom webadresser, tekst, kontaktoplysninger og meget mere. Stregkoder, derimod, er typisk endimensionelle og bruges primært til at identificere produkter i detailhandlen. En QR-kode og stregkodescanner er en software eller enhed, der kan aflæse og afkode disse koder. I dagens mobile og webbaserede verden refererer dette ofte til softwarebiblioteker, der gør det muligt for webapplikationer at bruge enhedens kamera til at scanne disse koder.

Html5-qrcode er et banebrydende, letvægts og cross-platform HTML5-bibliotek designet til at integrere QR-kode- og stregkodescanningsfunktioner i dine webapplikationer. Det understøtter scanning ved hjælp af enhedens indbyggede webcam eller smartphonekamera, hvilket gør det utroligt alsidigt.

Fordele ved html5-qrcode

• Nem integration: Med kun få linjer kode kan du tilføje robust scanning til din webapp.
• Cross-platform support: Fungerer på tværs af forskellige browsere og enheder, herunder desktops, Android og iOS.
• Fleksibilitet: Tilbyder to API'er: Html5QrcodeScanner for en komplet scanneroplevelse med UI, og Html5Qrcode for fuld kontrol over din egen brugergrænseflade.
• Både QR-koder og Stregkoder: Understøtter nu scanning af en bred vifte af stregkodeformater ud over QR-koder.
• Filscanning: Mulighed for at scanne koder fra lokale filer på enheden, hvilket er nyttigt, når kameraadgang ikke er ideel. Alt sker lokalt, hvilket sikrer brugerens privatliv.

Understøttede Platforme og Formater

Biblioteket er designet med bred kompatibilitet i tankerne. Nedenstående tabel viser den aktuelle understøttelse:

Bemærk: På iOS-versioner før 15.1 kan browsere som Chrome og Firefox opleve begrænsninger i kameraadgang på grund af Webkit-afhængigheder. Der arbejdes løbende på at forbedre dette.

Understøttede Kodeformater

Html5-qrcode, der bygger på Zxing-js biblioteket, understøtter en imponerende række kodeformater:

• QR_CODE
• AZTEC
• CODE_39
• CODE_93
• CODE_128
• ITF
• EAN_13
• EAN_8
• PDF_417
• UPC_A
• UPC_E
• DATA_MATRIX
• MAXICODE*
• RSS_14*
• RSS_EXPANDED*

*Formater markeret med * understøttes muligvis ikke fuldt ud med den eksperimentelle integration af den native BarcodeDetector API.

Sådan Bruger Du html5-qrcode

Nem Tilstand: Med Indbygget Brugergrænseflade (Html5QrcodeScanner)

Dette er den hurtigste måde at få en fungerende scanner på. Du skal blot definere et HTML-element, hvor scanneren skal vises, og derefter initialisere og rendere scanneren.

Eksempel på HTML:

<div id="reader" style="width: 600px;"></div> <script src="https://unpkg.com/html5-qrcode"></script> <script> function onScanSuccess(decodedText, decodedResult) { // Håndter den fundne kode her, f.eks. vis den i konsollen: console.log(`Kode fundet = ${decodedText}`, decodedResult); } function onScanFailure(error) { // Håndter fejl under scanning, ofte bedst at ignorere og fortsætte: console.warn(`Fejl ved kodescanning = ${error}`); } // Initialiser scanneren med ID'et på din div og konfiguration let html5QrcodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, // Frames per second, 10 er et godt udgangspunkt qrbox: { width: 250, height: 250 } // Definerer scanningsområdet }, /* verbose= */ false // Sæt til true for at se detaljerede logs ); // Render scanneren og start scanningen html5QrcodeScanner.render(onScanSuccess, onScanFailure); </script>

Pro Tilstand: Med Din Egen Brugergrænseflade (Html5Qrcode)

Hvis du ønsker fuld kontrol over brugeroplevelsen og brugergrænsefladen, kan du bruge Html5Qrcode klassen direkte. Dette giver dig mulighed for at håndtere kameraadgang, tilladelser og scanning på din egen måde.

Start Scanning med Kamera

For at starte scanning med kameraet skal du først finde de tilgængelige kameraer på enheden.

// Hent en liste over tilgængelige kameraer Html5Qrcode.getCameras() .then(devices => { // devices er et array af objekter som { id: "id", label: "label" } if (devices && devices.length) { var cameraId = devices[0].id; // Brug det første kamera som standard // Nu kan du starte scanningen med cameraId const html5QrCode = new Html5Qrcode("reader"); html5QrCode.start( cameraId, // Eller et specifikt kamera ID { // Konfigurationsindstillinger fps: 10, qrbox: { width: 250, height: 250 } }, (decodedText, decodedResult) => { // Succes callback console.log(`Kode fundet: ${decodedText}`); }, (errorMessage) => { // Fejl callback console.warn(`Fejl ved scanning: ${errorMessage}`); } ) .catch(err => { // Håndter fejl ved start af scanning console.error("Kunne ikke starte scanneren:", err); }); } }) .catch(err => { // Håndter fejl ved hentning af kameraer console.error("Kunne ikke hente kameraer:", err); });

Vigtigt: Adgang til kameraet kræver brugerens samtykke og at din hjemmeside kører over en sikker forbindelse (HTTPS).

Brug af Kamera Uden Specifikt ID (Mobile Enheder)

På mobile enheder kan du lade brugeren vælge mellem front- eller bagkameraet ved at angive `facingMode` i start-metoden:

const html5QrCode = new Html5Qrcode("reader"); const qrCodeSuccessCallback = (decodedText, decodedResult) => { /* Håndter succes */ }; const config = { fps: 10, qrbox: { width: 250, height: 250 } }; // Foretrækker frontkameraet html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback); // Foretrækker bagkameraet html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

Stop Scanning

Når du er færdig med at scanne, er det vigtigt at stoppe kamerafeedet korrekt:

html5QrCode.stop() .then(_ => { // Scanning er stoppet. console.log("Scanner stoppet."); }) .catch(err => { // Håndter fejl ved stop af scanning console.error("Kunne ikke stoppe scanneren:", err); });

Scanning fra Lokale Filer

Du kan også implementere scanning af billedfiler:

Eksempel på HTML:

<input type="file" id="qr-input-file" accept="image/*" capture></input>

Eksempel på JavaScript:

const html5QrCode = new Html5Qrcode("reader"); const fileinput = document.getElementById('qr-input-file'); fileinput.addEventListener('change', e => { if (e.target.files.length === 0) { return; // Ingen fil valgt } const imageFile = e.target.files[0]; // Scan filen html5QrCode.scanFile(imageFile, true) // true for at vise billedet .then(decodedText => { console.log(`Fil fundet: ${decodedText}`); }) .catch(err => { console.log(`Fejl ved scanning af fil: ${err}`); }); });

Bemærk: Kamera-baseret scanning og fil-baseret scanning er i øjeblikket gensidigt udelukkende. Du skal kalde html5QrCode.clear() for at skifte mellem dem.

Konfigurationsmuligheder

Du kan finjustere scannerens adfærd med forskellige konfigurationsindstillinger:

Ofte Stillede Spørgsmål

Hvad hvis kameraet ikke virker?

Sørg for, at din hjemmeside kører over HTTPS, og at brugeren har givet tilladelse til kameraadgang. Tjek også browserens tilladelsesindstillinger.

Kan jeg scanne stregkoder ud over QR-koder?

Ja, biblioteket understøtter en række forskellige stregkodeformater, herunder EAN, UPC, Code 128 og mange flere.

Hvordan bygger jeg biblioteket selv?

Du kan foretage kodeændringer i `/src`-mappen. Kør derefter npm install for at installere afhængigheder og npm run-script build for at bygge JavaScript-outputtet til `/dist/html5-qrcode.min.js`.

Hvordan bidrager jeg til projektet?

Du kan bidrage ved at rapportere fejl, foreslå nye funktioner, sende pull requests med kodeændringer eller skrive enhedstests. Projektet er åbent og værdsætter bidrag fra fællesskabet.

Konklusion

Med html5-qrcode biblioteket har du et kraftfuldt og fleksibelt værktøj til at integrere QR-kode- og stregkodescanningsfunktionalitet i dine webapplikationer. Uanset om du har brug for en simpel, komplet scanner eller fuld kontrol over brugergrænsefladen, tilbyder dette bibliotek løsningen. Fra nem integration til bred platform- og formatunderstøttelse er html5-qrcode et must-have for enhver moderne webudvikler, der ønsker at udnytte kraften i visuel scanning.

Hvis du vil læse andre artikler, der ligner Scanner QR & Streger: Din guide, kan du besøge kategorien Teknologi.