将js中的视频渲染成html

Question

我是新来的，有一个问题。如何将 JavaScript 中的网络摄像头视频渲染为 HTML？我想在浏览器中扫描二维码，扫描时应该有摄像头的视频，以获得更好的用户体验（更容易找到二维码）。为了扫描二维码，我使用 Instascan。我的代码看起来像这样：

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";

我尝试不使用 css 东西，但这不是问题。应该是扫描仪ig的问题...

期望：它将其渲染到 html 文件中，我可以在扫描时看到相机输出

感谢您的每一次帮助！ PS：如果是重要信息（idk）；它位于 Django 项目内部

Answer 1

如果我没理解错的话，您正在尝试使用用户的网络摄像头来读取二维码，对吗？ 如果是这样，你可以尝试使用

navigator.mediaDevices.getUserMedia()

来处理。 您可以在此处了解有关此方法的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia