gruhn / vue-qrcode-reader

A set of Vue.js components for detecting and decoding QR codes.
https://gruhn.github.io/vue-qrcode-reader
MIT License
2.03k stars 330 forks source link

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

Closed gruhn closed 11 months ago

gruhn commented 11 months ago

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 PR:

  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 https://github.com/gruhn/vue-qrcode-reader/issues/298

netlify[bot] commented 11 months ago

Deploy Preview for vue-qrcode-reader ready!

Name Link
Latest commit 4c8b6c5e9e6e65f6f27c7b127dde8bef2d28c3e9
Latest deploy log https://app.netlify.com/sites/vue-qrcode-reader/deploys/64b6c9ac4bf7d30008d6d3d8
Deploy Preview https://deploy-preview-351--vue-qrcode-reader.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions[bot] commented 11 months ago

:tada: This PR is included in version 5.1.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: