それでも好きです。。。

QR コードライブラリは jsqrcode を使用。 https://github.com/LazarSoft/jsqrcode

<video id="camera" style="width: 480px; height: 640px; border: 1px solid #a0a0a0;"></video>
<div id="debug">DEBUG</div>
<button id="start">START</button> / <button id="stop">STOP</button>
<img src="" width="240" height="320" id="thumb" />
<script src="common/jsqrcode/src/grid.js"></script>
<script src="common/jsqrcode/src/version.js"></script>
<script src="common/jsqrcode/src/detector.js"></script>
<script src="common/jsqrcode/src/formatinf.js"></script>
<script src="common/jsqrcode/src/errorlevel.js"></script>
<script src="common/jsqrcode/src/bitmat.js"></script>
<script src="common/jsqrcode/src/datablock.js"></script>
<script src="common/jsqrcode/src/bmparser.js"></script>
<script src="common/jsqrcode/src/datamask.js"></script>
<script src="common/jsqrcode/src/rsdecoder.js"></script>
<script src="common/jsqrcode/src/gf256poly.js"></script>
<script src="common/jsqrcode/src/gf256.js"></script>
<script src="common/jsqrcode/src/decoder.js"></script>
<script src="common/jsqrcode/src/qrcode.js"></script>
<script src="common/jsqrcode/src/findpat.js"></script>
<script src="common/jsqrcode/src/alignpat.js"></script>
<script src="common/jsqrcode/src/databr.js"></script>
<script>
$(function(){
   let camera = document.getElementById('camera');
   let local_stream;
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
   let timer;
   canvas.width = camera.clientWidth;
   canvas.height = camera.clientHeight;
   
   
   $('button#start').on('click', function(){
      navigator.mediaDevices.getUserMedia({
         audio: false, 
         video: {
            width: 640, 
            height: 480, 
            frameRate: 10, 
            facingMode: { exact: "environment" }
         }
      }).then(function(stream){
         local_stream = stream;
         camera.src = window.URL.createObjectURL(stream);
         camera.onloadedmetadata = function(e){
            camera.play();
            
            timer = setInterval(function(){ draw_canvas(camera, canvas, context) }, 50);
            
         }
      }).catch(function(err){
         return;
         
      });
   });
   
   $('button#stop').on('click', function(){
      if(local_stream){
         local_stream.getVideoTracks()[0].stop(); 
         camera.stop();
         clearInterval(timer);
         timer = undefined;
         local_stream = undefined;
      }
   });
   
});

function draw_canvas(camera, canvas, context){
   let w = camera.clientWidth;
   let h = camera.clientHeight;
   
   context.drawImage(camera, 0, 0, w, h); // copy camera(<video>) to canvas
   
   let thumb = document.getElementById('thumb');
   thumb.src = canvas.toDataURL('image/png');
   
   qrcode.callback = QRCallback;
   qrcode.decode(canvas.toDataURL('image/png'));
   
}

function QRCallback(data){
   $('#debug').html(data);
}

</script>

START ボタンを押すと navigator.mediaDevices.getUserMedia で stream が得られるので、それを <video> の src に window.URL.createObjectURL(stream) で指定。

カメラからの入力の確認だけはこれで済む。

なんかここまで簡単だと逆に不安になる。

タイマーでカメラからの入力を context.drawImage() でスナップショット取る。

canvas.toDataURL('image/png') で画像データを得て qrcode.decode() に渡す。

以上で結果が得られる。