web端实现二维码扫码记录

最新推荐文章于 2025-08-20 14:56:02 发布

原创

最新推荐文章于 2025-08-20 14:56:02 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #css

本文介绍了如何在web端实现二维码扫描功能，通过引入reqrcode.js库，并提供了关闭摄像头及模拟微信扫描的CSS样式方法。

web端实现二维码扫描功能

引入reqrcode.js https://gitee.com/weijunw/erweima/blob/master/erweima-jiexi-demo/reqrcode.js

 <canvas
    id="qr-canvas"
    width="800"
    height="600"
    style="width: 200px; height: 200px; display: none"
  ></canvas>
  <div class="code-bg">
    <video
      ref="video"
      controls="controls"
      id="video"
      preload="auto"
      autoplay
    ></video>
    <div class="line"></div>
  </div>
  mounted() {
   
   
    this.canvas = document.getElementById("qr-canvas");
    this.context = this.canvas.getContext("2d");
    this.getVideo();
  },
  getVideo() {
   
   
      let self = this;
      navigator.getUserMedia =
        n