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

.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",