데스크탑 및 웹용 Node.js 바코드 및 QR 코드 리더

23958 단어 barcodejavascriptqrcodenode
많은 오픈 소스 JavaScript 바코드 및 QR 코드 리더 라이브러리가 있지만 기업용으로 적합한 라이브러리는 거의 없습니다. 그 이유는 장기적인 알고리즘 업데이트 및 유지 관리를 위한 로드맵이 없기 때문입니다. 또한 순수한 JavaScript의 성능은 충분하지 않습니다. 성능을 추구한다면 순수 JavaScript에 비해 WebAssembly가 더 나은 선택입니다. 그럼에도 불구하고 Node.js를 사용한 서버 측 프로그래밍은 아직 끝이 아닙니다. Node.js의 내부에는 무엇이 있나요? C/C++입니다. C++를 사용하는 Node.js 애드온이 최고의 성능을 발휘한다는 것은 의심의 여지가 없습니다. 이 기사에서는 Dynamsoft C++ Barcode SDK 기반의 Node.js 바코드 및 QR 코드 애드온을 사용하여 JavaScript를 사용하여 데스크탑 및 웹 애플리케이션을 빌드하는 방법을 설명합니다.

설치



  • barcode4nodejs
    barcode4nodejs 패키지는 Dynamsoft Barcode Reader 을 기반으로 빌드된 Node.js 애드온입니다. 바코드 및 QR 코드를 스캔하는 데 사용합니다.

    npm install barcode4nodejs

    SDK 활성화를 위한 유효한 라이선스 키를 받으려면 here을 클릭하십시오.

    const dbr = require('barcode4nodejs');
dbr.initLicense("LICENSE-KEY")


  • opencv4nodejs
    opencv4nodejs 패키지는 OpenCV용 Node.js 애드온입니다. 카메라를 열고 비디오 스트림을 읽는 데 사용합니다.

    npm install opencv4nodejs


    • 바코드 및 QR 코드 읽기를 위한 Node.js API 사용자 정의



    현재 barcode4nodejs 패키지는 Dynamsoft Barcode Reader의 C++ API 일부만 지원합니다. 기능이 요구 사항을 충족하지 못하는 경우 다음 단계를 사용하여 JavaScript API를 사용자 지정할 수 있습니다.

  • barcode4nodejs의 소스 코드를 가져옵니다.

    git clone https://github.com/Dynamsoft/nodejs-barcode

  • 다운로드 Dynamsoft C++ Barcode SDK . 헤더 파일을 src 폴더에 복사하고 공유 라이브러리를 platforms 폴더에 복사합니다. Dynamsoft Barcode Reader SDK는 Windows , Linux (AMD64 and ARM64) 및 macOS 를 지원합니다. 이론적으로 Node.js 애드온은 모든 데스크톱 플랫폼에서 작동할 수 있습니다.
  • src/dbr.cc 및 index.js를 편집하여 사용자 정의 기능을 추가합니다.

  • Node.js 확장을 빌드합니다.

    node-gyp configure
node-gyp build


    • 5분 만에 데스크탑 및 웹용 Node.js 바코드 및 QR 코드 리더 구축



    Node.js 데스크톱 애플리케이션


    desktop.js 파일을 만듭니다. opencv4nodejs의 기본 자습서에 따르면 무한 루프를 사용하여 웹캠 프레임을 캡처하고 데스크탑 창에 표시할 수 있습니다.

    const cv = require('opencv4nodejs');
const vCap = new cv.VideoCapture(0);
const delay = 10;
while (true) {
  let frame = vCap.read();
  if (frame.empty) {
    vCap.reset();
    frame = vCap.read();
  }

  cv.imshow('OpenCV Node.js', frame);
  const key = cv.waitKey(delay); // Press ESC to quit
  if (key == 27) {break;}
}


    그러나 루프에서 계속해서 QR 코드와 바코드를 디코딩하기 위해 비동기 함수를 호출하면 결과 콜백 함수가 반환되지 않습니다. 해결 방법은 바코드 및 QR 코드가 감지될 때 계속 호출setTimeout() 기능을 수행하는 것입니다.

    const dbr = require('barcode4nodejs');
