sin-tanaka / vue-quagga Goto Github PK

quagga.min.js:1 Refused to create a worker from 'blob:https://MYURL/dbeed717-2527-4d43-acc3-b90207c4610b' because it violates the following Content Security Policy directive: "default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

DOMException: Failed to construct 'Worker': Access to the script at 'blob:https://MYURL/dbeed717-2527-4d43-acc3-b90207c4610b' is denied by the document's Content Security Policy.

Problem

When I passed the nested object to readerSize, Vue logs the validation warning and default size is applied.

(This does not work)

...
      readerSize: {
        width: { min: 800, ideal: 1600 },
        height: { min: 600, ideal: 1600 }
      },
...

While readerSize: { width: 800, height: 600 } is working, it'd be great if we can use the Quagga's configuration format.

Per my experience, higher resolution results in less error and dark environment.

Hi,

I would need to access other properties of the Quagga class like for instance the inputStream size.
Is there a way to do so with the current version ?

Best regards,
Olivier

Change usage for v 1.1.0.

Hi, Nice Npm Library,
already made this example:
https://github.com/sin-tanaka/vue-quagga/blob/master/src/Scanner.vue

the connection with the camera is working, but,

Never go to event _onDetected
Could you make some example, because for me is a little confused

#4

Does anyone have a solution for turning the camera off after a successful detection? v-if still keeps the camera open in my experience.

I would expect something like this.Quagga.stop() - which would close the camera and close down any actions Quagga may have been processing.

I have used different device like iphone7, Samsung gx8 etc..
But always not working onDetected event.
Im only use example code

<template>
  <div>
    <h1>Barcode Reader</h1>
    <v-quagga :onDetected="logIt"
              :readerSize="readerSize"
              :readerType="readerTypes"
              :aspectRatio="aspectRatio"></v-quagga>
  </div>
</template>

<script>
export default {
  name: 'VueBarcodeTest',

  data () {
    return {
      readerSize: {
        width: 640,
        height: 480
      },
      readerTypes: [
        'code_128_reader',
        'ean_reader',
        'ean_8_reader',
        'code_39_reader',
        'code_39_vin_reader',
        'codabar_reader',
        'upc_reader',
        'upc_e_reader',
        'i2of5_reader',
        '2of5_reader',
      ],
      aspectRatio: { min: 1, max: 2 },
      detecteds: []
    }
  },
  methods: {
    logIt (data) {
      console.log('detected', data)
      alert(JSON.stringify(data))
    }
  }
}
</script>

Hello and thanks for this.

Do i pass onDetected and onProcessed in props in the quagga-sscanner component ?

Can you provide a fully functionnal example.
The documentation are a bit obfucated no ?

I'm trying to close the camera after reading the barcode, but

        QuaggaScanner.offDetected()
        this.QuaggaScanner.offDetected()
        QuaggaScanner.close()
        this.QuaggaScanner.close()
        Quagga.offDetected()
        this.Quagga.offDetected()
        Quagga.offDetected()
        this.Quagga.offDetected()

doesn't work, i get the following

__WEBPACK_IMPORTED_MODULE_0_vue_quaggajs__.QuaggaScanner.offDetected is not a function

Any ideas?

How can I minify the lib and expose the component globaly in browser ?

Thanks

No matter what i select it's always giving the canvaselement 640x480.

Hi,
i'd like to use this solution in my cordova app but when i launch my app i don't have the pop-up who allow the application to use the camera of my device.

It show me this :

It only works if i go inside the application's settings and check manualy the autorisation but it's totaly not practice. Do you have any solutions ?

I tried the example, and I got this error in console:
DOMException (anonymous) @ Scanner.vue?e41e:114

Example is in the file below:
test.zip

Please help.
Thank you for vue-quagga

I get these errors when I try to use it on Electron:

Line 44 in Scanner.vue:

TypeError: Cannot read property 'width' of undefined
    at VueComponent.data (..\node_modules\vue-quaggajs\dist\webpack:\src\Scanner.vue:44:1)

Line 70 in Scanner.vue:

TypeError: Cannot read property 'indexOf' of undefined
    at getPixels (..\node_modules\get-pixels\node-pixels.js:141:17)
    at loadImages (..\node_modules\quagga\lib\webpack:\lib\input_stream.js:27:9)
    at Object.that.setInputStream (..\node_modules\quagga\lib\webpack:\lib\input_stream.js:91:9)
    at initInputStream (..\node_modules\quagga\lib\webpack:\src\quagga.js:69:18)
    at Object.init (..\node_modules\quagga\lib\webpack:\src\quagga.js:480:13)
    at VueComponent.mounted (..\node_modules\vue-quaggajs\dist\webpack:\src\Scanner.vue:70:1)

