답변 4개
채택된 답변
+20 포인트
1년 전
제가 사용한 원본 코드입니다.
잘 안되신다면 제 코드로 해보시길 바랍니다.
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개
1년 전
실제로 상품 입고 하듯이 들고 다니면서 대보니까 좀 불안정한 부분이 있떠라구요 ㅠㅠ
그래도 올려주신 소스가 더 안정적이어서 도움이 많이 됐습니다 감사합니다~!
그래도 올려주신 소스가 더 안정적이어서 도움이 많이 됐습니다 감사합니다~!
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
1년 전
오오..감사합니다 혹시 바코드를 좀 움직여도 정상적으로 읽어지시나요?
제가 아래 답변으로 새로 이미지 등록했는데 이게 조금만 움직이거나 틀면 저런식으로 주르륵 나오던데 그렇진 않으신가요?
제가 아래 답변으로 새로 이미지 등록했는데 이게 조금만 움직이거나 틀면 저런식으로 주르륵 나오던데 그렇진 않으신가요?
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
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>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인