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` 메서드를 사용하여 캡처된 프레임 내에서 바코드를 감지합니다.
바코드가 감지되면 해당 형식과 원시 값을 콘솔에 기록합니다.
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
» | Barcode Detection API | 황제낙엽 | 2023.08.06 | 7 |
16 | (Copilot) 바닐라 스크립트가 뭐지? | 황제낙엽 | 2023.02.24 | 7 |
15 | 배열에 대한 루프문 조회 (loop iterator) | 황제낙엽 | 2023.03.01 | 3 |
14 | (Copilot) JSON 객체의 내부 데이터 리스트 길이를 구하는 방법 | 황제낙엽 | 2023.03.30 | 2 |
13 | fetch() 함수 사용 예제 | 황제낙엽 | 2023.11.23 | 1 |
12 | 현재 document 의 host 와 port 를 얻는 방법 | 황제낙엽 | 2023.10.03 | 1 |
11 | 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 | 황제낙엽 | 2023.08.21 | 1 |
10 | navigator.mediaDevices | 황제낙엽 | 2023.08.21 | 1 |
9 | 체크박스에 체크된 항목 개수 구하기 | 황제낙엽 | 2023.06.10 | 1 |
8 | JSON 클래스가 지원하는 function | 황제낙엽 | 2023.03.31 | 1 |
7 | CryptoJS 를 이용한 암호화 | 황제낙엽 | 2023.02.15 | 1 |
6 | json 데이터 내의 변수명에 prefix 로 type 표현하기 | 황제낙엽 | 2024.04.15 | 0 |
5 | (Bard) FileReader 로 여러개의 파일을 read 하는 법 | 황제낙엽 | 2023.08.23 | 0 |
4 | How to build a file upload service with vanilla JavaScript | 황제낙엽 | 2023.08.22 | 0 |
3 | (Bard) JavaScript로 JSON 배열을 작성하는 방법 | 황제낙엽 | 2023.08.21 | 0 |
2 | [URLSearchParams] URL 파라미터(매개변수) 값 가져오기 | 황제낙엽 | 2023.02.02 | 0 |
1 | 정규식을 이용한 이메일 검증 스크립트 | 황제낙엽 | 2023.06.25 | 0 |