How to call the method from canvas using getusermedia

[kundan52]

here is my code but its throwing an error

           <div class="scrollable">
  <div id="loadingMessage">🎥 Unable to access video stream (check your Browser supports WebCam Access!)</div>
    <div id="output" hidden="">
    <div id="outputMessage">No QR code detected.</div>
   <div hidden=""></div>
                            </div>
  <canvas id="qr-canvas" hidden=""></canvas>

                                </div>

and this the method i am calling qrcode.decode("qr-canvas");

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

                // Use facingMode: environment to attemt to get the front camera on phones
                navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: "environment" } } }).then(function(stream) {
                  video.srcObject = stream;
                  video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
                  video.play();
                  requestAnimationFrame(tick);
                  localStream = stream;
                })
                .catch(function(err) {
                    console.log(err);
                      /* handle the error */
                    loader(false)

                });

                function tick() {
                      loadingMessage.innerText = "⌛ Loading video..."
                      if (video.readyState === video.HAVE_ENOUGH_DATA) {
                        loadingMessage.hidden = true;
                        canvasElement.hidden = false;

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

                        var testDataQr = qrcode.decode("qr-canvas");
                        if (testDataQr != undefined) {
                        alert(testDataQr);
                        }else{
                        console.log(testDataQr)
                        }
                      }
                      requestAnimationFrame(tick);
                      function vidOff() {
                            video.pause();
                            video.src = "";
                            video.srcObject.getVideoTracks().forEach(track => track.stop());
                            console.log("camera off");
                        }
                    }

[Adrianilloo]

Well, the decode function uses the qr-canvas element when you don't pass any parameter. If you do, then it treats that argument as an image src string to decode from a temporary Image:

Code involved