vue 实现扫二维码功能

最新推荐文章于 2025-06-10 09:27:08 发布

weixin_34254823

最新推荐文章于 2025-06-10 09:27:08 发布

阅读量1.5w

点赞数

文章标签： javascript 前端 ViewUI

本文介绍了如何在 Vue 项目中实现扫二维码功能，由于直接使用 getUserMedia 存在兼容性问题，作者选择了通过 h5plus 进行实现，并提供了 QrScanner.vue 组件的使用说明和实际效果展示。

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

前段时间一直在研究，如何通过 vue 调用相机实现扫一扫的功能，但是查看文档发现，需要获取 getUserMedia 的属性值，但存在兼容性问题。

退而求其次，通过 h5plus 来实现。

1.QrScanner.vue

<!-- 扫描二维码 20180109 -->
<template>
  <div>
    <!-- 内容部分 -->
    <video id="qr-vedio" class="v" autoplay=""></video>
    <canvas id="qr-canvas" width="800" height="600" style="width: 800px; height: 600px;display:none;"></canvas>
    <p v-show="result != ''">{
    
    {result}}</p>
    <p v-show="errorMes != ''">{
    
    {errorMes}}</p>
  </div>
</template>

<script>
  export default {
    props: {
      //
    },
    data () {
      return {
        vedio: '',
        canvas: '',
        context: '',
        stopScan: null,
        errorMes: '',
        result: ''
      }
    },
    mounted(){
      console.log(1);
      var