-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
Description
Describe the bug
"Failed to fetch" display appears in vue
Expected behavior
I hope this error doesn't appear in the browser console
Screenshots

Desktop (please complete the following information):
- Browser [e.g. chrome]
- Version [all]
Additional context
My code is as follows:
const that = this
Html5Qrcode.getCameras()
.then((devices) => {
if (devices && devices.length) {
const html5QrCode = new Html5Qrcode('reader', { formatsToSupport: [Html5QrcodeSupportedFormats.QR_CODE, Html5QrcodeSupportedFormats.DATA_MATRIX] })
this.html5QrCode = html5QrCode
const width = window.innerWidth
const height = window.innerHeight
const aspectRatio = width / height
const reverseAspectRatio = height / width
const mobileAspectRatio =
reverseAspectRatio > 1.5
? reverseAspectRatio + (reverseAspectRatio * 12) / 100
: reverseAspectRatio
html5QrCode
.start(
{ facingMode: { exact: 'environment' } },
{
fps: 2, // Optional, frame per seconds for qr code scanning
aspectRatio: aspectRatio + 1,
qrbox: { width: 300, height: 300 }, // Optional, if you want bounded box UI
videoConstraints: {
facingMode: 'environment',
aspectRatio:
width < 600 ? mobileAspectRatio : aspectRatio,
},
},
async (decodedText, decodedResult) => {
const mac = decodedText
if (mac) {
that.tipMsg = '扫码成功';
} else {
that.tipMsg = '扫码失败';
}
}
)
.catch((err) => {
// Start failed, handle it.
console.log('Start failed, handle it.')
})
}
})
.catch((err) => {
if (err.name === 'NotAllowedError') {
that.tipMsg = '您需要授予相机访问权限';
that.disCamera = true;
} else if (err.name === 'NotFoundError') {
that.tipMsg = '此设备上没有摄像头';
} else if (err.name === 'NotSupportedError') {
that.tipMsg = '需要安全上下文(HTTPS)';
} else if (err.name === 'NotReadableError') {
that.tipMsg = '相机已经在使用';
} else if (err.name === 'OverconstrainedError') {
that.tipMsg = '安装的摄像头不合适';
} else if (err.name === 'StreamApiNotSupportedError') {
that.tipMsg = '调用摄像头失败'; //此浏览器不支持流API
} else if (err.name === 'InsecureContextError') {
that.tipMsg = '调用摄像头失败';
} else {
that.tipMsg = err.message;
}
})
Metadata
Metadata
Assignees
Labels
No labels