Render video from js into html

March 3, 2024

I’m new here and have a question. How can I render the webcam video from JavaScript into HTML? I want to scan QR-Codes in my browser and while scanning there should be the video from the camera for better user experience (easier to find the qr-code). For scanning the QR-Codes, I use Instascan. My code looks something like this:

HTML:

<div class="video-container">
   <div class="overlay-box">
      <video id="preview"></video>
   </div>
</div>

JavaScript:

let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });

// When starting scanning, activate via css
document.getElementById("preview").style.display = "block";

// When stopping scanning, deactivate via css
document.getElementById("preview").style.display = "none";

I tried without the css stuff, but that was not a problem. It should be a problem with the scanner ig…

Expecting: that it render it into the html file that I can see the camera output while scanning

Thanks for every help!
PS: If it’s an important information (idk); its inside a Django project

>Solution :

if i understood right, you are trying to use the user’s webcam to read the QR code, is that right?
If so, you can try to use the navigator.mediaDevices.getUserMedia() to handle it.
you can have more information about this method here:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia