sin-tanaka / vue-quagga

quaggaJS's wrapper Barcode Reader/Scanner component for Vue.js.
MIT License
53 stars 34 forks source link

TypeError: Cannot read property 'setAttribute' of undefined at Object.o.createLiveStream #25

Open dalezak opened 5 years ago

dalezak commented 5 years ago

I'm getting an error in my Ionic Capacitor Vue app on the line src/Scanner.vue#L112 which is calling Quagga.init(this.quaggaState, function(err) {

vue.runtime.esm.js?2b0e:1888 TypeError: 
Cannot read property 'setAttribute' of undefined at Object.o.createLiveStream

I imported the component in my main.js

import VueQuagga from 'vue-quaggajs';
Vue.use(VueQuagga);

And using the suggested vue tag

<v-quagga :onDetected="onDetected" :readerSize="readerSize" :readerTypes="['ean_reader']"></v-quagga>

Here's what the output of my quaggaState looks like:

{
    "inputStream": {
        "type": "LiveStream",
        "constraints": {
            "width": {
                "min": 400
            },
            "height": {
                "min": 400
            },
            "facingMode": "environment",
            "aspectRatio": {
                "min": 1,
                "max": 2
            }
        }
    },
    "locator": {
        "patchSize": "medium",
        "halfSample": true
    },
    "numOfWorkers": 2,
    "frequency": 10,
    "decoder": {
        "readers": ["ean_reader"]
    },
    "locate": true
}

Looks like it's related to https://github.com/serratus/quaggaJS/issues/394?

dalezak commented 5 years ago

Ah-ha! Looks like the canvas element may not have been fully rendered yet before trying to call Quagga.init.

If I put the Quagga.init code inside a setTimeout, it loads the camera:

setTimeout(() => {
  Quagga.init(this.quaggaState, function(err) {
      if (err) {
        return console.error(err);
      }
      Quagga.start();
  });
  Quagga.onDetected(this.onDetected);
  Quagga.onProcessed(this.onProcessed);
}, 1000);

I'll continue to investigate...

dalezak commented 5 years ago

@sin-tanaka is there anything you can do to avoid this TypeError: Cannot read property 'setAttribute' of undefined at Object.o.createLiveStream?

As I suggested above, simply putting the Quagga.init code inside a setTimeout resolves the problem.

I can modify the node_modules source but it would be better if the module itself were updated to resolve the problem.

Stridesdata commented 3 years ago

Delazak Good morning,

I need assistance with this, I keep getting Error: getUserMedia is not defined and the console is pointing to the same quagga init err line

please assist