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

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