[정보] WebCam 에서 바코드 인식 (휴대폰으로 웹페이지 접속하여 카메라를 이용 바코드 인식) 정보
[정보] WebCam 에서 바코드 인식 (휴대폰으로 웹페이지 접속하여 카메라를 이용 바코드 인식)본문
별도의 바코드 리더 없이
가지고 있는 휴대폰으로 바코드 처리할 수 있으면 좋겠다는 생각에
Scan to Web 이라는 바코드 스캔한걸 지정한 웹페이지로 전송하는 앱도 찾아보고
음 홈페이지 특정페이지 접속하면 카메라로 직접 처리하면 좋을듯 하여 찾아보니 괜찮은 자료가 나오네요..
특히나 모바일로 해당페이지 접속시 모바일 카메라를 웹캠으로 인식 바로 바코드 리더기처럼 사용할수 있게 됩니다.
물론 지원하는 브라우져가 제한적이긴 하지만 바코드 리더기로 사용하게 되는 휴대폰은 거의 Chrome 을 지원할가능성이 높으므로 버전만 활용가능한 버전으로 업그레이드 한다면 큰 문제는 없을것으로 예상 됩니다.
재고관리나 바코드를 활용하여 입/출력하는데 있어서 활용방안이 무궁무진할듯 하여 해당 자료 링크를 공유합니다.
<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>
9