My code:

index.js:

import Vue from 'vue';
import App from './App.vue';
new Vue({
  el: '#app',
  render(h) {
    return h(App)
  }
});

App.vue:

<template>
 <quagga-scanner></quagga-scanner>
</template>

<script>
import { QuaggaScanner } from 'vue-quaggajs';

export default {
  data() {
    return {
      name: "n1"
    };
  },
  components: {
    QuaggaScanner
  }
};
</script>

@sin-tanaka please help.

Any reason why we can't pass an array for multiple barcode types? it is a feature of Quagga

I will create a pull request to change this

I would like to be able to scan multiple types of barcodes, specifically code_128 and ean. However, I can't seem to get a detection of the ean style barcodes. I will see the green rectangle around the ean code to process it but it will never complete the detection. The 128 codes get processed and detected almost immediately. Any idea why I can't scan ean barcodes or how I can troubleshoot this further?

<template>
  <div>
  <div>{{detecteds.codeResult.code}}</div>
    <v-quagga :onDetected="logIt"
              :readerSize="readerSize"
              :readerType="readerTypes"
              :frequency="frequency"
              :aspectRatio="aspectRatio"></v-quagga>
    
  </div>
</template>

<script>
/* eslint-disable no-console */
import Vue from 'vue'
import VueQuagga from 'vue-quaggajs';
Vue.use(VueQuagga);


export default {
  data () {
    return {
      readerSize: {
        width: 640,
        height: 480
      },
      frequency: 30,
      readerTypes: [
        'ean_reader',
        'ean_8_reader',
        'code_128_reader'
      ],
      aspectRatio: { min: 1, max: 2 },
      detecteds: {
        "codeResult": {
          "code": "",  // the decoded code as a string
        }
      }
    }
  },
    methods: {
     
      logIt (data) {
       this.detecteds = data
    }
    }
}
</script>

EAN Not Detected Example
128 Detected Example

Hello

after detected the barcode my camera is not stop
how to destroy or Quagga.stop() after barcode detected

Thank you so much.

In Android's Chrome browser I see no camera, any ideas?

I'm not sure if this is the place to ask, but I couldn't find any information in the readme or other issues.

It appears the original quaggajs hasn't been maintained for few years now (some discussion about it here). It appears all active development has moved to quagga2, (last build was about 20 days ago as of writing this). I was wondering, if vue-quagga isn't already built on the newer version, what it would take to move over to it?

mounted:function mounted(){var _this=this;

quagga__WEBPACK_IMPORTED_MODULE_0___default.a.init(_this.quaggaState,function(err){
if(err){
return console.error(err);
}

I have searched for a solution for weeks now all to no avail. @sin-tanaka @dalezak or anyone. please help!!

to be able to set the width and height of video area, I had to change the code:

          constraints: {
            width:  this.readerSize.width ,
            height: this.readerSize.height ,

          },

I wonder why min is used here:

          constraints: {
            width: { min: this.readerSize.width },
            height: { min: this.readerSize.height },
            facingMode: 'environment',
            aspectRatio: { min: 1, max: 2 },
          },

Hi

You've introduced an aspectRatio prop but you're not using it

This line

should be
aspectRatio: this.aspectRatio

When using you're component without specifying readerSize.
I get the error "Cannot read property 'width' of undefined"

This is because vue does not allow to declare "nested" properties like you are doing

by default I get in the console log, code data. How can I hide it, and get the code value, In my component.

Add test code.

• Using jest, vue-test-util
• Test invalid props and changing attribute

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 serratus/quaggaJS#394?

Hi,

I'm having a problem reading barcodes other than code-128. Tested in Chrome and Safari, both on desktop and iPhone. Here is the quick test app I put together which reproduces the issue: https://github.com/MikeJWms/vue-quagga-test. It's just the example code in the readme wrapped in a vue app.

It's probably something silly that I'm doing, but I've spend the whole day on this with not luck so any help would be appreciated.

Thanks,

Mike

The v-quagga component is only able to receive the onDetect and onProcessed handlers once. All other instances, even with unique keys are not able to provide new handlers. The core issue is that the handlers are not reactive, they are only set once, when the component is mounted for the first time.

I might look into QuaggaJS and submit a pull request once I figured out the exact issue.