参考链接：
/gruhn/vue-qrcode-reader/zhangtian_tian/article/details/105226716
1. 效果图
2. 开启 https
需要在 https 协议下才可以调用相机，实现扫码。
可以通过配置 vue.config.js 中的 devServer:{https:true}
或 前端使用Nuxt框架，配置本地https访问 配置本地证书
3. 安装 vue-qrcode-reader
npm i vue-qrcode-reader --save
4. 代码实现
<template><div class="container"><!-- 扫描中心的盒子 --><qrcode-stream class="qrcode" @decode="onDecode" @init="onInit"><div class="center"><span class="border"></span><span class="border"></span><span class="border"></span><span class="border"></span><div class="animate"></div></div></qrcode-stream></div></template><script>import {QrcodeStream } from 'vue-qrcode-reader'export default {components: {QrcodeStream},data() {return {}},methods: {onDecode(result) {window.location.href = result},async onInit(promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {alert('ERROR: 您需要授予相机访问权限')} else if (error.name === 'NotFoundError') {alert('ERROR: 这个设备上没有摄像头')} else if (error.name === 'NotSupportedError') {alert('ERROR: 所需的安全上下文(HTTPS、本地主机)')} else if (error.name === 'NotReadableError') {alert('ERROR: 相机被占用')} else if (error.name === 'OverconstrainedError') {alert('ERROR: 安装摄像头不合适')} else if (error.name === 'StreamApiNotSupportedError') {alert('ERROR: 此浏览器不支持流API')}}}}}</script><style lang="less" scoped>.container {height: 100%;overflow: hidden;.qrcode {height: 100%;background-color: rgba(0, 0, 0, 0.3);.center {width: 200px;height: 200px;position: fixed;background-color: rgba(255, 255, 255, 0.5);top: 50%;left: 50%;transform: translate(-50%, -50%);}.animate {width: 150px;background-color: #41b482;height: 2px;margin: 0 auto;animation: animate 3s infinite;}@keyframes animate {0% {margin-top: 50px;}100% {margin-top: 150px;}}.border {position: absolute;}.border:nth-child(1) {top: 0;left: 0;border-top: 2px solid #41b482;border-left: 2px solid #41b482;width: 10px;height: 10px;}.border:nth-child(2) {top: 0;right: 0;border-top: 2px solid #41b482;border-right: 2px solid #41b482;width: 10px;height: 10px;}.border:nth-child(3) {bottom: 0;left: 0;border-bottom: 2px solid #41b482;border-left: 2px solid #41b482;width: 10px;height: 10px;}.border:nth-child(4) {bottom: 0;right: 0;border-bottom: 2px solid #41b482;border-right: 2px solid #41b482;width: 10px;height: 10px;}}}</style>
