Javascript zxing二维码阅读器-视频画布冻结在手机的第一帧上

下面的代码在桌面上运行良好，可以按预期扫描二维码

const qr = 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");
const captureButton = document.getElementById("Capture");


let scanning = false;

qr.callback = res => {
  if (res) {
    var capture = document.getElementById("Capture");
    outputData.innerText = res;
    scanning = false;

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

    qrResult.hidden = false;
    canvasElement.hidden = true;
//    btnScanQR.hidden = false;
    capture.style.display = 'none';
  }
};

btnScanQR.onclick = () => {
//  var capture = document.getElementById("Capture");
  navigator.mediaDevices
    .getUserMedia({ video: { facingMode: "environment" } })
    .then(function(stream) {
      scanning = true;
      qrResult.hidden = true;
      btnScanQR.style.display = 'none';
      canvasElement.hidden = false;
//      capture.style.display = 'block';
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.setAttribute("autoplay", true); 
      video.setAttribute("muted", true); 
      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);
  }
}

当我尝试在手机上访问网站时，第一帧后相机会冻结，然后崩溃。 其他线程说，以确保自动播放和静音设置的视频元素，但这并不适用于我。我正在开发safari和chrome

如果你还有问题，我可以回答