Merge branch 'master' into alpha

docs/api/QrcodeStream.md

@@ -9,10 +9,10 @@ This component fundamentally depends on the [Stream API](https://caniuse.com/#fe
 |                                                     No                                                      |                                               Yes                                                |                                                  Yes                                                   |                                                 Yes¹                                                 |                                                 Yes²                                                  |
 
 1. Chrome requires [HTTPS or localhost](https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins) (see _Troubleshooting_ for help)
-2. Safari also requires HTTPS **even** on localhost (see [#48](../../issues/48)). It also won't work in:
-   - _Chrome for iOS_, _Firefox for iOS_, ... (see [#29](../../issues/29))
+2. Safari also requires HTTPS **even** on localhost (see [#48](https://github.com/gruhn/vue-qrcode-reader/issues/48)). It also won't work in:
+   - _Chrome for iOS_, _Firefox for iOS_, ... (see [#29](https://github.com/gruhn/vue-qrcode-reader/issues/29))
    - WkWebView component of native iOS apps
-   - web apps added to home screen (PWA mode) **prior to iOS 13.4** (see [#76](../../issues/76))
+   - web apps added to home screen (PWA mode) **prior to iOS 13.4** (see [#76](https://github.com/gruhn/vue-qrcode-reader/issues/76))
 
 
 ## Events

package.json

@@ -43,6 +43,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
+    "husky": "^4.2.5",
     "lint-staged": "^9.5.0",
     "prettier": "^1.19.1",
     "semantic-release": "^17.1.1",

src/components/QrcodeStream.vue

@@ -1,25 +1,24 @@
 <template lang="html">
-  <div class="wrapper">
+  <div class="qrcode-stream-wrapper">
     <!--
-    Note that the order of DOM elements matters.
-    It defines the stacking order.
-    The first element is at the very bottom, the last element is on top.
-    This eliminates the need for `z-index`.
+    Note, the following DOM elements are not styled with z-index.
+    If z-index is not defined, elements are stacked in the order they appear in the DOM.
+    The first element is at the very bottom and subsequent elements are added on top.
     -->
     <video
       ref="video"
       v-show="shouldScan"
-      class="camera"
+      class="qrcode-stream-camera"
       autoplay
       muted
       playsinline
     ></video>
 
-    <canvas ref="pauseFrame" v-show="!shouldScan" class="pause-frame"></canvas>
+    <canvas ref="pauseFrame" v-show="!shouldScan" class="qrcode-stream-camera"></canvas>
 
-    <canvas ref="trackingLayer" class="tracking-layer"></canvas>
+    <canvas ref="trackingLayer" class="qrcode-stream-overlay"></canvas>
 
-    <div class="overlay">
+    <div class="qrcode-stream-overlay">
       <slot></slot>
     </div>
   </div>
@@ -30,7 +29,7 @@ import { keepScanning } from "../misc/scanner.js";
 import { thinSquare } from "../misc/track-func.js";
 import Camera from "../misc/camera.js";
 import CommonAPI from "../mixins/CommonAPI.vue";
-import Worker from "../worker/jsqr.js";
+import spawnWorker from "../worker/jsqr.js";
 
 export default {
   name: "qrcode-stream",
@@ -59,7 +58,7 @@ export default {
 
     worker: {
       type: Function,
-      default: Worker
+      default: spawnWorker
     }
   },
 
@@ -285,27 +284,28 @@ export default {
 </script>
 
 <style lang="css" scoped>
-.wrapper {
-  position: relative;
-  z-index: 0;
+.qrcode-stream-wrapper {
   width: 100%;
   height: 100%;
+
+  position: relative;
+  z-index: 0;
 }
 
-.overlay,
-.tracking-layer {
-  position: absolute;
+.qrcode-stream-overlay {
   width: 100%;
   height: 100%;
+
+  position: absolute;
   top: 0;
   left: 0;
 }
 
-.camera,
-.pause-frame {
-  display: block;
-  object-fit: cover;
+.qrcode-stream-camera {
   width: 100%;
   height: 100%;
+
+  display: block;
+  object-fit: cover;
 }
 </style>

src/misc/camera.js

@@ -1,7 +1,7 @@
 import { StreamApiNotSupportedError, InsecureContextError } from "./errors.js";
 import { imageDataFromVideo } from "./image-data.js";
 import { eventOn, timeout } from "callforth";
-import shimGetUserMedia from "./shimGetUserMedia"
+import shimGetUserMedia from "./shimGetUserMedia";
 
 class Camera {
   constructor(videoEl, stream) {
@@ -81,14 +81,14 @@ export default async function(videoEl, { camera, torch }) {
 
   // This is a browser API only shim. It patches the global window object which
   // is not available during SSR. So we lazily apply this shim at runtime.
-  await shimGetUserMedia()
+  await shimGetUserMedia();
 
   const constraints = {
     audio: false,
     video: {
       width: { min: 360, ideal: 640, max: 1920 },
       height: { min: 240, ideal: 480, max: 1080 },
-      ...(await narrowDownFacingMode(camera)),
+      ...(await narrowDownFacingMode(camera))
     }
   };
 

src/misc/scanner.js

@@ -1,7 +1,7 @@
 import { eventOn } from "callforth";
 
-export async function scan(Worker, imageData) {
-  const worker = new Worker();
+export const scan = async (spawnWorker, imageData) => {
+  const worker = spawnWorker();
 
   worker.postMessage(imageData, [imageData.data.buffer]);
 
@@ -16,14 +16,14 @@ export async function scan(Worker, imageData) {
  * Continuously extracts frames from camera stream and tries to read
  * potentially pictured QR codes.
  */
-export function keepScanning(Worker, camera, options) {
+export const keepScanning = (spawnWorker, camera, options) => {
   const { detectHandler, locateHandler, minDelay } = options;
 
   let contentBefore = null;
   let locationBefore = null;
   let lastScanned = performance.now();
 
-  const worker = new Worker();
+  const worker = spawnWorker();
 
   // If worker can't process frames fast enough, memory will quickly full up.
   // Make sure to process only one frame at a time.