Skip to content

"Failed to fetch" display appears in vue #1010

@carpONE

Description

@carpONE

Describe the bug
"Failed to fetch" display appears in vue

Expected behavior
I hope this error doesn't appear in the browser console

Screenshots

Image

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions