브라우저에서 바코드 감지!!!

배경

12월 중순 홍콩에서 열릴 첫 번째 콘서트를 준비했습니다. 티켓 판매를 위한 물류를 정리하면서 간단한 시스템을 구축하기로 했습니다. 사람들은 stripe payment link에서 티켓을 구매할 수 있습니다. 그런 다음 QR 코드가 포함된 이메일을 생성하는 웹후크가 트리거됩니다. 그러면 콘서트 당일 입장을 위해 QR 코드를 스캔합니다. QR 코드 감지에 대한 솔루션을 찾던 중 이 아름다운 것을 발견했습니다Barcode Detection API.

아직 그것에 대한 많은 튜토리얼을 보지 못했기 때문에 탐색에 대해 메모하기로 결정했습니다. 즐기시기 바랍니다!

기사 개요

이 문서는 두 부분으로 나뉩니다.

카메라에서 피드 가져오기

카메라 피드에서 바코드 감지

1부: 카메라에서 피드 받기

이 섹션에서 우리의 목표는 카메라 스트림을 페이지에 넣는 것입니다.

먼저 카메라 스트림을 표시하려면 <video> 요소가 필요합니다.

<video id="stream" style="width: 100vw; height: 100vh;" />

그런 다음 간단히 getUserMedia 을 사용하여 미디어 스트림을 가져올 수 있습니다. 해당 스트림을 비디오 요소에 직접 전달합니다.

const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: { ideal: 'environment' }
  },
  audio: false
});
const videoEl = document.querySelector('#stream');
videoEl.srcObject = stream;
await videoEl.play();

참고로 { ideal: 'environment' } 옵션이 제공되어 휴대폰의 후면 카메라를 사용합니다. 자세히 알아보기here .

이 몇 줄의 코드로 카메라 피드를 캡처하여 화면에 표시했습니다. See codepen .

파트 2: 카메라 피드에서 바코드 감지

barcode detection api은 바코드 감지를 위한 간단한 API를 제공합니다. 필요한 것은 new BarcodeDetector(...) 다음 barcodeDetector.detect(videoElement) 입니다.

따라서 다음 두 줄을 추가합니다.

/* code from part one */


const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
const barcodes = await barcodeDetector.detect(videoEl)

이제 비디오 스트리밍이 시작되는 정확한 순간에 바코드 감지기가 활성화됩니다. 사람들이 카메라를 켜는 순간 QR 코드를 찾을 수 있을 거라 기대하지 않을 것입니다. 따라서 일부 바코드를 얻을 때까지 계속해서 비디오 스트림을 살펴보고 .detect(...)를 호출해야 합니다.

이를 위해 일부 바코드를 얻을 때까지 Xms마다 .detect 할 수 있습니다. 이를 위해 간단히 window.setInterval를 사용하십시오.

/* code from part one */

const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
window.setInterval(async () => {
  const barcodes = await barcodeDetector.detect(videoEl);
  if (barcodes.length <= 0) return;
  alert(barcodes.map(barcode => barcode.rawValue));
}, 1000)

이제 카메라는 매초마다 바코드를 찾습니다! See codepen QR 코드를 로드하여 테스트해 보세요! 다음은 "hello world"의 QR 코드입니다.

끝

최종 결과( codepen ):

<video id="stream" style="width: 100vw; height: 100vh;"/>

(async () => {
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: {
      ideal: "environment"
    }
  },
  audio: false
});
const videoEl = document.querySelector("#stream");
videoEl.srcObject = stream;
await videoEl.play();

const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
window.setInterval(async () => {
  const barcodes = await barcodeDetector.detect(videoEl);
  if (barcodes.length <= 0) return;
  alert(barcodes.map(barcode => barcode.rawValue));
}, 1000)
})();

즐거운 코딩하세요!