使用的技术：原生html+vue.js+zxing.js；测试时附加需要的技术：iis10+ca证书制作。实现在安卓手机、安卓平板、pc上，实现浏览器上摄像头扫码功能。苹果的设备没测试过。
第一步：写好测试的网页并部署。
部署时使用iis发布。因为这个打开摄像头被限制为localhost和127.0.0.1和https协议下才能用，所以在pc上可以先配置本地ip地址，等在本地测试可以了，就自己制作一个ca证书，配置为局域网的https协议，保证测试设备和这次开发的网页服务器在同一个局域网下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像头测试</title>
<script src="js/vue.js"></script>
<script src="js/zxing.js"></script>
</head>
<body>
<div class="vueWrapper">
<button @click="openVideo">打开</button>
{{text}}
<video ref="video" id="video" autoplay playsinline></video>
{{text2}}
</div>
</body>
<script>
var codeReader=null;
var vue = new Vue({
el: '.vueWrapper',
data: {
text:'',
text2:'',
},
methods: {
openVideo(param=null){
// alert("open")
navigator.mediaDevices.getUserMedia({
video: {
facingMode: "environment", // 后置摄像头
width: { min: 600, ideal: 1280, max: 1920 },
},
audio: false,
}).then(success => {
// 摄像头开启成功
this.$refs['video'].srcObject = success
// 播放摄像头画面
this.$refs['video'].play();
var codeReader = new ZXing.BrowserQRCodeReader();
}).catch(err => {
// 摄像头开启失败
console.log(err)
alert(err);
})
},
}
})
</script>
</html>
View Code
第二步，制作ca证书，参考：https://blog.csdn.net/m0_52440465/article/details/130713591，iis导入时，是pfx格式，所以用这个命令：
pkcs12 -export -out server.pfx -inkey server.pem -in server.crt
转换一下格式。
以上两个步骤完成，就可以在pc、手机和平板上也能打开手机摄像头了。
第三步，zxing扫码功能。
codeReader = new ZXing.BrowserQRCodeReader();
codeReader.listVideoInputDevices()
.then(videoInputDevices => {
if (!videoInputDevices || videoInputDevices.length <= 0) {
return;
}
codeReader
.decodeFromInputVideoDevice(undefined, 'video')
.then(result => {
console.log("result",result);
if (!result) {//扫码失败
return;
}
else {
if (result.text) {//成功
this.text=result.text
}
else {
return;
}
}
})
.catch(err => {
console.error("errscan", err);
return;
});
View Code
Vue和zXing的js资料：
https://files.cnblogs.com/files/HelloQLQ/VueAndZxing.zip?t=1721458991&download=true
标签：扫码,err,text,html5,codeReader,摄像头,result From： https://www.cnblogs.com/HelloQLQ/p/18313125