바코드 인식 API 사용하기

2020년 7월 2일 기준 macOS 10.14 (Mojave)에서 사용 가능합니다.

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

바코드 인식 API는 웨일 데스크탑 2.8 버전부터 제공되는 기능입니다.

지원 여부 확인 방법

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();

참고

테스트와 디버깅