vue 浏览器识别二维码功能 pc和手机端

最新推荐文章于 2024-08-19 18:48:10 发布
最新推荐文章于 2024-08-19 18:48:10 发布
阅读量905 收藏 12
点赞数 10
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyzcxy/article/details/135691263
版权

前言：一定是https协议，一定是https协议，一定是https协议，识别的是二维码。条形码估计不太行（因为太小了）
1：安装 "@zxing/library": "^0.20.0",
npm install @zxing/library --save (最好别用cnpm)
或
yarn add @zxing/library


2：上代码  (我这是放在弹窗里面了)  openScan:初始化的方法
        先看看你们的协议是http的还是https的
        一定是https协议 
        一定是https协议
        一定是https协议
        不然摄像头会报错，原因是因为会被浏览器认为是不安全的操作  
        <button @click="scan"></button>        
        <scanIndex ref="scanIndex"></scanIndex>
        methods:{

                scan(){  
                        this.$refs.scanIndex.title= "测试";

                        this.$refs.scanIndex.dialogAddVisible = true;

                        this.$refs.scanIndex.openScan();

                },

        }        
        

<template>
  <el-dialog :class="{dialogClass:dialogWidth=='100%'}" title="提示" :visible.sync="dialogAddVisible" :width="dialogWidth" @close="resetScan">
    <span slot="title">{{ title }}</span>
    <div class="dashboard-container" style="position: relative">
      <!-- <div class="dashboard-text">name: {{ name }}</div> -->
      <!-- 提示语 -->
      <!-- <div v-show="tipShow" class="scan-tip">{{ tipMsg }}</div> -->
      <!-- 扫码区域 -->
      <video
        style="object-fit:fill;"
        ref="video"
        id="video"
        class="scan-video"
        :width="videoWidth"
        :height="videoHeight"
        autoplay
      ></video>
      <div class="qr-scanner">
        <div class="box">
          <div class="line"></div>
          <div class="angle"></div>
        </div>
      </div>
      <!-- <div >{{scanText}}</div> -->
    </div>
  </el-dialog>
</template>
<script>
import { BrowserMultiFormatReader } from "@zxing/library";
export default {
  name: "Dashboard",
  computed: {},
  props: ["title"],
  data() {
    return {
      dialogAddVisible: false,
      codeReader: null,
      scanText: "", // 扫码结果文本内容
      dialogWidth:"60%",
      videoWidth:"100%",
      videoHeight:"100%",
    };
  },
  created() {
    // 移动端
    console.log(this.IsPhone())
    if(this.IsPhone()!=null){
      this.dialogWidth="100%"
      // this.videoWidth="300"
      this.videoHeight="450"
    }else{
      this.dialogWidth="60%"
    }
     
  },
  destroyed() {
      this.resetScan();
  },
    methods: {
      IsPhone() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)

        //如果包含“Mobile”（是手机设备）则返回true
        return flag;
      },
        resetScan() { 
            // this.codeReader.hasNavigator=false;
        // console.log(this.codeReader)
        if (this.codeReader) {
          this.codeReader?.reset();
            this.codeReader = null;
         }
            
        },
    async openScan() {
      let that = this; // 初始化摄像头
      this.codeReader = new BrowserMultiFormatReader();
      this.codeReader
        .getVideoInputDevices()
        .then((videoDevices) => {
          that.$message({ type: "success", message: "正在调用摄像头..." });
          //   that.tipShow = true;
          //   console.log("get-videoDevices", videoDevices);

          // 默认获取摄像头列表里的最后一个设备id，通过几部测试机发现一般前置摄像头位于列表里的前面几位，所以一般获取最后一个的是后置摄像头
          let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;
          // 一般获取了手机的摄像头列表里不止一个，有的手机摄像头高级多层，会有变焦摄像头等情况，需要做处理
          if (videoDevices.length > 1) {
            // 一般通过判断摄像头列表项里的 label 字段，'camera2 0, facing back' 字符串含有 'back' 和 '0'，大部分机型是这样，如果有些机型没有，那就还是默认获取最后一个
            firstDeviceId = videoDevices.find((el) => {
              return (
                el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1
              );
            })
              ? videoDevices.find((el) => {
                  return (
                    el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1
                  );
                }).deviceId
              : videoDevices[videoDevices.length - 1].deviceId;
          }
          //   console.log("get-firstDeviceId", firstDeviceId);
          this.decodeFromInputVideoFunc(firstDeviceId);
        })
        .catch((err) => {
          //   this.tipShow = false;
          // console.error(err);
          that.$message.error(err);
        });
    },
    decodeFromInputVideoFunc(firstDeviceId) {
      let that = this; // 使用摄像头扫描
      // this.codeReader.reset(); // 重置
      setTimeout(() => {
        that.$message({ type: "primary", message: "正在尝试识别..." });
      }, 1000);
      this.codeReader.decodeFromInputVideoDeviceContinuously(
        firstDeviceId,
        "video",
        (result, err) => {
          // that.$message({type:"primary",message:"正在尝试识别..."});
          //   that.tipMsg = "";
          if (result) {
            that.scanText = result.text;
            if (that.scanText) {
              //   this.tipShow = false;
              // that.$alert(that.scanText, '扫码结果', {
              //     confirmButtonText: '确定',
              //     callback: action => {
              //         // that.$destroy();
              //     }
              // });
                that.resetScan();
              that.$emit("updateForm", that.scanText);
              that.dialogAddVisible = !that.dialogAddVisible;
            }
          }
        }
      );
    },
    // clickIndexLeft(){  // 返回上一页
    //   this.$destroy();
    //   this.$router.go(-1);
    //   // window.location.href = document.referrer;
    // }
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
#video {
  //   width: 100%;
}
.dialogClass /deep/ .el-dialog__body{
  padding:0;
}
.dialogClass /deep/ .dashboard-container{
  margin: 0px;
}
.qr-scanner {
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      rgba(32, 255, 77, 0.1) 25%,
      rgba(32, 255, 77, 0.1) 26%,
      transparent 27%,
      transparent 74%,
      rgba(32, 255, 77, 0.1) 75%,
      rgba(32, 255, 77, 0.1) 76%,
      transparent 77%,
      transparent
    );
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  // background-color: #111;
}

.qr-scanner .box {
  width: 75%;
  height: 75%;
  max-height: 75%;
  max-width: 75%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
}

.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;
  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>

3：效果图
PC端
 

为啥是黑的，因为

手机端 

4：结果 result.text是识别成功后的结果 可自行更改

原来我认识你
关注
vue3+jsQr实现手机浏览器调用本地摄像头扫描并识别二维码
一只爱吃糖的小羊
06-16 5413
功能：移动端浏览器调用本地摄像头，扫描并识别二维码，支持安卓手机、苹果手机常见浏览器。 技术栈： Vue 3 + TypeScript + Vite + jsQr + arco-design（UI组件，可以根据需要改成自己需要的）
前端实现很哇塞的浏览器端扫码功能
dragonir
10-14 2759
背景 不久前我做了关于获取浏览器摄像头并扫码识别的功能，本文中梳理了涉及到知识点及具体代码实现，整理成此篇文章内容。 本文主要介绍，通过使用基于 vue 技术栈的前端开发技术，在浏览器端调起摄像头 ????，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理。本文内容分为背景介绍、实现效果、技术简介、代码实现、总结等部分组成。 实现效果 本实例中主要有两个页面首页和扫码页，具体实现效果如下图所示。 首页：点击 SCAN QRCODE 按钮，进入到扫码页。 扫码页：首次进入时，或弹出 获取摄像头访问
Vue实现手机扫描二维码预览页面效果
10-15
主要为大家详细介绍了Vue实现手机扫描二维码预览页面效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue2 实现解析二维码图片/二维码图片链接，区分企业微信二维码、个人微信二维码
yayaye717的博客
08-19 1212
vue2 实现解析二维码图片/二维码图片链接，区分企业微信二维码、个人微信二维码
vue3实现扫码识别（二维码&条形码）
w418856的博客
01-31 2808
注意：调用浏览器摄像头需要在https环境下运行。1.安装@zxing/library。3.1 显示摄像头的部门。
Vue实现长按图片识别图中二维码
JoeBrid9eWong的博客
08-31 4129
Vue实现长按图片识别图中二维码 思路：要想实现可以识别图片中的二维码，那必定是要将这张图进行上传操作，上传则需要file对象格式。不管是在H5还是APP中，展示的图片都是通过url的方式展示在img标签中的，所以大致的思路就是长按图片，获取图片url，并将url转换成可实现上传操作的file对象格式，再通过某个插件对上传的file进行是否存在QR码的识别判断操作，从而实现了长按识别二维码，思路成立，开始实现。 1. 首先我们需要实现长按某张图片，几百毫秒后执行下一步操作，这一步就包括了获取这张图片url，
vue实现二维码识别功能 读取二维码内容
weixin_45966674的博客
05-29 2556
用相机把二维码拍给他 注意 一定要清晰一点 不然识别不出来。他就会给我生成一个对应信息的二维码图片 我们可以复制到本地。然后 我们打开PC端网页访问 点击 选择文件。这样 我们的二维码也是成功在手机端也识别了出来。他就会让我在文件夹中选择 我们选一个二维码。在输入框中输入文本 然后 点击生成二维码。我们定制的内容也是被识别了出来。他会问我们拍照还是从相册中去找。当我用手机 点击选择文件。然后组件编写代码如下。
vue生成二维码与识别，vue扫一扫功能实现
“ 春风若有怜花意，能否许我再少年。”
08-30 3185
【代码】二维码的生成与识别，扫一扫功能实现。
vue2-拍照识别二维码条形码--qrcode
m0_54429336的博客
01-18 1519
vue2-拍照识别二维码条形码--qrcode
二维码与pc切换登入.rar
03-16
9. **跨平台兼容性**：二维码登录系统需要考虑到不同操作系统和浏览器的兼容性，确保在Windows、MacOS、Chrome、Firefox等各类环境下的正常运行。 10. **用户体验优化**：为了提高用户体验，开发者需要不断优化流程...
H5调用摄像头和扫一扫功能测
08-29
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照解析...说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。
qrcode2 vue二维码插件
11-28
vue生成二维码的插件
Vue2.0实战
qq_42636335的博客
03-06 6817
目录 项目初始化 1.vue-cli脚手架初始化项目 2.项目的其他配置 3.项目路由分析 4.完成非路由组件Header和Footer业务 5.完成路由组件搭建 6. Footer组件显示与隐藏 7.路由传参 7.3路由传参面试题 Home模块组件拆分 1.三级联动组件 2.完成其余静态组件 3.postman测试接口 4.axios二次封装 5.接口统一管理 6.nprogress进度条的使用 6. vuex状态管理库 7.完成TypeNav三级联动展示数据业..
Vue 实现简单的二维码扫描功能
热门推荐
小破孩的博客
05-06 1万+
1、使用以下命令安装实现扫描二维码的插件 npm install --save vue-qecode-reader 或者 cnpm install --save vue-qrcode-reader 插件官网：Simple | Vue Qrcode Reader 代码如下： <template> <!-- <p class="error">{{ error }}</p> --> <!--错误信息--> &lt
vue代码中上传二维码图片，并识别内容
Thea12138的博客
12-07 713
创建一个类型为file的input元素，可以在其中上传包含二维码的图像。
js扫码或者Vue实现扫描二维码识别
木芽博客
11-02 2116
js实现设备扫码能力，可以开发成通用插件，可以用于二维码登录等能力。
移动端浏览器的扫描二维码实现（vue-qrcode-reader与jsQR方式）
stay hungry, stay foolish
06-11 4997
类似扫一扫的功能，自动识别到画面中的二维码并进行识别，也可以选择从相册中上传。 vue-qrcode-reader 一组用于检测和解码二维码的Vue.js组件jsQR 一个纯粹的javascript二维码阅读库，该库接收原始图像，并将定位、提取和解析在其中找到的任何二维码。zxing-wasm ZXing-C++ WebAssembly 作为带有类型的 ES/CJS 模块。读/写 web、node、bun 和 deno 中的条形码。安装 3. 方式一：vue-qrcode-reader实现 🔍vue
vue实现调用摄像头扫描二维码功能
_小郑有点困了的博客
02-25 5086
场景 在使用vue开发的h5移动端想要实现一个调用摄像头扫描二维码的功能。可能一时间想到的解决方案就是调用微信的sdk，但是这个微信的扫一扫只能在微信里用，而且还需要公众号认证等配置操作。很麻烦。可以但没必要，万一你的h5和公众号没有任何关联，不久徒增烦恼吗？ 于是，查阅博客，果然有大佬写过文章。 参考博客：vue扫一扫 效果图 注意：这里本地要用localhost。发布之后要用https的才可以看到。（你的设备也必须有摄像头） 代码实现 安装 npm install @zxing/library
原生Vue实现二维码扫一扫，兼容PC、安卓、IOS
FuSh1
11-09 6390
原生Vue实现二维码扫一扫 通过使用 vue-qrcode-reader 进行实现 文章目录原生Vue实现二维码扫一扫vue-qrcode-reader使用步骤1.引入库(全局引入)2.使用 vue-qrcode-reader yarn add vue-qrcode-reader --save 使用步骤 1.引入库(全局引入) 代码如下（示例）main.js： import VueQrcodeReader from "vue-qrcode-reader"; Vue.use(VueQrcodeRea
vue2 扫描二维码
最新发布
08-27
在 Vue.js 2.x 中，扫描二维码通常涉及到前端页面与浏览器的交互，而不是直接在 Vue 框架内处理。你可以通过以下步骤实现： 1. 引入库：首先需要引入一个 QRCode 的 JavaScript 库，如 qrcodejs 或 jsqrcode。安装并导入库，例如： ```javascript import QRCode from 'qrcode.react'; ``` 2. 创建组件：创建一个新的 Vue 组件，并在模板部分添加一个二维码元素： ```html <template> <div> <QRCode :value="qrCodeValue" /> </div> </template> ``` 这里的 `qrCodeValue` 可能是一个函数，用于动态生成二维码内容。 3. 数据绑定：在 Vue 实例的数据对象中，设置二维码的值，可以是一段 URL、字符串或其他内容： ```javascript data() { return { qrCodeValue: 'https://example.com', }; }, ``` 当你需要显示新的二维码时，只需更新这个数据属性即可。 4. 监听事件：如果需要，你还可以监听用户的扫描结果，一般需要用户手动操作，比如点击按钮触发扫描： ```html <button @click="scan">扫描二维码</button> ``` 然后在 methods 中编写扫描方法： ```javascript methods: { scan() { // 使用库提供的 API 进行扫描，这里不做具体实现 this.qrCodeValue = 'new QR code content'; }, } ``` 5. 安全提示：注意在实际应用中，应避免直接在前端处理敏感信息的二维码展示，以防安全风险。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值