[정보] WebCam 에서 바코드 인식 (휴대폰으로 웹페이지 접속하여 카메라를 이용 바코드 인식) > 그누보드5 팁자료실

버그신고

그누보드5 팁자료실

[정보] 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

댓글 7개

무지무지 좋은정보이며aro컴퍼니 님이 잘 만들어주신것 같은데 초보자들은 뭐가뭔지 모르겠네요 ㅎㅎ 공부해서 잘 활용해보겠습니다. 감사합니다.
전체 1,973 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT