Quagga JS для веб-компонента для Polymer 3x - PullRequest
Новая
       21

Quagga JS для веб-компонента для Polymer 3x

0 голосов
/ 19 февраля 2020

То же самое работает в полимере 1.0 после создания пользовательского компонента. Запустите компонент Polymer 3.x. Я получаю ошибку ниже. Я попытался с помощью npm диспетчера пакетов, который выдает другую ошибку, поэтому я являюсь пользователем Quagga.min. js и напрямую импортирую его из полимерного компонента, где я сталкиваюсь с проблемой ниже

Uncaught SyntaxError: Запрошенный модуль '/quagga.min.js' не обеспечивает экспорт с именем 'default' 


import '@polymer/paper-input/paper-input.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/iron-image/iron-image.js';
import '@polymer/iron-input/iron-input.js';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/app-storage/app-localstorage/app-localstorage-document.js';
import { ERAppServices } from '../service/er-appservices';
import { PolymerElement, html } from '@polymer/polymer';
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
import {
    mixinBehaviors
} from '@polymer/polymer/lib/legacy/class.js';

import { ERPolymerElement } from 'er-polymer/elements/er-polymer-element.js';
import Quagga from '/quagga.min.js';


class BarcodeScanner extends ERPolymerElement{
    static get template() {
        return html`
            <style include="er-theme">
                :host {
                    display: block;
                    padding: 10px;
                }
                video {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
            </style>

            <template>
                <div id="interactive" class="viewport"></div>
            </template> 

        `;
    }



    ready() {
        super.ready();
        ERAppServices.ERLoaders.stopSplash();
    }


    static get properties() {
        return {
            result: {
                type: Object,
                notify: true,
                readOnly: true,
                value: null
              },
              code: {
                type: String,
                notify: true,
                reflectToAttribute: true,
                readOnly: true,
                value: ''
              },
              active: {
                type: Boolean,
                value: true,
                notify: true,
                reflectToAttribute: true
              }
        }
    }

    attached() {
        this._isReady = false;
        var _this = this;

        Quagga.init({
          inputStream : {
            name : "Live",
            type : "LiveStream"
          },
          decoder : {
            readers : ["ean_reader"]
          }
        }, function(err) {
          _this.querySelector('video').className += ' barcode-scanner';

          if (err) {
            console.log(err);
            return;
          }

          if (_this.active) {
            _this._isReady = true;
            Quagga.start();
          }
        });

        Quagga.onDetected(function(result) {
          if (_this.active) {
            _this._setResult(result);
            _this._setCode(result.codeResult.code);
            console.log("=======================Result",result.codeResult)
            _this.fire('recognize', {code: result.codeResult.code, result: result});
          }
        });
      }

      suspend() {
        Quagga.stop();
      }

      resume() {
        Quagga.start();
      }

}
window.customElements.define('barcode-scanner', BarcodeScanner);
...