Camera not working in PWA after app returns from background in iOS

[tristansb1]

Describe the bug
The camera stops working after the PWA returns form background on my 12 mini. The camera also doesn't work at all on an iPhone 13 (see videos below). App works perfectly fine in Safari. PWA also works fine on Android devices.

To Reproduce
Implement this Demo as PWA: https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html#decode-continuously

<template>
  <div class="scanner">
    <p class="error">{{ error }}</p>

    <p class="decode-result">Last result: <b>{{ error }}</b></p>

    <qrcode-stream @decode="onDecode" @init="onInit" />
  </div>
</template>

<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {

  components: { QrcodeStream },

  data () {
    return {
      result: '',
      error: ''
    }
  },

  methods: {
    onDecode (result) {
      this.result = result
    },

    async onInit (promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          this.error = "ERROR: you need to grant camera access permission"
        } else if (error.name === 'NotFoundError') {
          this.error = "ERROR: no camera on this device"
        } else if (error.name === 'NotSupportedError') {
          this.error = "ERROR: secure context required (HTTPS, localhost)"
        } else if (error.name === 'NotReadableError') {
          this.error = "ERROR: is the camera already in use?"
        } else if (error.name === 'OverconstrainedError') {
          this.error = "ERROR: installed cameras are not suitable"
        } else if (error.name === 'StreamApiNotSupportedError') {
          this.error = "ERROR: Stream API is not supported in this browser"
        } else if (error.name === 'InsecureContextError') {
          this.error = 'ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.';
        } else {
          this.error = `ERROR: Camera error (${error.name})`;
        }
      }
    }
  }
}
</script>

<style scoped>
.error {
  font-weight: bold;
  color: red;
}
.scanner {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
}
</style>

Screenshots
iPhone 12 mini behaviour

ios.mp4

iPhone 13 behaviour

PWA-QR-2.mp4

Smartphone:

• Devices: iPhone 12 mini, iPhone 13
• OS: iOS 15.4.1
• Browser: PWA

[kikan]

It seems there's a dependency to https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js
So, when the device if offline, the dependency can't be reached and the QRCode recognition doesn't work.
I think you need to copy jsQR.min.js somewhere and manage to have it fetched instead of the cdn.

[0tsu0i0ihajime]

I am using PWA in the same way, but when I use it in the background on iOS, I can't re-use the camera and have no choice but to close it and start over again.
I also used jsQR.min.js but that didn't change it. Why is this?

<script src="./jsQR.min.js"></script>

I have this I am incorporating this into the html

[SebastianMueller87]

It seems there's a dependency to https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js So, when the device if offline, the dependency can't be reached and the QRCode recognition doesn't work. I think you need to copy jsQR.min.js somewhere and manage to have it fetched instead of the cdn.

I doubt that it is the reason. The devices are online the whole time. It just occurs when moving the app into background and back forward.
It also behaves differently on different iOS devices (with same iOS-Version), so i would exclude the internet connection and therefore also the cdn as the reason for this.

@0tsu0i0ihajime the error is still not resolved and also the reason has not be found yet.

[0tsu0i0ihajime]

If I do this on a non-cellular model iPad in an environment with Wi-Fi turned off, the camera will stop and not come back on when I move it to the background and then undo it when using PWA.
I was wondering, is it possible that Safari is designed to automatically stop the camera when offline?

[mrrrk]

On an iPhone 12 I was testing on, the PWA app would get in a state where the video element of the reader would refuse to start at all after going into the background and coming back. My eventual workaround had two parts:

In mounted() of the component showing the qr-reader, find the video element of the qr-reader (using getElementsByTagName or whatever), subscribe to the ended event of the video - which seems to fire when the badness happens. Use $router.back() to close the component whenever this fires (this may or may not be appropriate depending on your implementation of the reader!)

Additionally, in the beforeDestroy hook (Vue 2) of the component with the reader, find the video element and do this:

videoElement.pause();
videoElement.src = "";
videoElement.removeAttribute("src"); // can you smell the desperation?
videoElement.load(); // from https://stackoverflow.com/questions/3258587/how-to-properly-unload-destroy-a-video-element
videoElement?.parentNode?.removeChild(this.videoElement);

I was starting to wonder about brushing off my Swift skills, such as they are, and going native at about this point (which presumably is exactly what Apple wants me to do!)

[Jannis033]

I have the same problem, using iOS 16.4 on an iPhone 13. After reopening the app from the background, the camera remains black. The red camera indicator appears in the top left corner and then immediately disappears again. navigator.mediaDevices.getUserMedia() returns successfully…
Even closing the app in the app switcher does not work. Neither does closing all apps, including Safari and all other PWAs (maybe leaving an instance of safari running leads to the issue). Sometimes it fixes itself after a couple minutes.
Restarting my iPhone always fixes the issue, but that’s not how it should be…
Btw. iPadOS 16.4 also has the issue.
Did you come to a solution?

[github-actions]

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

[mattwhitchurch]

Posting to keep the issue open - same issue on iPhone 14. Same issue exactly as Jannis033.