모바일 바코드 스캔 기능 질문드립니다!

모바일 바코드 스캔 기능 질문드립니다!

QA

모바일 바코드 스캔 기능 질문드립니다!

본문

테블릿이나 휴대폰으로 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>

혹시 지원하지 않는 바코드는 아닌지요?

 

잘되네요

 

thumb-3555411970_1716187949.018_320x686.jpg

오오..감사합니다 혹시 바코드를 좀 움직여도 정상적으로 읽어지시나요?

제가 아래 답변으로 새로 이미지 등록했는데 이게 조금만 움직이거나 틀면 저런식으로 주르륵 나오던데 그렇진 않으신가요?

답변을 작성하시기 전에 로그인 해주세요.
전체 24
QA 내용 검색

회원로그인

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