바코드 인식 API 사용하기

홈 ❯ 구현 예제

바코드 인식 API는 이미지에서 바코드를 인식하고 확인할 수 있습니다. 인식할 수 있는 이미지로는 image, video, canvas등 모든 이미지 관련 태그를 인식할 수 있습니다.
BarcodeDetector는 사용하기 전에 사용가능한 OS와 플랫폼인지 확인해야 하며, 1차원 바코드와 2차원 바코드 이미지를 인식하여 Promise 형태로 결과를 반환해 줍니다.

데스크톱 웨일 2.8 이상, macOS 10.14 (Mojave) 이후 환경에서 사용할 수 있습니다.

지원 여부 확인 방법

BarcodeDetector는 사용하기 전에 OS와 플랫폼에서 BarcodeDetector을 지원하는지 확인하여야 합니다.
지원 여부를 확인하는 방법은 아래와 같습니다.

// 1. window.BarcodeDetector 사용
if (window.BarcodeDetector == undefined) {
  console.error('Barcode Detection not supported on this platform');
}

// 2. BarcodeDetector.getSupportedFormats 사용
(async () => {
  console.log(await BarcodeDetector.getSupportedFormats()); // ["aztec", "code_128" ... ]
})();

바코드 포맷설정

BarcodeDetector가 지원하는 바코드 포맷은 아래와 같습니다.

enum BarcodeFormat {
  "aztec",
  "code_128",
  "code_39",
  "code_93",
  "codabar",
  "data_matrix",
  "ean_13",
  "ean_8",
  "itf",
  "pdf417",
  "qr_code",
  "unknown",
  "upc_a",
  "upc_e"
};

BarcodeDetector 인스턴스를 생성할 때 인식하고 싶은 바코드 포맷을 따로 지정할 수 있으며, 지정하지 않으면 모든 포맷을 인식합니다.
설정된 포맷은 getSupportedFormats()명령어로 확인 가능합니다.

const barcodeDetector_specific = new BarcodeDetector({
  formats: [    //Optional
    'code_128',
    'qr_code'
  ]
});
const barcodeDetector_all = new BarcodeDetector();

console.log(await barcodeDetector_specific.getSupportedFormats()); // ["code_128", "qr_code"]
console.log(await barcodeDetector_all.getSupportedFormats()); // ["aztec", "code_128", "code_39", "code_93", "codabar", "data_matrix", "ean_13", "ean_8", "itf", "pdf417", "qr_code", "unknown", "upc_a", "upc_e"]

바코드 인식하기

바코드를 인식하기 위해 detect() 메서드 (method)를 사용하며, 이때 인식하고자 하는 이미지를 인자로 사용합니다.
detect() 메서드는 실행 결과로 Promise 객체를 반환하며 이미지 안에 여러개의 바코드가 포함될 수 있기 때문에 결과값은 배열 형식으로 이루어져 있습니다.
각 배열에는 아래 표와 같이 4가지 요소를 포함한 객채로 이루어져 있습니다.

이름	타입	설명
boundingBox	DOMRectReadOnly	인식된 바코드의 위치와 범위를 나타내는 사각형 박스
rawValue	DOMString	바코드에서 인식된 결과 문자열, 여러줄일 수 있음
format	BarcodeFormat	지원하는 바코드 포맷
cornerPoints	Point2D	인식된 바코드의 코너 포인트. 왼쪽 상단부터 시계방향

바코드 인식 API를 사용하여 바코드를 인식하고 내용을 출력하려면 아래와 같이 사용할 수 있습니다.

const barcodeDetector = new BarcodeDetector();
const barcodes = await barcodeDetector.detect(image);

const context = document.getElementById('canvas').getContext("2d");
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = "yellow";
barcodes.forEach(barcode => {
    // 인식된 바코드에 라인 그리기
    context.moveTo(Math.floor(barcode.cornerPoints[0].x), Math.floor(barcode.cornerPoints[0].y));
    context.lineTo(Math.floor(barcode.cornerPoints[1].x), Math.floor(barcode.cornerPoints[1].y));
    context.lineTo(Math.floor(barcode.cornerPoints[2].x), Math.floor(barcode.cornerPoints[2].y));
    context.lineTo(Math.floor(barcode.cornerPoints[3].x), Math.floor(barcode.cornerPoints[3].y));
    context.lineTo(Math.floor(barcode.cornerPoints[0].x), Math.floor(barcode.cornerPoints[0].y));

    // 인식된 바코드 내용 출력하기
    context.fillText(barcode.rawValue, barcode.boundingBox.x, barcode.boundingBox.y);
    context.stroke();
});
context.closePath();

참고

미디어 세션 API 사용하기 →