vue-qrcode-reader icon indicating copy to clipboard operation
vue-qrcode-reader copied to clipboard

QrcodeCapture decode fails in Firefox & Safari

Open RomanSmolka opened this issue 3 years ago • 5 comments

Describe the bug In Firefox and Safari QrcodeCapture does not work. By logging errors from the detect event handler, it looks like the issue is the unsupported OffscreenCanvas interface. This is the error message: ReferenceError: OffscreenCanvas is not defined

Still works in Chrome.

Can be reproduced on this demo page

Desktop:

  • OS: iOS, macOS
  • Browser: Safari 14.0.3, Firefox 90

Smartphone:

  • Device: iPhone 8
  • OS: iOS 14
  • Browser: Safari

RomanSmolka avatar Jun 09 '21 12:06 RomanSmolka

Thanks! I think I fixed it in v3.0.2. Can you confirm?

gruhn avatar Jun 10 '21 20:06 gruhn

Firefox works, but Safari is now throwing similar error: ReferenceError: Can't find variable: ImageBitmap

RomanSmolka avatar Jun 10 '21 23:06 RomanSmolka

Next try: v3.0.3. I can't reproduce the error in Safari anymore but it doesn't seem to work either.

gruhn avatar Jun 14 '21 21:06 gruhn

Hi @gruhn, In Safari and Chrome it's throwing this error TypeError: undefined is not an object (evaluating 't.data') when decoding. So far I've only tested it on Safari, but I'll test it in other browsers.

The try block runs to a certain point, but after a few seconds it's falling into the catch block

async onDetect(result) {
      try {
        const { content } = await result
        this.code = content
        await this.$axios
          .$post('/attendance', {
            social_id: this.social_id,
            dob: this.dob,
            code: this.code,
          })
          .then((response) => {
            this.$router.push({
              name: 'ShowAttendance',
              params: { id: response.data.attendance.id },
            })
        })
        .catch((err) => {
          this.$toast.error(err.data.message)
        })
      } catch (err) {
        console.log(err)
      }
    },

If you already have a solution, can you tell me where I can find it. If you need more details a can try to provide for you

Devices

  • iPhone 8
  • iPad 7

tiagokriok avatar Sep 15 '21 14:09 tiagokriok

  • In Firefox, we get this TypeError
  • track.getCapabilities is not a function

aniketicloud avatar Aug 18 '22 07:08 aniketicloud

This issue has been marked as stale. If there is no further activity it will be closed.

github-actions[bot] avatar Jul 25 '23 00:07 github-actions[bot]