Я недавно заметил странную вещь в PWA моей компании. После того, как вы используете файл, чтобы сделать снимок, затем вы закрываете (я имею в виду не принудительное закрытие, а просто выход и выход) приложение на 2–3 секунды и вы снова открываете. Если вы попытаетесь снова включить камеру, изображение будет пустым. Это происходит в iOS.
Ребята, вы, ребята, сталкивались с такой вещью сами, и если вы это сделали, можете ли вы предложить какое-то решение? Я думал об использовании WebRT C, но этот хак с входом гораздо удобнее.
Моя камера 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>