QRCode

by Osama Qassar

HTML

<div id="slides">
    <div class="dapp exercise ui">
      <decode></decode>
      
    </div>
  </div>

<!-- import QrcodeStream before `new Vue(...)` -->
<script src="https://unpkg.com/[email protected]/dist/vue-qrcode-reader.browser.js"></script>

JavaScript

<div>
      <div class="flexRow" >
        <div>
        <h2>DECODE</h2>
        <qrcode-stream @decode="onDecode" @init="onInit"/>
      </div>
    <div>

// define `decode` before `new Vue(..)` 
Vue.component('decode', {
  template: '#decode',
  methods: {
    onDecode (decodedString) {
      console.log(decodedString);
    },
    logErrors (promise) {
      promise.catch(console.error)
    },
    async onInit (promise) {
      console.log("Reached Init");
      try {
        await promise
        console.log(promise)
      } catch (error) {
        console.log("Error is:", error);
        if (error.name === 'NotAllowedError') {
          this.error = "ERROR: you need to grant camera access permisson"
        } else if (error.name === 'NotFoundError') {
          this.error = "ERROR: no camera on this device"
        } else if (error.name === 'NotSupportedError') {
          this.error = "ERROR: secure context required (HTTPS, localhost)"
        } else if (error.name === 'NotReadableError') {
          this.error = "ERROR: is the camera already in use?"
        } else if (error.name === 'OverconstrainedError') {
          this.error = "ERROR: installed cameras are not suitable"
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = "ERROR: Stream API is not supported in this browser"
        }
      }

    }
	},
  mounted: function () {
  	console.log("Decode mounted");
  }
});

new Vue({
	el: "#slides",
  mounted: function () {
  	console.log("Vue Mounted");
  }
});