H5 移动端二维码扫描

最新推荐文章于 2025-05-03 14:32:30 发布

原创

最新推荐文章于 2025-05-03 14:32:30 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #html5 #javascript

本文介绍了如何在H5移动端实现二维码扫描功能，利用jsQR库结合视频流和canvas进行实时截图解析。虽然识别率有限，但对于部分开发需求已足够。若需更精确识别，推荐使用dynamsoft库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5 移动端二维码扫描-附加扫描样式

依赖包jsQR
思路：通过浏览器获取视频流播放在video当中，然后设置定时器截取视频流绘制在canvas中，使用canvas获取到图片信息，再使用jsQR解析二维码。
由于开源二维码解析库识别率不高特别模糊的二维码识别率较低可满足部分开发需求，如需要更加精确推荐dynamsoft
dynamsoft demo地址：https://demo.dynamsoft.com/Samples/DBR/JS/2.ui-tweaking/3.read-video-with-external-control.html?ver=latest

<template>
  <div class="test">
    <div class="fixBox">
      <div
        class="iconBox"
        @click="
          () => {
   
   
            this.$router.history.go(-1);
          }
        "
      >
        <i class="iconfont icon-fanhuitubiao"></i>
      </div>
      <div class="videoBox">
        <div class="outVideo" v-if="isAnimation">
          <video
            autoPlay
            ref="outVideo"
            webkit-playsinline
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x-webkit-airplay="true"
            playsinline
            v-if="!trueFlag"
            id="myVideo"
          ></video>
        </div>
        <div class="codebg" v-if="!trueFlag">
          <div class="line"></div>
        </div>
        <canvas
          id="qr-canvas"
          style="width:6rem;height:6rem;"
          ref="canvas"
        ></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import jsQR from "jsqr";
export default {
   
   
  data() {
   
   
    return {
   
   
      photoBase: "",
      trueFlag: false,
      isAnimation: true
    };
  },
  mounted() {
   
   
    this.outvideo = this.$refs.outVideo;
    this.cvsele = this.$refs.canvas;
    this.canvas = this.cvsele.getContext("2d");
    this.video = document.createElement("video");
    this.$nextTick(() => {
   
   
      this.getVideo();
    });
  },
  methods: {
   
   
    getVideo() {
   
   
      let self