답변 4개 / 댓글 5개
채택된 답변
+20 포인트
제가 사용한 원본 코드입니다.
잘 안되신다면 제 코드로 해보시길 바랍니다.
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuaggaJS Barcode Scanner</title>
<style>
#interactive {
position: relative;
width: 100%;
height: auto;
}
#interactive video {
width: 100%;
height: auto;
}
#result {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 5px;
}
</style>
</head>
<body>
<p>스캔</p>
<div id="interactive" class="viewport">
<video autoplay></video>
<div id="result">Scanning...</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var resultElement = document.getElementById('result');
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#interactive'), // 이 요소에 비디오 스트림을 렌더링합니다.
constraints: {
width: 640,
height: 480,
facingMode: "environment" // 후면 카메라 사용
},
},
decoder: {
readers: ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader"] // 지원하는 바코드 형식
},
}, function (err) {
if (err) {
console.log(err);
return;
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
Quagga.onDetected(function (data) {
var code = data.codeResult.code;
resultElement.textContent = `Scanned code: ${code}`;
console.log(`Scanned code: ${code}`);
});
});
</script>
</body>
</html>답변에 대한 댓글 3개
QuaggaJS 검색 및 getUserMedia 검색 해보시면 좋을 것 같습니다.
답변에 대한 댓글 1개
와..이런게 있군요..ㄷㄷㄷ 감사합니다!
그런데 샘플소스로 테스트를 해봤는데 같은 바코드인데 인식이 중구난방으로 되는데 이부분은 개선이 가능한 부분일까요?;;
<ul id="barcode-list"></ul>
<script>
window.onload = () => {
detect();
};
async function detect() {
const barcodeDetector = new BarcodeDetector();
const list = document.getElementById("barcode-list");
let itemsFound = [];
const mediaStream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" }
});
const video = document.createElement("video");
video.srcObject = mediaStream;
video.autoplay = true;
list.before(video);
function render() {
barcodeDetector
.detect(video)
.then((barcodes) => {
barcodes.forEach((barcode) => {
if (!itemsFound.includes(barcode.rawValue)) {
itemsFound.push(barcode.rawValue);
const li = document.createElement("li");
li.innerHTML = barcode.rawValue;
list.appendChild(li);
}
});
})
.catch(console.error);
}
(function renderLoop() {
requestAnimationFrame(renderLoop);
render();
})();
}
</script>
그런데 샘플소스로 테스트를 해봤는데 같은 바코드인데 인식이 중구난방으로 되는데 이부분은 개선이 가능한 부분일까요?;;
<ul id="barcode-list"></ul>
<script>
window.onload = () => {
detect();
};
async function detect() {
const barcodeDetector = new BarcodeDetector();
const list = document.getElementById("barcode-list");
let itemsFound = [];
const mediaStream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" }
});
const video = document.createElement("video");
video.srcObject = mediaStream;
video.autoplay = true;
list.before(video);
function render() {
barcodeDetector
.detect(video)
.then((barcodes) => {
barcodes.forEach((barcode) => {
if (!itemsFound.includes(barcode.rawValue)) {
itemsFound.push(barcode.rawValue);
const li = document.createElement("li");
li.innerHTML = barcode.rawValue;
list.appendChild(li);
}
});
})
.catch(console.error);
}
(function renderLoop() {
requestAnimationFrame(renderLoop);
render();
})();
}
</script>
답변을 작성하려면 로그인이 필요합니다.