Detekce čárových kódů z webové kamery

Včera jsme se podívali na API detektoru čárových kódů pomocí obrázku jako našeho zdroje.
Dnes bych rád prozkoumal, jak to funguje, když jako vstupní zdroj používáme webovou kameru.

Bude to fungovat trochu jinak než to, co jsme udělali s obrázkem, protože potřebujeme smyčku funkce, která detekuje čárové kódy.

Konečným výsledkem bude tato aplikace, která dokáže skenovat jedinečné čárové kódy a vytisknout je jako seznam.

Detekce čárových kódů z fotoaparátu

Nejprve začněme bez HTML struktura, která nemá nic fantazijního děje, jen chceme zástupný symbol pro naše položky seznamu.

<ul id="barcode-list"></ul>

Dále chceme změnit funkci unload na volání asynchronní funkce.

window.onload = () => {
  detect();
};

async function detect() {
  // Function code
}

Chceme to takhle, protože chceme počkat, až bude video přijato a fungovat.

Začněme definováním některých proměnných uvnitř naší detekční funkce.

const barcodeDetector = new BarcodeDetector();
const list = document.getElementById('barcode-list');
let itemsFound = [];
const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: {facingMode: 'environment'}
});

Vytvoříme detektor čárových kódů stejně jako u obrázku.
Poté definujeme, jaký prvek je náš seznam, a vytvoříme proměnné pole, které pojme naše nalezené kódy.
Poté vytvoříme nové mediální zařízení zacílené na webovou kameru.

Dalším krokem je výstup této webové kamery na obrazovku, takže uživatel má nějakou vizuální zpětnou vazbu.

const video = document.createElement('video');
video.srcObject = mediaStream;
video.autoplay = true;

list.before(video);

Zde vytvoříme nový prvek typu videa a jako zdroj nastavíme mediální stream, který jsme právě vytvořili.
Poté jej přidáme před náš seznam.

To by nám nyní mělo poskytnout výstup webové kamery na naší obrazovce.

Pak potřebujeme mít funkci, která dokáže kontrolovat čárové kódy.
Tato funkce však musí zůstat spuštěna.

Takže uvnitř funkce detekce můžeme mít další funkci, jako je tato:

async function detect() {
  function render() {
    // Do the detection
  }

  (function renderLoop() {
    requestAnimationFrame(renderLoop);
    render();
  })();
}

Tím zajistíte, že funkce renderu bude volána určitou rychlostí a bude ji zavolána zpočátku.

Samotná funkce vykreslení je podobná tomu, co jsme dělali dříve:

function render() {
  barcodeDetector
    .detect(video)
    .then(barcodes => {
      barcodes.forEach(barcode => {
        if (!itemsFound.includes(barcode.rawValue)) {
          itemsFound.push(barcode.rawValue);
          const li = document.createElement('li');
          li.innerHTML = barcode.rawValue;
          list.appendChild(li);
        }
      });
    })
    .catch(console.error);
}

Pro každý nalezený čárový kód přidáme novou položku seznamu.

Tento kód si můžete vyzkoušet na následujícím Codepen.

Podpora prohlížeče

Jak již bylo zmíněno, API je stále ve fázi zavádění, od Chrome 83 a Edge 82 jej můžeme používat.
Firefox to však zatím nepodporuje.

Děkujeme za přečtení a pojďme se spojit!

Děkuji, že čtete můj blog. Neváhejte se přihlásit k odběru mého e-mailového zpravodaje a připojte se na Facebooku nebo Twitteru