Как сделать распознавание штрих-кода на PHP или JS в веб-приложении?

Question

andreyi4 @andreyi4

Штриховые коды

Как сделать распознавание штрих-кода на PHP или JS в веб-приложении?

Делаю веб-приложение для просмотра данных с ПК и мобильников на PHP, JS, CSS, HTML. Без каких либо фреймворков.
Необходимо сделать сканер штрих-кодов для мобильников.
Сделал вывод потокового видео через фронтальную камеру. Умею брать с этого видео изображения (скриншоты) тоже в потоке. Теперь задача, научиться декодировать эти изображения на предмет штрих-кодов и выводить код штрих-кода в строке.
Как это можно реализовать?
Пытаюсь найти библиотеки, а они под приложения на мобильники.
Мне лишь достаточно реализовать задачу через JS или PHP.

Вопрос задан более трёх лет назад
4908 просмотров

Комментировать

Подписаться 2 Средний Комментировать

Решения вопроса 1

8 комментариев

andreyi4 @andreyi4 Автор вопроса

эта библиотека для node.js? я пишу веб приложение как обычный сайт без node.js

Написано более трёх лет назад
Александр @NeiroNx

нет. Там есть различные примеры.

Написано более трёх лет назад
andreyi4 @andreyi4 Автор вопроса

Можешь подсказать? Никак не могу quagga настроить. Преодолел много ошибок, но эта в ступор ставит.

Ошибка следующая: TypeError: Cannot read property 'attachData' of undefined

В принципе, если пропустить все ошибки, камера работает, а вот декодирование не происходит.

Помоги, плиз, вот ссылка закрыта на сделанное.
Делаю через фрейм, чтобы в сафари норм работало. Где я допустил ошибку, не понимаю?

Написано более трёх лет назад
andreyi4 @andreyi4 Автор вопроса

Ты же этот плагин внедрял у себя?

Написано более трёх лет назад
Александр @NeiroNx

нет, этот самый вменяемый из бесплатных.

Написано более трёх лет назад
andreyi4 @andreyi4 Автор вопроса

Ну а может можешь помочь, что там не так сделал, выше ссылку скинул? Просто уже не знаю куда и что...
Ну а платные ты пробовал, может все таки их? Какие посоветуешь? Конечно хотелось бы обойтись бесплатным.

Написано более трёх лет назад

Александр @NeiroNx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>index</title>
    <meta name="description" content="" />
    <meta name="author" content="NeiroN" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="quagga.min.js" type="text/javascript"></script>
    <script type="text/javascript">
var lastResult = null;
$(function(){
Quagga.init({
            inputStream: {
                type : "LiveStream",
                constraints: {
                    width: {min: 640},
                    height: {min: 480},
                    facingMode: "environment",
                    aspectRatio: {min: 1, max: 2}
                },
                target: document.querySelector('#interactive')
            },
            locator: {
                patchSize: "medium",
                halfSample: true
            },
            numOfWorkers: 2,
            frequency: 10,
            decoder: {
                readers : [{
                    format: "ean_reader",
                    config: {}
                }],
      debug:{
        drawBoundingBox: true,
        showFrequency: false,
        drawScanline: true,
        showPattern: false
      }
            },
            locate: true
        }, function(err) {
      if (err) {
          console.log(err);
          return
      }
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });
      Quagga.onProcessed(function(result) {
        var drawingCtx = Quagga.canvas.ctx.overlay,
            drawingCanvas = Quagga.canvas.dom.overlay;

        if (result) {
            if (result.boxes) {
                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                result.boxes.filter(function (box) {
                    return box !== result.box;
                }).forEach(function (box) {
                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
                });
            }

            if (result.box) {
                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
            }

            if (result.codeResult && result.codeResult.code) {
                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
            }
        }
    });

    Quagga.onDetected(function(result) {
        var code = result.codeResult.code;

        if (lastResult !== code) {
            lastResult = code;
            var $node = null, canvas = Quagga.canvas.dom.image;

            $node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
            $node.find("img").attr("src", canvas.toDataURL());
            $node.find("h4.code").html(code);
            $("#result_strip ul.thumbnails").prepend($node);
        }
    });
});
</script>
  </head>

  <body>
      <div id="result_strip">
        <ul class="thumbnails"></ul>
        <ul class="collector"></ul>
      </div>
    <div id="interactive" class="viewport"></div>
  </body>
</html>

Написано более трёх лет назад