javascript - iOS 13.3 PWA 上的相机错误

Question

最近我在公司的 PWA 中注意到了一件奇怪的事情。使用文件输入拍照后，关闭(我的意思不是强制关闭，而是只是进出)应用程序 2-3 秒，然后重新打开。如果您再次尝试午餐相机，图像将是空白的。它发生在 iOS 上。

你们自己遇到过这样的事情吗？如果遇到过，您能提出某种解决方案吗？我正在考虑使用 WebRTC，但这种带有输入的 hack 更方便。

我的相机 Vue 组件:

<template>
  <div class="camera-container" :class="{ 'open': open }">
    <div class="panel" v-if="base64Source">
      <div class="title pb-2 text-center">
        {{ title }}
      </div>
      <button @click="upload" class="btn button mt-2">Wyślij i przejdź dalej</button>
      <label for="camera-file-input" class="btn button outlined mt-2">Wykonaj jeszcze raz</label>
      <button @click="cancel" class="btn button outlined mt-2">Anuluj</button>
      <div class="panel">
        <div class="subtitle">Podgląd</div>
        <hr class="hr pt-0 mt-0">
        <img :src="base64Source" alt="Podgląd" class="w-100">
        <div class="row mt-3 mb-0" v-if="fileName">
          <div class="col-6"><label class="">Nazwa dokumentu:</label></div>
          <div class="col-6 mb-0"><label class="">{{ fileName }}</label></div>
        </div>
      </div>
    </div>
    <form v-show="!open" ref="camera-file-input-form" id="camera-file-input-form">
      <label for="camera-file-input" class="button pink btn camera-file-input-label">
        {{ btnName }}
      </label>
      <input v-on:change="imageChanged"
             id="camera-file-input"
             type="file"
             accept="image/x-png,image/jpeg,image/gif"
             capture="environment"
             class="invisible"
      >
    </form>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    btnName: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      open: false,
      fileName: '',
      base64Source: null,
      blobSource: null
    }
  },
  methods: {
    upload () {
      this.$emit('upload', this.blobSource)
      this.clear()
    },
    cancel () {
      this.clear()
    },
    clear () {
      this.$refs['camera-file-input-form'].reset()
      this.base64Source = null
      this.blobSource = null
      this.open = false
    },
    async imageChanged (event) {
      const cameraInput = event.target
      this.open = true
      if (cameraInput.files && cameraInput.files[0]) {
        const file = cameraInput.files[0]
        this.blobSource = file
        this.base64Source = await this.convertToBase64(file)
      }
    },
    convertToBase64 (file) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader()

        if (fileReader && file) {
          fileReader.readAsDataURL(file)
          fileReader.onload = () => {
            resolve(fileReader.result)
          }
          fileReader.onerror = (error) => {
            reject(error)
          }
        } else {
          // eslint-disable-next-line prefer-promise-reject-errors
          reject(null)
        }
      })
    }
  }
}
</script>

Answer 1

我们的用户通常作为 PWA 运行的应用程序也遇到了同样的问题。

此处还有关于同一主题的其他 StackOverflow 线程:

IOS camera returns black screen after leaving pwa
iOS Standalone PWA input capture

此错误也已报告给 webkit:https://bugs.webkit.org/show_bug.cgi?id=206219

不幸的是，除了不允许 iOS 13.2 和 13.3 上的用户将您的应用程序作为 PWA 运行之外，我还没有找到任何人有合适的解决方法。 (在浏览器中运行时不会出现该错误。)