feat: fallback for old mobile devices

Create dedicated component based on HTML Media Capture. Instead
of continiously scanning a camera stream, mobile devices can take
a single picture to be uploaded. Also allows classic file upload
which can also serve desktop devices.

See #63 #56

Author: gruhn

src/components/QrcodeCapture.vue

@@ -0,0 +1,39 @@
+<template lang="html">
+  <input
+    @change="onChangeInput"
+    type="file"
+    name="image"
+    accept="image/*"
+    capture="environment"
+    multiple>
+</template>
+
+<script>
+import { scan } from '../misc/scanner.js'
+import { imageDataFromFile } from '../misc/image-data.js'
+import CommonAPI from '../mixins/CommonAPI.vue'
+
+export default {
+
+  mixins: [ CommonAPI ],
+
+  methods: {
+    onChangeInput (event) {
+      const files = [...event.target.files]
+      const resultPromises = files.map(this.processFile)
+
+      resultPromises.forEach(this.onDetect)
+
+      console.log(Promise.all(resultPromises))
+    },
+
+    async processFile (file) {
+      const imageData = await imageDataFromFile(file)
+      const scanResult = await scan(imageData)
+
+      return { source: 'file', ...scanResult }
+    },
+  },
+
+}
+</script>

src/index.js

@@ -1,14 +1,18 @@
 import QrcodeReader from './components/QrcodeReader.vue'
+import QrcodeCapture from './components/QrcodeCapture.vue'
 // import QrcodeDropZone from './components/QrcodeDropZone.vue'
 
 // Install the components
 export function install (Vue) {
   Vue.component('qrcode-reader', QrcodeReader)
+  Vue.component('qrcode-capture', QrcodeCapture)
+  // Vue.component('qrcode-drop-zone', QrcodeDropZone)
 }
 
 // Expose the components
 export {
   QrcodeReader,
+  QrcodeCapture,
   // QrcodeDropZone,
 }