QR -koder har blivit mycket mer populära de senaste åren. De används ofta för att leverera information och underlätta incheckningar. Även om det oftast förekommer som en del av inbyggda mobilappar, kan du också integrera QR -skanningar på dina webbplatser.
Så här använder du det populära jsQR-biblioteket i kombination med webbarbetare för att erbjuda en högpresterande QR-skanningsupplevelse på webben. Vi antar att du redan är bekant med grunderna i JavaScript och att du har en fungerande webbplats som du är redo att lägga till din kod till.
1. Komma igång
Börja med att ladda ner jsQR-biblioteket i förkompilerat distribuerbart format. Se till att det är offentligt tillgängligt på din webbserver; i den här artikeln antar vi att webbadressen är /jsQR.js. jsQR är också tillgängligt som ett npm -paket om du har en byggrutin konfigurerad.
Detta paket ger realtidsdetektering av QR-koder som syns i en videoström. Den hämtar data i koden och levererar den till din applikation.
2. Skaffa ett kameraflöde
Nästa steg är att skaffa en MediaStream från webbläsaren. Använd mediaDevices API för att få en ny ström från användarens kamera:
const getCamera = async ( ) = & gt; { & nbsp; om (! navigator.mediaDevices ) { kasta nytt Fel ( & quot; mediaDevices API otillgängligt. & quot; ) ;; } & nbsp; const -enheter = väntar på navigator.mediaDevices.enumerateDevices ( ) ;; const -kameror = enheter.filter ( d = & gt; ( d.kind === & quot; videoinput & quot; ) ) ;; returkameror [ 0 ] ;; & nbsp; } ;; Annons
Vi väljer den första kameran som hittas. Du kan lägga till extra logik för att möjliggöra val av en specifik kamera som anges av användaren. I en riktig app bör du också förbättra felhanteringen när mediaDevices API inte är tillgängligt. Det kan bero på att användaren är i en gammal webbläsare eller att de permanent har blockerat kamerans åtkomstbehörighet.
Använd funktionen getCamera () för att hämta videoströmmen. Koppla strömmen till en & lt; video & gt; element så att det kan spelas upp och visas för användaren:
& lt; video autoplay = & quot; true & quot; id = & quot; video & quot; dämpad = & quot; true & quot; /& gt; const stream = invänta getCamera ( ) ;; const video = document.getElementById ( & quot; video & quot; ) ;; & nbsp; video.srcObject = ström; vänta på video.play ( ) ;;
3. Skapa en Canvas
Nästa steg är att skapa ett canvas -element. Videodata kommer att strömmas från kameran till duken där bildpixlarna extraheras och matas till jsQR. Duken måste vara dimensionerad för att matcha måtten på videoströmmen.
const videoTracks = invänta stream.getVideoTracks ( ) ;; const videoTrackSettings = videoTracks [ 0 ] .getSettings ( ) ;; & nbsp; const canvas = document.createElement ( & quot; canvas & quot; ) ;; canvas.height = videoTrackSettings.height; canvas.width = videoTrackSettings.width; & nbsp; const canvasContext = canvas.getContext ( & quot; 2d & quot; ) ;;
Canvas-sammanhanget kommer att användas i nästa steg för att rita varje bildruta i videoströmmen till duken.
4. Lägger till jsQR
Lägg till jsQR i din kod nästa. Genom att köra jsQR i en webbarbetare kan webbläsaren delegera den till en bakgrundsprocess, vilket förbättrar prestandan. jsQR måste skanna varje videoram så att körning i din huvudsakliga JavaScript-tråd kan medföra allvarliga avmattningar på avancerade enheter.
Huvudtråden och din webbarbetare kan kommunicera med hjälp av meddelanden. Din huvudtråd meddelar jsQR -arbetaren varje gång en ny videoram är tillgänglig. Arbetaren kommer att inspektera ramen för QR -koder i sin bakgrundstråd och sedan skicka ett meddelande till huvudtråden när ramen har bearbetats.
Annons
Ladda din arbetare i din huvudsakliga JavaScript -kod och lägg till en meddelande lyssnare:
const qrWorker = new Worker ( & quot; /qr-worker.js" ) ;; & nbsp; qrWorker.addEventListener ( & quot; meddelande & quot ;, ( { data } ) = & gt; { & nbsp; om ( data ) { //Data från QR -kod tillgänglig ////Hantera en lyckad genomsökning här. } annars { //Ingen QR -kod har upptäckts i den här ramen ////Mata nästa ram till QR -arbetaren //nu (den här koden introduceras nedan). bocka ( ) ;; } & nbsp; } ) ;;
Lägg sedan till qr-worker.js i ditt projekt. Detta måste vara offentligt tillgängligt på URL: en som ges till Worker -konstruktören. Webbläsare laddar ner webbarbetaren vid den tidpunkt det behövs.
importScripts ( & quot; jsQR.js & quot; ) ;; & nbsp; self.addEventListener ( & quot; meddelande & quot ;, e = & gt; { const { data, bredd, höjd } = e.data; const qrData = jsQR ( data, bredd, höjd ) ;; self.postMessage ( qrData ) ;; } ) ;;
Funktionen importScripts () hämtar jsQR -biblioteket. Detta samtal motsvarar ett & lt; script & gt; -taggen i din HTML -kod men gör skriptets innehåll tillgängligt för din webbarbetare.
En meddelandelysare läggs till för att ta emot händelser från din JavaScript -huvudtråd. Varje händelse måste innehålla data, bredd och höjd för en videoram som strömmas från kameran. Dessa värden matas till jsQR som försöker upptäcka en QR -kod inom ramen. Resultatet läggs tillbaka till huvudtråden.
5. Ansluta allt
Det sista steget är att skapa en uppdateringsslinga som matar videoramar till jsQR -arbetaren regelbundet.
const updateJsQr = ( ) = & gt; { canvasContext.drawImage ( video, 0, 0, canvas.width, canvas.height ) ;; const imageData = canvasContext.getImageData ( 0, 0, canvas.width, canvas.height ) ;; qrWorker.postMessage ( { data: imageData, höjd: canvas.höjd, bredd: canvas.width } ) ;; } & nbsp; const tick = ( ) = & gt; requestAnimationFrame ( updateJsQr ) ;; & nbsp; bocka ( ) ;;
Kryssfunktionen () begär att webbläsaren allokerar tid för att ringa updateJsQr () innan nästa ommålning. Denna funktion hämtar den aktuella videoramen, drar den till duken och drar sedan ut bilddata som är redo att överföras till jsQR. PostMessage () -metoden på arbetarinstansen skickar faktiskt data.
Annonsering
Arbetaren kommer sedan att agera utifrån data som visas i koden ovan. Detekteringsresultatet kommuniceras tillbaka till huvudtråden som bearbetar den enligt steg 4. När en QR -kod detekteras bör din applikation använda den hämtade informationen för att gå vidare i flödet. När det inte finns någon kod upptäcks kryss () igen för att skicka nästa bild till QR -arbetaren, redo för bedömning.
Denna mekanism säkerställer att du inte kommer att överbelasta webbläsaren genom att köra flera bilddetekteringar samtidigt. Varje samtal till jsQR () är potentiellt dyrt så du vill vänta tills resultatet är känt innan du planerar ett annat. Slingan upprätthålls bara tills ett framgångsrikt resultat erhålls, med jsQR som hanterar en bild i taget. Webbplatsens användargränssnitt och dess förhandsgranskning i realtid kommer att vara lyhörda hela tiden eftersom arbetaren körs oberoende i bakgrunden.
6. jsQR -resultatdata
Varje lyckat samtal till jsQR () returnerar ett resultatobjekt med följande egenskaper:
- data – Strängdata extraherad från QR -koden (detta är den enda egenskapen som används i exemplet ovan).
- binaryData – En Uint8ClampedArray som innehåller de råa byte som läses från QR -koden.
- version – Upptäckt QR -kodversion.
- plats – Ett objekt som beskriver positionen för den upptäckta QR -koden i videoramen, inklusive punkter för varje hörn.
Ingen data är tillgänglig när jsQR misslyckas med att upptäcka en kod i den tillhandahållna bilden. < /p>
7. Slutsats
Genom att kombinera jsQR med webbarbetare kan du implementera högpresterande QR -kodsökningar i din webbapplikation. QR -koder är en enkel och praktisk datadelningsmekanism som de flesta mobilanvändare nu känner till.
Även om du skulle kunna använda jsQR som en del av din huvudslinga, skulle du behöva genomföra aggressiv strypning för att behålla ditt användargränssnitt svarar. Detta skulle resultera i en längre fördröjning innan en lyckad upptäckt. Webbarbetare stöds i alla moderna webbläsare och ger en rejäl prestandahöjning för denna lösning, vilket möjliggör delningsskanningar under optimala ljusförhållanden.