<div style="text-align: center;">
    <video id="video_id" width="300" height="300" autoplay="1" playsinline></video>

    <div style="display:none">
      <canvas id="canvas_id"></canvas>
    </div>

    <div id="message_id"></div>
  </div>

<script type="text/javascript" src="jsqrcode/grid.js"></script>
（同様に、jsqrcodeのgitページに記載の通り、必要なjsを全部取り込む。）

<script>
  // HTML要素群。この'idToken2'が、読み取った値の格納先
  const const_resultArea = document.getElementById('idToken2');
  const const_video = document.getElementById('video_id');
  const const_canvas = document.getElementById('canvas_id');
  const const_messageDiv = document.getElementById('message_id');

  // 連続失敗カウンタ
  let let_failureCounter = 0;

  // カメラを見つけてストリームをセット
  // （スマホで内向きカメラが選ばれないよう、外向きカメラをideal指定する）
  if (!navigator.mediaDevices.getUserMedia) {
    alert("This browser may not handle HTML5_UserMedia.  Please try other browers.");
  } else {
    navigator.mediaDevices.getUserMedia(
      { video: { facingMode: { ideal: 'environment' } }, audio: false }
    ).then(
      function(stream) { const_video.srcObject = stream; },
      function() { alert("Error... Cannot get video stream..."); }
    );
  }

  // 読み取り結果を処理。
  // （失敗の判定が雑な感じだが、ひとまずお試しとしてこれで動かす。）
  qrcode.callback = function(decodedInformation) {
    if (!decodedInformation ||
        decodedInformation === "error decoding QR Code" ||
        decodedInformation === "Failed to load the image") {
      let_failureCounter++;
      const_messageDiv.textContent = "QR Read : Failed... " + let_failureCounter;
    } else {
      let_failureCounter = 0;
      const_resultArea.value = decodedInformation;
      const_messageDiv.textContent = "QR Read : Succeeded!!";
    }
  };

  // 画像化＆QRコード読み取りを1回実施
  function decodeOneTime() {
    const_canvas.setAttribute("width", const_video.videoWidth);
    const_canvas.setAttribute("height", const_video.videoHeight);
    const const_canvas_context = const_canvas.getContext('2d');
    const_canvas_context.drawImage(const_video, 0, 0, const_video.videoWidth, const_video.videoHeight);

    if (const_canvas_context) {
      qrcode.decode(const_canvas.toDataURL('image/png'));
    }
  }

  // 毎秒処理する
  setInterval(decodeOneTime, 1000);
</script>