时间戳

首页 > 解决方案 > 未捕获的类型错误：无法设置未定义的属性“回调”

javascript - 未捕获的类型错误：无法设置未定义的属性“回调”

问题描述

所以我最近在https://codesandbox.io/s/qr-code-scanner-ilrm9?file=/index.html找到了一个关于如何读取二维码的简洁示例

当我尝试进行设置时，我似乎总是在控制台中收到错误消息“未捕获的类型错误：无法设置未定义的属性‘回调’”，我不完全确定为什么，特别是上面的示例有效。

这是我到目前为止所拥有的https://jsfiddle.net/snt95wh8/

const qrcode = window.qrcode;

const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");

const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");

let scanning = false;

qrcode.callback = res => {
  if (res) {
    outputData.innerText = res;
    scanning = false;

    video.srcObject.getTracks().forEach(track => {
      track.stop();
    });

    qrResult.hidden = false;
    canvasElement.hidden = true;
    btnScanQR.hidden = false;
  }
};

btnScanQR.onclick = () => {
  navigator.mediaDevices
    .getUserMedia({ video: { facingMode: "environment" } })
    .then(function(stream) {
      scanning = true;
      qrResult.hidden = true;
      btnScanQR.hidden = true;
      canvasElement.hidden = false;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.srcObject = stream;
      video.play();
      tick();
      scan();
    });
};

function tick() {
  canvasElement.height = video.videoHeight;
  canvasElement.width = video.videoWidth;
  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);

  scanning && requestAnimationFrame(tick);
}

function scan() {
  try {
    qrcode.decode();
  } catch (e) {
    setTimeout(scan, 300);
  }
}

任何建议将不胜感激，谢谢。

标签： javascriptqr-code

解决方案

您忘记链接二维码库

有时小提琴不允许相机许可。最好在您的本地主机上尝试

更新小提琴

  <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>

推荐阅读