vue 浏览器识别二维码功能 pc和手机端_vue 打开安卓摄像头扫码-优快云博客

本文链接：https://blog.youkuaiyun.com/Qyzcxy/article/details/135691263

本文介绍了如何在Vue应用中使用`@zxing/library`库实现HTTPS协议下的二维码扫描功能，确保浏览器不会认为操作不安全。开发者展示了如何初始化摄像头、检测协议类型并捕获扫码结果。

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

前言：一定是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-vid