모바일 바코드 스캔 기능 질문드립니다!
본문
테블릿이나 휴대폰으로 QR코드가 아닌 바코드를 찍어서 textbox 에 바코드 넘버를 입력시킬려면
별도의 앱을 제작해야 가능한걸로 파악이 되는데
다른 방법이 있을까요?
답변 4
제가 사용한 원본 코드입니다.
잘 안되신다면 제 코드로 해보시길 바랍니다.
<!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>
감사합니다..! 적어주신 코드도 동일하게 튀긴하네요 ㅠㅠ
너무 심하게 움직이지만 않으면 괜찮던데용 ?
실제로 상품 입고 하듯이 들고 다니면서 대보니까 좀 불안정한 부분이 있떠라구요 ㅠㅠ
그래도 올려주신 소스가 더 안정적이어서 도움이 많이 됐습니다 감사합니다~!
QuaggaJS 검색 및 getUserMedia 검색 해보시면 좋을 것 같습니다.
와..이런게 있군요..ㄷㄷㄷ 감사합니다!
그런데 샘플소스로 테스트를 해봤는데 같은 바코드인데 인식이 중구난방으로 되는데 이부분은 개선이 가능한 부분일까요?;;
<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>
혹시 지원하지 않는 바코드는 아닌지요?
잘되네요
오오..감사합니다 혹시 바코드를 좀 움직여도 정상적으로 읽어지시나요?
제가 아래 답변으로 새로 이미지 등록했는데 이게 조금만 움직이거나 틀면 저런식으로 주르륵 나오던데 그렇진 않으신가요?
