How to use it in VUE?

[georgewei]

I've read issue 49, the demo project is not a real VUE project, but just some code snippets, and I can not integrate the component named ’qrcode-scanner‘ into my project.

I've try the code as follows:

<template>
  <div>
    <button @click="startScan">Click to scan</button>
    <div style="width: 500px" id="reader"></div>
  </div>
</template>

<script src="../../../scripts/3rd/html5-qrcode.min.js" type="text/javascript"></script>
<script>
export default {
  data() {
    return {
      scanner: null
    }
  },
  methods: {
    startScan() {
      this.scanner = new Html5QrcodeScanner(
        "reader", { fps: 10, qrbox: 250 });
      this.scanner.render(this.onScanSuccess, this.onScanError);
    },
    onScanSuccess(qrCodeMessage) {
      // handle on success condition with the decoded message
      console.log(qrCodeMessage);
      this.scanner.clear();
      // ^ this will stop the scanner (video feed) and clear the scan area.
    },
    onScanError(errorMessage) {
      console.log(errorMessage);
      // handle on error condition, with error message
    }
  }
}
</script>

I got this runtime error:

[Vue warn]: Error in v-on handler: "ReferenceError: Html5QrcodeScanner is not defined"

and I can not find html5-qrcode.min.js in the source map.

Then I changed the code as follows:

<template>
  <div>
    <button @click="startScan">Click to scan</button>
    <div style="width: 500px" id="reader"></div>
  </div>
</template>

<script>
import * as h5Qrcode from '../../../scripts/3rd/html5-qrcode.min.js'

export default {
  data() {
    return {
      scanner: null
    }
  },
  methods: {
    startScan() {
      this.scanner = new h5Qrcode.Html5QrcodeScanner(
        "reader", { fps: 10, qrbox: 250 });
      this.scanner.render(this.onScanSuccess, this.onScanError);
    },
    onScanSuccess(qrCodeMessage) {
      // handle on success condition with the decoded message
      console.log(qrCodeMessage);
      this.scanner.clear();
      // ^ this will stop the scanner (video feed) and clear the scan area.
    },
    onScanError(errorMessage) {
      console.log(errorMessage);
      // handle on error condition, with error message
    }
  }
}
</script>

But I got this compiling error:

ERROR Failed to compile with 1 errors 15:39:45

error in ./src/scripts/3rd/html5-qrcode.min.js

Syntax Error: SyntaxError: /.../src/scripts/3rd/html5-qrcode.min.js: Identifier '_classCallCheck' has already been declared (7:22)

[georgewei]

Continue the exploration, I commented the duplicated declaration of _classCallCheck, _defineProperties, _createClass & _defineProperty, my project is compiled, but I got another runtime error:

[Vue warn]: Error in v-on handler: "TypeError: scripts_3rd_html5_qrcode_min_js__WEBPACK_IMPORTED_MODULE_2_.Html5QrcodeScanner is not a constructor"

[mebjas]

The demo project is obsolete - does this not work - https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejs ?

[georgewei]

The demo project is obsolete - does this not work - https://github.com/mebjas/html5-qrcode/tree/master/examples/vuejs ?

This project is not a REAL VUE project, I can't make it works.

[mebjas]

I see got it, do you have a reference to your project, let me publish a real Vue project to show how it can be used.

[georgewei]

I've wrtten a demo here: https://github.com/georgewei/html5-qrcode-vue-demo

At last, it works. But I still can not use html5-qrcode.min.js directly, I have to use the uncompressed source code and modified it to avoid some compile errors. And I have removed some UI elements to make the scanner looks simple.