Внедрение штриховых кодов сканирования

Question

Я делаю онлайн-приложение для сканирования только с HTML5 и JavaScript, используя Quagga.js.

Мне нужно, чтобы веб-камера работала для поиска штрих-кодов и импортированных quagga.js:

На веб-странице quagga вы найдете метод Quagga.init. инициализировать вид веб-камеры. Я ввел в теги скрипта этот код:

Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream"
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function() {
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });

Но ничего не случилось. Что мне нужно сделать, чтобы эта веб-камера работала? Какие-либо другие мнения, чтобы создать веб-приложение для сканирования штрих-кодов?

Спасибо за ответ!

Answer 1

Включают <div id="interactive" class="viewport"></div> в вашу разметку.

Answer 2

Это вопрос нескольких месяцев, но ответ Юджина не полный. Для того, чтобы заставить QuaggaJS работать, мне также пришлось добавить видео тег:

<div id="interactive" class="viewport">
    <video autoplay="true" preload="auto"></video>
</div>

Answer 3

Вы проверили свою консоль?

Использование "Livestream" (Доступ к камере) требует наличия SSL-сертифицированного веб-сайта.
Это означает дополнительные "s" в https://

Подробнее об этом можно прочитать здесь: https://support.google.com/adwords/answer/2580401?hl=sv

Вы также должны знать, что вы можете получить бесплатный сертификат SSL, но у вас должен быть доступ к вашему серверу. Большинство услуг хостинга могут помочь вам в этом.

Answer 4

Добавить в HTML

<div id="barcode-scanner" class="size"> </div>  

Добавить в JavaScript

 Quagga.init({           
        inputStream : {
            name : "Live",
            type : "LiveStream",
            target: document.querySelector('#barcode-scanner'), 
             constraints: {
                width: 520,
                height: 400,                  
                facingMode: "user"  //"environment" for back camera, "user" front camera
                }               
        },                         
        decoder : {
            readers : ["code_128_reader","code_39_reader"]
        }

    }, function(err) {
        if (err) {
            esto.error = err;
            console.log(err);
                return
        }

        Quagga.start();

        Quagga.onDetected(function(result) {                              
                var last_code = result.codeResult.code;                   
                    console.log("last_code "); 
             });
    });

У меня работает в Vue.

Answer 5

Добавьте элемент div в свою разметку следующим образом:

Затем включите цель в ваш поток ввода следующим образом: target: document.querySelector('#barcode_canvas')

          Quagga.init({
              inputStream : {
                name : 'Live',
                type : 'LiveStream',
                target: document.querySelector('#barcode_canvas')
              },
              decoder : {
                readers : ['ean_reader']
              }
            }, function(err) {
                if (err) {
                    console.log(err);
                    return
                }
                console.log('Initialization finished. Ready to start');
                Quagga.start();                     
            });