| sitelink1 | https://developer.mozilla.org/en-US/docs...ection_API |
|---|---|
| sitelink2 | https://m.blog.naver.com/webhackyo/223063177318 |
| sitelink3 | |
| sitelink4 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
Barcode Detection API는 웹 개발자가 실시간으로 이미지 또는 비디오 스트림 내에서 바코드를 감지하고 디코딩할 수 있도록 하는 JavaScript API입니다.
이 API는 아직 개발 중이며 아직 모든 브라우저에서 사용할 수 없는 WebCodecs API의 일부입니다.
다음은 Barcode Detection API를 사용하여 이미지 내의 바코드를 감지하고 디코딩하는 방법의 예입니다.
// Select the image element
const img = document.querySelector('img');
// Create a barcode detector
const barcodeDetector = new BarcodeDetector();
// Detect barcodes within the image
barcodeDetector.detect(img)
.then(barcodes => {
if (barcodes.length === 0) {
console.log('No barcode detected');
} else {
const barcode = barcodes[0];
console.log(`Type: ${barcode.format}, Data: ${barcode.rawValue}`);
}
})
.catch(err => console.error(err));
이 예제에서는 먼저 `querySelector` 메서드를 사용하여 이미지 요소를 선택합니다.
그런 다음 새 `BarcodeDetector` 개체를 만들고 해당 감지 메서드를 사용하여 이미지 내의 바코드를 감지합니다.
`detect` 메소드는 `Barcode` 객체의 배열로 해결되는 약속을 반환합니다.
바코드가 감지되지 않으면 배열이 비어 있습니다.
바코드가 감지되면 해당 형식과 원시 값을 콘솔에 기록하기만 하면 됩니다.
다음은 Barcode Detection API를 사용하여 비디오 스트림 내에서 바코드를 감지하고 디코딩하는 방법을 보여주는 또 다른 예입니다.
// Select the video element
const video = document.querySelector('video');
// Create a barcode detector
const barcodeDetector = new BarcodeDetector({
formats: ['qr_code', 'ean_13', 'code_128']
});
// Start the video stream
navigator.mediaDevices.getUserMedia({
video: true
}).then(stream => {
video.srcObject = stream;
video.play();
})
.catch(err => console.error(err));
// Listen for video frames
video.addEventListener('loadeddata', () => {
// Capture a frame from the video stream
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// Detect barcodes within the frame
barcodeDetector.detect(canvas)
.then(barcodes => {
if (barcodes.length === 0) {
console.log('No barcode detected');
} else {
const barcode = barcodes[0];
console.log(`Type: ${barcode.format}, Data: ${barcode.rawValue}`);
}
})
.catch(err => console.error(err));
});
이 예제에서는 먼저 `querySelector` 메서드를 사용하여 비디오 요소를 선택합니다.
그런 다음 감지할 바코드 형식을 지정하는 선택적 `formats` 매개 변수를 사용하여 새 `BarcodeDetector` 개체를 만듭니다.
`getUserMedia` 메서드를 사용하여 비디오 스트림을 시작하고 비디오가 재생되면 새 프레임을 사용할 수 있을 때 실행되는 `loadeddata` 이벤트를 수신합니다.
이벤트 리스너 내에서 `canvas` 요소와 해당 `drawImage` 메서드를 사용하여 비디오 스트림에서 프레임을 캡처합니다.
그런 다음 `BarcodeDetector` 개체의 `detect` 메서드를 사용하여 캡처된 프레임 내에서 바코드를 감지합니다.
바코드가 감지되면 해당 형식과 원시 값을 콘솔에 기록합니다.
