html5配合摄像头实现扫码

管理项目,需要扫码,像超市一样。本想着买个扫码枪,jd一看这个贵呀。。操作还麻烦,web管理系统,还得绑定keydown之类的乱七八糟,算了。

由于知道高版本浏览器支持拍照,添加上扫码应该不麻烦,就一通Google。下面看看例子吧

目前觉得最好用的1d解码应该是这个

https://github.com/EddieLa/JOB 记得gh-pages分支

最好用的2d解码是这个

https://github.com/LazarSoft/jsqrcode 还好在线例子能运行起来

不用支持上传图片解码,那就把没用的代码删掉得了。

还遇到了问题,angular下开启视频居然有报错

Refused to load media from 'blob:http%3A//localhost%3A3000/0fde46b7-3913-47e3-8941-1a85a6ab99c8' because it violates the following Content Security Policy directive: "default-src *". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.

undefined:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

这么解决 index.html里注释上一行,加下一行

<!-- <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"> -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' http://localhost:3000 'unsafe-inline' 'unsafe-eval';">

看看这俩

https://github.com/meteor/meteor/tree/devel/packages/browser-policy

https://github.com/meteor/mobile-packages/issues/80

还有这俩, 我用的第一个最简单的,不喜欢太复杂,坑爹。

https://github.com/jonashartmann/webcam-directive

https://github.com/onemightyroar/angular-camera

https://github.com/bcabanes/ng-camera

等两天放上例子, 在页面直接可以扫码

有任何问题请留言。

演示效果
js上传后总被处理坏…所以没办法上demo, 需要源码的留言吧