Using component to read barcodes via CDN

Question

I would like to install in a component via CDN called vue-cc-quaggajs to read barcodes.

I've tried the following:

new Vue({
  el: "#app",
  data: {
    readerSize: {
      width: 640,
      height: 480
    }
  },
  methods: {
    logIt (data) {
      console.log('detected', data)
    }
  },
  components: {
    //QuaggaScanner
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@carloscgo/vue-cc-quaggajs@2.0.0/dist/vue-quagga.js"></script>
<div id="app">
  <quagga-scanner :onDetected="logIt" :readerSize="readerSize" :readerType="'ean_reader'"></quagga-scanner>
</div>

But I'm getting some errors, like:

Cannot read property 'width' of undefined" found in Scanner - Root

Could you help me? I don't know if I'm referencing the right JS file or if I could use another component to scan barcodes.

Answer 1

I have succeeded with quagga-scanner by building the component with CDN. It works as the default package. Here is the live demo. I worked with this image and it gives me output at console.log.

Note: Use a good camera to read the barcode. Stackoverflow snippet will not work as you don't get the camera permission from the snippet.

Vue.component('quagga-scanner', {
  props: {
    onDetected: {
      type: Function,
    },
    onProcessed: {
      type: Function,
    },
    readerType: {
      type: String,
      default: 'code_128_reader',
    },
    readerSize: {
      width: {
        type: Number,
        default: 640,
      },
      height: {
        type: Number,
        default: 480,
      }
    }
  },
  data() {
    return {
      quaggaState: {
        inputStream: {
          type: 'LiveStream',
          constraints: {
            width: {
              min: this.readerSize.width
            },
            height: {
              min: this.readerSize.height
            },
            facingMode: 'environment',
            aspectRatio: {
              min: 1,
              max: 2
            }
          }
        },
        locator: {
          patchSize: 'medium',
          halfSample: true
        },
        numOfWorkers: 4,
        frequency: 10,
        decoder: {
          readers: [{
            format: this.readerType,
            config: {}
          }]
        },
        locate: true
      },
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Quagga.init(this.quaggaState, function(err) {
        if (err) {
          return console.log(err);
        }

        Quagga.start();
      });

      Quagga.onDetected(this.onDetected ? this.onDetected : this._onDetected);
      Quagga.onProcessed(this.onProcessed ? this.onProcessed : this._onProcessed);
    },
    reInit() {
      Quagga.stop();

      this.init();
    },
    getImage() {
      const canvas = Quagga.canvas.dom.image;

      return canvas.toDataURL();
    },
    _onProcessed(result) {
      let 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
          });
        }
      }
    },
    _onDetected(result) {
      console.log('detected: ', result);
    },
  },
  template: `
  <div id="interactive" class="viewport scanner">
    <video></video>
    <canvas class="drawingBuffer"></canvas>
  </div>
  `
})
new Vue({
  el: "#app",
  data: {
    readerSize: {
      width: 640,
      height: 480
    }
  },
  methods: {
    logIt(data) {
      console.log('detected', data)
    },
  }
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* In order to place the tracking correctly */
    
    canvas.drawing,
    canvas.drawingBuffer {
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@carloscgo/vue-cc-quaggajs@2.0.0/dist/vue-quagga.js"></script>
  <script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
  <div id="app">
    <quagga-scanner :on-detected="logIt" :reader-size="readerSize" :reader-type="'ean_reader'"></quagga-scanner>
  </div>
</body>

</html>