docs: rename "Decode All" demo to "Handle Errors"

The demo already is focused on error handling because it renders
the error message instead of just printing them to the console,
which is particularly useful on mobile devices. Renaming the demo
emphasizes that and hints user to use this demo for debugging.

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

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/config.ts

@@ -27,8 +27,8 @@ export default withPwa(defineConfig({
           link: '/demos/Simple'
         },
         {
-          text: 'Decode Continuously',
-          link: '/demos/DecodeAll'
+          text: 'Handle Errors',
+          link: '/demos/HandleErrors'
         },
         {
           text: 'Visual Tracking',

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

src/misc/camera.ts

@@ -84,7 +84,7 @@ export async function start(
 
   await Promise.race([
     eventOn(videoEl, 'loadeddata'),
-    timeout(3000).then(() => { throw new StreamLoadTimeoutError() })
+    timeout(10).then(() => { throw new StreamLoadTimeoutError() })
   ])
 
   // According to: https://oberhofer.co/mediastreamtrack-and-its-capabilities/#queryingcapabilities