H5 移动端二维码扫描

本文介绍了如何在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 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值