使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

本文介绍了如何使用JavaScript库QuaggaJS来唤醒手机摄像头或选择相册图片,识别二维码和条形码。提供了一个Gitee仓库实例链接,并提到了条形码识别的准确性问题。同时,给出了前端实现摄像头实时扫描的属性参考。
摘要由CSDN通过智能技术生成

接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍两个js库,都很牛掰,感谢大神,献上链接.

仓库:https://github.com/serratus/quaggaJS

官网: https://serratus.github.io/quaggaJS/

识别二维码

条形码解析:

我也是在网上找了一大堆,都失败了,别人博主写的都没头没尾的,无法实现其功能,既然有工具就一梭子的事情了,花费了一晚上,终于弄出来了,下面就是设置参数的问题了

甩出一个仓库,大家下载这个仓库就可以实现此功能的,不过条形码识别的准确性有点问题.需要设置对应的参数,其中需要修改代码

........

//          , 'code_39_reader','code_128_reader',"ean_reader", 
             decoder: {
                 readers: [{
                     format: ['ean_reader'], //条形码种类很多,选择适合自己的
                     config: {}
                 }]
             },

   ........

 

 

二维码解析:

这个没找到开源仓库,不过找到一个可以实现的DMEO,大家喜欢的话可以自己深究,我要去撸代码了.

我的仓库实例地址: https://gitee.com/guyandog/QR_BR 传送门<

### 回答1: 实现html5调用手机本地摄像头相册识别二维码需要以下步骤: 1. 首先需要在网页中引入js库,例如jquery以及二维码库qrcode.js。 2. 在html页面中设置一个视频标签,用于显示摄像头捕获到的实时画面。 3. 使用getUserMedia方法调用手机本地摄像头。对于不同浏览器需要考虑一些兼容性问题。 4. 将捕获到的视频流绑定到视频标签中进行实时显示。 5. 在js文件中使用qrcode库对摄像头捕捉到的画面进行解析,识别其中的二维码使用参数配置来控制解析二维码的方式。 6. 添加一个input标签,用于调用手机本地相册,因为调用相册需要用户操作。 7. 给input标签添加change事件,获取用户选择的图片,并将其绑定到img标签中。 8. 同样使用qrcode库对选择的图片进行解析,识别其中的二维码。 需要注意的是,因为html5调用手机摄像头相册在不同的浏览器上存在一些差异,因此需要根据具体浏览器的特点进行相应的调整。并且,在实际应用中还需要考虑到用户体验和数据安全等问题。 ### 回答2: HTML5调用手机本地摄像头相册识别二维码需要借助WebRTC技术和JavaScript编程语言实现,具体实现过程如下: 1. 检测用户设备是否支持WebRTC技术。如果支持,则可以继续进行下一步操作。如果不支持,则无法调用摄像头相册。 2. 使用JavaScript编程语言创建一个视频元素来显示摄像头实时画面,代码如下: ``` <video id="video" autoplay></video> ``` 3. 获取用户授权,允许使用摄像头相册。代码如下: ``` navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(function(stream) { var video = document.querySelector('video'); video.srcObject = stream; video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); ``` 4. 启动二维码识别器库QuaggaJS,开始识别摄像头中的二维码。代码如下: ``` Quagga.init({ inputStream : { name : "Live", type : "LiveStream" }, decoder : { readers : ["code_128_reader"] } }, function(err) { if (err) { console.log(err); return; } console.log("QuaggaJS is ready to start scanning."); Quagga.start(); }); Quagga.onDetected(function(result) { console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result); }); ``` 5. 如果想识别相册中的二维码,则需为文件选择器添加一个“change”事件监听器,选择文件后即可发起识别。代码如下: ``` var inputElement = document.querySelector('input[type=file]'); inputElement.addEventListener('change', function(e) { var file = e.target.files[0]; Quagga.decodeSingle({ decoder: { readers: ["code_128_reader"] }, src: URL.createObjectURL(file) }, function(result) { console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result); }); }, false); ``` 通过以上步骤,我们就可以使用HTML5调用手机本地摄像头相册识别二维码了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值