feat(QrcodeStream): throw timeout error when camera won't load

On iOS devices in PWA mode, QrcodeStream works initially, but after
killing and restarting the PWA, all video elements fail to display
camera streams. Looks like this is related to this WebKit issue:

  https://bugs.webkit.org/show_bug.cgi?id=252465

No workarounds at the time of writing. But as suggested in the
thread we can put a timeout on the video elements to start loading.
That way we can at least detect when the error occurs and throw an
error event.

Also this commit:

 1. Makes the demo page PWA installable to reproduce this problem.
 2. Renames the "DecodeAll" demo to "HandleErrors". The demo already
    is focused on error handling because it renders the error message
    instead of just printing to the console, which is particularly
    useful on mobile devices. Renaming the demo emphasizes that and
    hints user to use this demo for debugging.

See #298

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,7 +8,7 @@ assignees: ''
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is. Can you reproduce this issue with [one of the demos](https://vue-qrcode-reader.netlify.app/demos/DecodeAll.html)?
+A clear and concise description of what the bug is. Can you reproduce this issue with [one of the demos](https://vue-qrcode-reader.netlify.app/demos/HandleErrors.html)?
 
 **To Reproduce**
 Please provide a link to a minimal reproduction of the bug. For example on jsFiddle, CodePen, etc. Please don't attach a ZIP file with your entire code base. I know this is additional effort but if it takes too much time to reproduce your issue you'll likely won't get help at all.

.gitignore

@@ -142,6 +142,7 @@ out
 # Nuxt.js build / generate output
 .nuxt
 dist
+dev-dist
 
 # Gatsby files
 .cache/

CONTRIBUTING.md

@@ -9,11 +9,11 @@ Clone the repository and run
 npm install
 ```
 
-We use a locally served version of the [demo page](https://vue-qrcode-reader.netlify.app/demos/DecodeAll.html) during development. 
+We use a locally served version of the [demo page](https://vue-qrcode-reader.netlify.app/) during development. 
 To get that started run
 
 ```
-npm run dev
+npm run docs:dev
 ```
 
 ### Commit Messages

README.md

@@ -53,7 +53,7 @@
 
   <br>
   <br>
-  <a href="https://vue-qrcode-reader.netlify.app/demos/DecodeAll.html">live demos</a> |
+  <a href="https://vue-qrcode-reader.netlify.app/demos/CustomTracking.html">live demos</a> |
   <a href="https://vue-qrcode-reader.netlify.app/api/QrcodeStream.html">api reference</a>
 </p>
 
@@ -147,9 +147,11 @@ Use kebab-case to reference them in your templates:
 
 #### I don't see the camera when using `QrcodeStream`.
 
-- Check if it works on the demo page. Especially the [Decode All](https://vue-qrcode-reader.netlify.app/demos/DecodeAll.html) demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.
-  - The demo works but it doesn't work in my project: Listen for the `init` event to investigate errors.
-  - The demo doesn't work: Carefully review the Browser Support section above. Maybe your device is just not supported.
+- Check if it works on the demo page. Especially the [Handle Errors](https://vue-qrcode-reader.netlify.app/demos/HandleErrors.html) demo, 
+  since it renders error messages. 
+  - The demo works but it doesn't work in my project: Listen for the `error` event to investigate errors.
+  - The demo doesn't work: Carefully review the Browser Support section above. 
+    Maybe your device is just not supported.
 
 #### I'm running a dev server on localhost. How to test on my mobile device without HTTPS?
 

docs/.vitepress/components/demos/DecodeAll.vue → docs/.vitepress/components/demos/HandleErrors.vue

@@ -28,23 +28,24 @@ const onDetect = detectedCodes => {
 }
 
 const onError = err => {
+  error.value = `[${err.name}]: `
+
   if (err.name === 'NotAllowedError') {
-    error.value = 'ERROR: you need to grant camera access permission'
+    error.value += 'you need to grant camera access permission'
   } else if (err.name === 'NotFoundError') {
-    error.value = 'ERROR: no camera on this device'
+    error.value += 'no camera on this device'
   } else if (err.name === 'NotSupportedError') {
-    error.value = 'ERROR: secure context required (HTTPS, localhost)'
+    error.value += 'secure context required (HTTPS, localhost)'
   } else if (err.name === 'NotReadableError') {
-    error.value = 'ERROR: is the camera already in use?'
+    error.value += 'is the camera already in use?'
   } else if (err.name === 'OverconstrainedError') {
-    error.value = 'ERROR: installed cameras are not suitable'
+    error.value += 'installed cameras are not suitable'
   } else if (err.name === 'StreamApiNotSupportedError') {
-    error.value = 'ERROR: Stream API is not supported in this browser'
+    error.value += 'Stream API is not supported in this browser'
   } else if (err.name === 'InsecureContextError') {
-    error.value =
-      'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
+    error.value += 'Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'
   } else {
-    error.value = `ERROR: Camera error (${err.name})`
+    error.value += err.message
   }
 }
 </script>

docs/.vitepress/components/demos/SwitchCamera.vue

@@ -69,7 +69,7 @@ button {
   top: 10px;
 }
 button img {
-  with: 50px;
+  width: 50px;
   height: 50px;
 }
 .error {

docs/.vitepress/components/demos/Torch.vue

@@ -52,7 +52,7 @@ button {
   top: 10px;
 }
 button img {
-  with: 50px;
+  width: 50px;
   height: 50px;
 }
 .error {

docs/.vitepress/config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vitepress'
+import { withPwa } from '@vite-pwa/vitepress'
 
-export default defineConfig({
-  // base: '/vue-qrcode-reader/',
+export default withPwa(defineConfig({
   description: 'A set of Vue.js components for detecting and decoding QR codes.',
   lang: 'en-US',
   lastUpdated: true,
@@ -27,8 +27,8 @@ export default defineConfig({
           link: '/demos/Simple'
         },
         {
-          text: 'Decode Continuously',
-          link: '/demos/DecodeAll'
+          text: 'Handle Errors',
+          link: '/demos/HandleErrors'
         },
         {
           text: 'Visual Tracking',
@@ -105,5 +105,38 @@ export default defineConfig({
         '@': __dirname
       }
     }
-  }
-})
+  },
+  pwa: {
+    mode: 'development',
+    base: '/',
+    scope: '/',
+    registerType: 'autoUpdate',
+    // injectRegister: 'inline',
+    includeAssets: ['favicon.svg'],
+    manifest: {
+      name: 'Vue Qrcode Reader',
+      short_name: 'Vue QR',
+      theme_color: '#10b981',
+      icons: [
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        }
+      ],
+    },
+    workbox: {
+      globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
+    },
+    devOptions: {
+      enabled: true,
+      suppressWarnings: true,
+      navigateFallback: '/',
+    },
+  },
+}))

docs/demos/DecodeAll.md → docs/demos/HandleErrors.md

@@ -1,17 +1,17 @@
-# Decode Continuously
+# Handle Errors
 
 Hold a QR code in the camera and see what happens. Note, you can't scan the same
 QR code multiple time in a row.
 
 <ClientOnly>
-  <DemoWrapper :component="DecodeAll" />
+  <DemoWrapper :component="HandleErrors" />
 </ClientOnly>
 
 <script setup lang="ts">
 import DemoWrapper from '@/components/DemoWrapper.vue'
-import DecodeAll from '@/components/demos/DecodeAll.vue'
+import HandleErrors from '@/components/demos/HandleErrors.vue'
 </script>
 
 ### Source
 
-<<< @/.vitepress/components/demos/DecodeAll.vue
+<<< @/.vitepress/components/demos/HandleErrors.vue

package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@tsconfig/node20": "1.0.1",
     "@types/node": "20.3.1",
+    "@vite-pwa/vitepress": "^0.2.0",
     "@vitejs/plugin-vue": "4.2.3",
     "@vue/compiler-sfc": "3.3.4",
     "@vue/eslint-config-prettier": "7.1.0",
@@ -60,7 +61,8 @@
     "vite-plugin-dts": "2.3.0",
     "vitepress": "1.0.0-beta.2",
     "vue": "3.3.4",
-    "vue-tsc": "1.6.5"
+    "vue-tsc": "1.6.5",
+    "workbox-window": "^7.0.0"
   },
   "bugs": "https://github.com/gruhn/vue-qrcode-reader/issues",
   "homepage": "https://vue-qrcode-reader.netlify.app",