const cv = require('opencv4nodejs');
dbr.initLicense("LICENSE-KEY")
barcodeTypes = dbr.barcodeTypes
const vCap = new cv.VideoCapture(0);
const drawParams = { color: new cv.Vec(0, 255, 0), thickness: 2 }
const fontFace = cv.FONT_HERSHEY_SIMPLEX;
const fontScale = 0.5;
const textColor = new cv.Vec(255, 0, 0);
const thickness = 2;

results = null;

function getframe() {
    let img = vCap.read();
    dbr.decodeBufferAsync(img.getData(), img.cols, img.rows, img.step, barcodeTypes, function (err, msg) {
        results = msg
    }, "", 1);
    cv.imshow('Webcam', img);
    const key = cv.waitKey(10); // Press ESC to quit
    if (key != 27) {
        setTimeout(getframe, 30);
    }
}

getframe()


    다음 코드에서는 OpenCV API를 사용하여 감지된 바코드 및 QR 코드의 텍스트와 경계 상자를 표시하는 오버레이를 그립니다. 인접한 프레임의 유사성으로 인해 프레임과 해당 결과를 동시에 그릴 필요가 없습니다. 약간의 지연은 허용됩니다.

    if (results != null) {
    for (index in results) {
        let result = results[index];

        let upperLeft = new cv.Point(result.x1, result.y1);
        let bottomLeft = new cv.Point(result.x2, result.y2);
        let upperRight = new cv.Point(result.x3, result.y3);
        let bottomRight = new cv.Point(result.x4, result.y4);

        img.drawLine(upperLeft, bottomLeft, drawParams);
        img.drawLine(bottomLeft, upperRight, drawParams);
        img.drawLine(upperRight, bottomRight, drawParams);
        img.drawLine(bottomRight, upperLeft, drawParams);

        img.putText(result.value, new cv.Point(result.x1, result.y1 + 10), fontFace, fontScale, textColor, thickness);
    }
}




    Node.js 웹 애플리케이션



    웹 서버를 시작하기 위해 다음 코드를 추가하는 web.js 파일을 만듭니다.

    var fs=require("fs");
var html = fs.readFileSync("index.htm", "utf8");

var server = http.createServer(function (req, res) {  
    if (req.url.startsWith("/image")) {
        res.writeHead(200, { 'Content-Type': 'image/jpeg' });
        res.write(img);
        res.end();
    }
    else {
        res.writeHead(200, { 'Content-Type': 'text/html' });     
        res.write(html);
        res.end();
    }
});

server.listen(2020);

console.log('Node.js web server is running at port 2020...')

    desktop.js에서 사용된 코드를 web.js에 복사합니다. 데스크톱 창에 웹캠 이미지를 표시하기 위해 cv.imshow()를 사용하는 대신 res.write()를 사용하여 이미지 데이터를 웹 클라이언트로 보냅니다.

    다음 단계는 이미지 데이터를 표시할 HTML 페이지를 만드는 것입니다.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Webcam</title>
</head>

<body>
    <img id="image" width="960" />

    <script type="text/javascript">
        var image = document.getElementById('image');
        function refresh() {
            image.src = "/image?" + new Date().getTime();
            image.onload= function(){
                setTimeout(refresh, 30);
            }
        }

        refresh();
    </script>

</body>
</html>


    사용된 고급 HTML5 API는 없지만 이미지 요소가 있습니다. 따라서 웹 애플리케이션은 모든 웹 브라우저와 100% 호환됩니다.

    이제 Node.js를 사용하여 서버 측 바코드 및 QR 코드 스캔 앱을 실행할 수 있습니다.

    node web.js


    다음은 Microsoft Internet Explorer의 스크린샷입니다.



    소스 코드



    https://github.com/yushulx/nodejs-barcode-reader
    바코드 및 QR 코드 스캔을 위한 Java 명령줄, GUI 및 웹 앱
    스타일 Lookatme 슬라이드 좀 더 개인적인

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage