需要一个能在H5中实现扫码的插件
背景：
目前在开发一个h5的项目，使用的技术栈是vue2+uni-app开发，项目是用vue-cli搭建的,现在需要做一个扫描样品二维码的功能。
需求：
1.在h5中能调用扫码功能
2.要能在http协议下运行（这个项目没有https的环境）
补充：
以下插件不支持https环境，我已经排过雷了。
1.mumu-get-qrcode
2.vue-grcode-reader
3.html5-qrcode
有没有和我一样遇到过类似的需求呢？可以留言回复一下。
来看下这个仓库，只不过需要你使用https协议，否则不生效，https://github.com/IvanHanloth/qrcode-scanner
望采纳
这个原因是浏览器在非https下禁用摄像头，只有https或本机地址的网站才能使用摄像头
方法1，申请个免费https证书，随便找个服务器搭个nginx转发一下 https://www.jianshu.com/p/4f36bf75bc96
方法2，修改浏览器设置 https://www.it1352.com/2106136.html
方法3，本机启动一个http服务转发一下
- 引入JSQRCode库的js文件。可以从GitHub下载该文件并将其引入到HTML页面中。例如：
html
- 创建一个HTML元素用于显示扫描到的QR码。例如：
html
- 在JavaScript代码中编写扫码功能。例如：
javascript// 获取HTML元素const canvas = document.getElementById('canvas');
const canvasContext = canvas.getContext('2d');
// 获取媒体设备上的流navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
// 创建一个 video 元素 const video = document.createElement('video');
video.srcObject = stream;
video.play();
// 在 video 元素准备好后，将其视频流传递给 jsQR 并解码此流 video.addEventListener('play', () => {
setInterval(() => {
canvasContext.drawImage(video,0,0, canvas.width, canvas.height);
const imageData = canvasContext.getImageData(0,0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log(code.data);
}
},100);
});
})
.catch(err => {
console.error('无法获取媒体设备流', err);
});
```
这段代码使用getUserMedia API来获取摄像头的视频流，并将其传递给JSQRCode进行解码。每隔100毫秒会在canvas元素中绘制一帧图像，从而实现了一个实时的QR码扫描功能。如果成功扫描到了QR码，代码将打印QR码中包含的数据。注意：由于浏览器安全限制，getUserMedia只能在HTTPS安全连接下才能工作。如果你在开发过程中使用HTTP协议，需要在调试时关闭浏览器的安全设置（例如Chrome浏览器中使用--unsafely-treat-insecure-origin-as-secure运行）。
- 这篇文章：钉钉H5微应用踩坑 也许有你想要的答案，你可以看看
基于bing、GPT部分内容和本人思考总结：
如果你的项目需要在http协议下运行，并且常用的扫码插件都不支持，那么可以考虑使用zxing.js来实现扫码功能。zxing.js是一个基于JavaScript的二维码扫描库，可以在浏览器中直接运行。下面是一个简单的示例代码，演示如何在Vue组件中使用zxing.js来实现扫码功能：
安装zxing.js
可以直接下载zxing.js的压缩包，或者通过npm进行安装：
plaintext
Copy code
npm install zxing --save
在Vue组件中引入zxing.js
javascript
Copy code
import ZXing from 'zxing';
export default {
data() {
return {
scanner: null
};
},
mounted() {
this.initScanner();
},
methods: {
initScanner() {
// 创建扫描器
this.scanner = new ZXing.BrowserMultiFormatReader();
// 将扫描画面绑定到指定元素上
this.scanner.setDecodeCallback(this.handleScanResult.bind(this));
this.scanner.decodeFromConstraints({ video: true }, 'video');
},
handleScanResult(result) {
// 处理扫描结果
console.log(result.text);
}
}
};
在这个示例代码中，我们首先通过import语句引入了zxing.js库，并在Vue组件的mounted生命周期函数中调用了initScanner方法来创建扫描器并将扫描画面绑定到指定的DOM元素上。在initScanner方法中，我们使用setDecodeCallback方法来指定扫描结果的处理函数，并通过decodeFromConstraints方法开始进行扫描操作。在handleScanResult方法中，我们处理了扫描结果，这里只是简单地将扫描结果输出到了控制台中。
3. 创建HTML模板
在Vue组件中，我们需要为扫描画面指定一个DOM元素，这里我们可以使用video元素来显示扫描画面。下面是一个简单的HTML模板：
html
Copy code
<template>
<div>
<video id="video" width="100%" height="100%"></video>
</div>
</template>
在这个模板中，我们使用了video元素来显示扫描画面，并为其指定了一个id属性用于在Vue组件中引用。
4. 运行扫码功能
在Vue组件中，我们可以通过调用initScanner方法来运行扫码功能。在实际使用中，你可以为扫描功能添加一个按钮或者其他交互元素，用户点击该元素后即可开始扫码操作。下面是一个简单的示例代码：
html
Copy code
<template>
<div>
<video id="video" width="100%" height="100%"></video>
<button @click="initScanner">扫描二维码</button>
</div>
</template>
在这个示例代码中，我们在<button>元素上添加了一个@click事件监听器，当用户点击该按钮时，即可调用initScanner方法开始进行扫码操作。
需要注意的是，由于zxing.js是在浏览器中直接运行的，因此如果你的项目需要在移动端上运行，可能需要对摄像头权限进行处理。在这种情况下，你可以使用uni-app提供的API来获取和处理摄像头权限，例如：
javascript
Copy code
// 获取摄像头权限
uni.authorize({
scope: 'scope.camera',
success() {
// 初始化扫描器
this.initScanner();
},
fail() {
// 处理授权失败情况
}
});
总之，使用zxing.js来实现扫码功能的方式比较简单，而且可以灵活地适应不同的环境和需求。如果你在使用过程中遇到了问题，可以查看zxing.js的官方文档或者参考其他开源项目的实现方式进行调整。
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
针对您的需求，可以使用以下两个插件来实现在H5中调用扫码功能：
- QuaggaJS：一个基于JavaScript的条形码和二维码扫描库。它支持多种扫描方式，并具有很好的浏览器兼容性。可以通过npm进行安装。
以下是如何在uni-app中使用QuaggaJS的示例代码：
<template>
<div>
<button @click="toggleScanner">打开扫描器</button>
<div id="scanner-container"></div>
</div>
</template>
<script>
import Quagga from 'quagga';
export default {
methods: {
toggleScanner() {
Quagga.init(
{
inputStream: {
type: 'LiveStream',
constraints: {
width: 640,
height: 480,
facingMode: 'environment', // or user
},
},
decoder: {
readers: ['ean_reader', 'ean_8_reader', 'code_39_reader', 'code_39_vin_reader', 'codabar_reader', 'upc_reader', 'upc_e_reader', 'i2of5_reader', '2of5_reader', 'code_93_reader'], // 支持的解码器类型
},
locate: true,
debug: false,
numOfWorkers: navigator.hardwareConcurrency || 4,
},
(err) => {
if (err) {
console.log(err);
return;
}
Quagga.start();
Quagga.onDetected((result) => {
console.log('Barcode detected and processed : [', result.codeResult.code, ']');
});
}
);
},
},
};
</script>
<style>
#scanner-container video {
transform: none;
}
</style>
- zxing-js：一个基于JavaScript的条形码和二维码库。它可以通过WebRTC或者使用图片的方式进行扫描。同样可以通过npm进行安装。
以下是如何在uni-app中使用zxing-js的示例代码：
<template>
<div>
<button @click="toggleScanner">打开扫描器</button>
<div id="scanner-container"></div>
</div>
</template>
<script>
import zxing from '@zxing/library';
export default {
data() {
return {
video: null,
canvas: null,
stream: null,
readWorker: null,
};
},
methods: {
toggleScanner() {
if (this.stream) {
this.stream.getTracks().forEach((track) => {
track.stop();
});
this.video.pause();
this.video.srcObject = null;
this.canvas.hidden = true;
this.canvas.width = 0;
this.canvas.height = 0;
} else {
this.canvas = document.createElement('canvas');
this.canvas.hidden = true;
this.canvas.width = 640;
this.canvas.height = 480;
document.getElementById('scanner-container').appendChild(this.canvas);
navigator.mediaDevices.getUserMedia({
audio: false,
video: {
width: 640,
height: 480,
facingMode: 'environment', // or user
},
})
.then((stream) => {
this.stream = stream;
this.video = document.createElement('video');
this.video.hidden = true;
this.video.width = 640;
this.video.height = 480;
this.video.srcObject = stream;
this.video.play();
document.getElementById('scanner-container').appendChild(this.video);
this.scanLoop();
})
.catch((err) => {
console.error(err);
alert('扫描器初始化失败');
});
}
},
scanLoop() {
this.readWorker = new zxing.BrowserQRCodeReader();
this.readWorker.decodeFromVideoDevice(null, this.video, (result, err) => {
if (result) {
console.log('Barcode detected and processed : [', result.text, ']');
this.readWorker.stop();
this.stream.getTracks().forEach((track) => {
track.stop();
});
this.video.pause();
this.video.srcObject = null;
this.canvas.hidden = true;
this.canvas.width = 0;
this.canvas.height = 0;
this.stream = null;
} else if (err) {
console.error(err);
alert('扫描器出错啦');
} else {
setTimeout(() => {
this.scanLoop();
}, 200);
}
});
},
},
};
</script>
以上是两种常用的扫码库，分别基于WebRTC和Canvas实现。您可以根据需要选择其中一种进行使用。
如果我的回答解决了您的问题，请采纳！
首先uniapp有可用的扫码插件！不用通过H5的！如果web套壳，在webview做触发调到uniapp的插件页. 也可以使用apiclound 引用它的api文件后添加插件，有个付费的很好使亲测
分析：根据问题描述，需要在H5中实现扫码的功能，同时要求能在http协议下运行。目前已经尝试了几个插件，但都不支持https环境。因此，需要找到一个能够满足需求的插件。
解决方案：
1. 使用zxing.js插件
zxing.js是一个基于JavaScript的二维码扫描库，可以在H5中实现扫码功能。同时，它也支持http协议，可以满足需求。
使用步骤：
1）引入zxing.js库
可以通过以下方式引入：
html
2）创建扫码器
javascript
const codeReader = new ZXing.BrowserQRCodeReader();
3）启动扫码器
javascript
codeReader.decodeFromInputVideoDevice(undefined, 'video').then(result => {
console.log(result.text);
}).catch(err => {
console.error(err);
});
2. 使用Quagga.js插件
Quagga.js是一个基于JavaScript的条形码和二维码扫描库，可以在H5中实现扫码功能。同时，它也支持http协议，可以满足需求。
使用步骤：
1）引入Quagga.js库
可以通过以下方式引入：
html
2）创建扫码器
javascript
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
target: document.querySelector('#yourElement') // Or '#yourElement' (optional)
},
decoder : {
readers : ["ean_reader"]
}
}, function(err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
3）启动扫码器
javascript
Quagga.onDetected(function(result) {
console.log(result.codeResult.code);
});