好久没写笔记了，最近有点懒，今天需求都写完了，写一篇笔记记录一下昨天写的代码。

需求是这样的：使用的是vue2，需要一个能够调用摄像头之后识别二维码和条形码的组件，获取到条码数据之后传给父组件，父组件其实是一个弹窗里面加一个form，form表单填写好，条码数据也收集到之后就可以提交了。我找了好几个识别库，发现挺多都不能识别条形码的。

测试的时候了解了这几个库：

一、了解几个识别库

ZXing能识别条形码和二维码，识别率挺高，官网给的示例清晰，支持从图片或者从摄像头中读取，我实际使用的也是这个库，推荐的。 zxing-js.github.io/library/ 这个是示例，非常有用，示例代码拿来改成vue2能用的版本就行了。

这个库用起来比较简单，但是只能识别二维码，也有自带的api可以调用摄像头。

这个库只能识别条形码，不能扫描二维码，chatGPT还跟我说都能扫…害我写了半天。(这个好像没人维护了

还有一些其他的没咋用过。

二、封装识别条码组件

子组件：

（第一次用这个码上掘金，如果打不开可以直接建个新的vue文件复制过去，用的是vue2.其实就是官网的例子，然后用gpt改成vue2版本，但是确实改了很久emmm）

父组件中调用：

components: {  
    QRCodeScanner  
},
………………
<QRCodeScanner ref="scanner" @change="resultText" v-show="showCamera"/>

大致就长这样，手机可以通过下面的select切换前置后置，优先选后置（根据设备名进行选择，看设备名是否包括back，否则就默认选第一个）

调用摄像头浏览器是有安全限制的，本地开发可以用localhost调试（默认安全的），上线的话就必须是https环境了。

但是看到一个博客可以解决上线也只能用https的问题。当然这个解决方法只是临时性的，如果真的用不了https，可以看看这个方法。blog.csdn.net/qq_40905132…