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