H5调摄像头并扫描条形码初探

原文链接:https://juejin.im/post/5ce3b141f265da1ba77c791d

最近公司有个业务,是要在pad版调取摄像头并扫描条形码。一开始觉得这个功能无从下手,光是调取一个摄像头就应该挺费事的,更何况还要扫描条形码。

但是诸如微信这些流行的APP也都内嵌了这种功能,可惜大厂们是不会把这些核心技术开源共享的,没办法只能自己弄一个了。

H5调取摄像头API

 <input type="file" accept="image/*;capture=camera" capture="camera" />复制代码

很简单嘛,已经测试过了,三端都可以完美适配。

接下来就是扫描二维码了,但是找了好久还是没能找到可以scan的方法,只能通过上传图片读取条形码来获取数据了。

目前解码的插件主要有两个比较出名

  • quagga.js 

github地址

官方js

  • barcode-reader

npm地址

这两个我都试了,果断选择了后者,一是代码通俗易懂,而是解码效率高速度快。

下面就主要江夏barcode-reader的用法

这里只是做了一个简短的demo,并没有将其放入vue,react等框架中。

1. 引入外部的js文件

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/DecoderWorker.js"></script>  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/exif.js"></script>  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40076/BarcodeReader.js"></script>复制代码
2. 核心JS代码

$(function () {      BarcodeReader.Init();      BarcodeReader.SetImageCallback(function (result) {        console.dir(result);        if (!result.length) {            $("#livestream_scanner").modal("hide");            $(".container .codeInfo").html(`<p>条形码读取失败</p>`);            return        }        var barcode = result[0];        if(barcode.Value){            $("#livestream_scanner").modal("hide");            $(".container .codeInfo").html(`<p>条形码的信息为:${barcode.Value}</p>`);        }      });      document.querySelector("#barCode")        .addEventListener('change',          function (evt) {            var file = evt.target.files[0]            reader = new FileReader();            reader.onloadend = function () {              var img = new Image();              img.src = reader.result;              BarcodeReader.DecodeImage(img);            }            reader.readAsDataURL(file);          },          false        );});复制代码

主要就是上传图片,获取图片的src,然后通过插件自带的静态方法来解析图片,最后通过判断回调函数返回的result进行判断解析是否成功。

最终效果图



展开阅读全文
博主设置当前文章不允许评论。

C语言ioctl摄像头曝光的问题

09-13

我是做在开发板上用实现摄像头识别二维码的项目。二维码移到较快所以要调低曝光值,但使用v4l2_control调节的曝光值好像不稳定,open函数打开摄像设备之后曝光不一定是正确的,然后这次开启摄像头曝光就一直不正确,图片明显偏亮,是函数问题(希望给个更好的C实现的方法)还是这个摄像头有问题(SY003淘宝买的100多块)。rn这是我调曝光的方法。rn[code=c]rnint set_exposure(int cam_fd, int exp_value) rn struct v4l2_control ctrl;rn struct v4l2_queryctrl setting;rn int min, max, current, step, val_def;rn if (isv4l2Control(cam_fd, V4L2_CID_EXPOSURE_ABSOLUTE, &setting) < 0)rn return -1;rn min = setting.minimum;rn max = setting.maximum;rn step = setting.step;rn val_def = setting.default_value;rn current = v4l2GetControl(cam_fd, V4L2_CID_EXPOSURE_ABSOLUTE);rn printf("max %d, min %d, default %d, current %d \n", max, min, val_def,rn current);rn printf("start set exp\n");rn int ret;rn //设置曝光绝对值rn ctrl.id = V4L2_CID_EXPOSURE_ABSOLUTE;rn ctrl.value = exp_value;rn ret = ioctl(cam_fd, VIDIOC_S_CTRL, &ctrl);rn if (ret < 0) rn printf("Set exposure failed (%d)\n", ret);rn return FALSE;rn elsern printf("Control name:%s set to value:%d\n", setting.name, ctrl.value);rn return TRUE;rnrn[/code]rn这是我试的另一种方法,摄像头不支持rn[code=c]rn int ret; rnstruct v4l2_controlctrl; rnctrl.id = V4L2_CID_EXPOSURE; //得到曝光档次,A20接受从 -4到4 共9个档次rnret = ioctl(Handle, VIDIOC_G_CTRL,&ctrl); rnif (ret < 0) rn printf("Get exposure failed (%d)\n",ret); rnreturnV4L2_UTILS_GET_EXPSURE_ERR; rn rnrnprintf("\nGet Exposure :[%d]\n",ctrl.value);rnrn//设置曝光档次rnctrl.id = V4L2_CID_EXPOSURE; rnctrl.value = -4; rnret = ioctl(Handle, VIDIOC_S_CTRL,&ctrl); rnif (ret < 0) printf("Set exposurefailed (%d)\n", ret); rnreturn V4L2_UTILS_SET_EXPSURE_ERR; rn[/code] 论坛

没有更多推荐了,返回首页