没有天生的高手,更没有永远的菜鸟求知若饥, 虚心若愚

H5调用手机摄像头实现扫描二维码及条形功能


最近项目有个功能,需要实现扫描条形码,也不知道为什么这样的需求需要h5来实现,但是产品就是产品,没发拒绝,于是乎,网上找了一圈,发现已经有人实现过这样的功能。因此借鉴过来使用。

我们这里提到的就是quaggaJS

705848437.png

quaggaJS

QuaggaJS是条形码扫描器完全用JavaScript编写支持实时的本地化和各种类型的条形码,如的解码EAN, CODE 128,CODE 39,EAN 8,UPC-A ,UPC-C ,I2of5, 2of5,CODE 93和CODABAR。该库还能够 getUserMedia用于直接访问用户的相机流。虽然代码依赖于繁重的图像处理,但即使是最近的智能手机也能够实时定位和解码条形码。

项目地址:https://serratus.github.io/quaggaJS/

浏览器支持

Quagga使用了许多尚未被所有浏览器实现的现代Web API。Quagga有两种运行模式:
1.分析静态图像;
2.使用摄像头解码实时流中的图像。后者需要存在MediaDevices API。

安装

可以使用npm,bower或将其包含在脚本标记中来安装QuaggaJS 。

NPM

npm install quagga

然后将其作为项目中的依赖项导入:

import Quagga from 'quagga'; // ES6
const Quagga = require('quagga').default; // Common JS (important: default)

目前,只有通过浏览器才能使用完整功能。在节点内使用QuaggaJS时,只能使用基于文件的解码。

bower

您也可以通过bower安装QuaggaJS :

bower install quagga

Quagga.init(配置,回调)

此方法初始化给定配置的库config(见下文),并调用callback(err)Quagga完成其自举阶段的时间。如果配置了实时检测,初始化过程也会请求摄像机访问。如果出现错误,err 则设置参数并包含有关原因的信息。可能的原因可能inputStream.type是设置为LiveStream,但浏览器不支持此API,或者仅仅是用户拒绝使用相机的权限。

如果您没有指定目标,QuaggaJS将查找与CSS选择器匹配的元素#interactive.viewport(为了向后兼容)。 target可以是字符串(与您的DOM节点之一匹配的CSS选择器)或DOM节点。

Quagga.init({
    inputStream : {
      name : "Live",
      type : "LiveStream",
      target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
    },
    decoder : {
      readers : ["code_128_reader"]
    }
  }, function(err) {
      if (err) {
          console.log(err);
          return
      }
      console.log("Initialization finished. Ready to start");
      Quagga.start();
  });

Quagga.start()

初始化库时,该start()方法启动视频流并开始定位和解码图像。

Quagga.stop()

如果解码器当前正在运行,则在调用stop()解码器之后不再处理任何图像。此外,如果在初始化时请求摄像机流,此操作也会断开摄像机的连接。

Quagga.onProcessed(回调)

此方法注册callback(data)在处理完成后为每个帧调用的函数。该data对象包含有关操作成功/失败的详细信息。输出根据检测和/或解码是否成功而变化。

Quagga.onDetected(回调)

注册一个callback(data)功能,只要条形码模式被定位并成功解码就会触发该功能。传递的data对象包含关于解码过程的信息,包括可以通过调用获得的检测到的代码data.codeResult.code。

Quagga.decodeSingle(配置,回调)

与上述调用相反,该方法不依赖于 getUserMedia单个图像并对其进行操作。提供的回调与in中的回调相同,onDetected并包含结果data对象。

Quagga.offProcessed(句柄)

如果onProcessed事件不再相关,则从事件队列中offProcessed删除给定handler的事件。

Quagga.offDetected(句柄)

如果onDetected事件不再相关,则从事件队列中offDetected删除给定handler的事件。

结果对象

回调传入onProcessed,onDetected并在执行时decodeSingle 接收data对象。该data对象包含以下信息。取决于成功,某些字段可能是undefined空的或只是空的。

{
  "codeResult": {
    "code": "FANAVF1461710",  // the decoded code as a string
    "format": "code_128", // or code_39, codabar, ean_13, ean_8, upc_a, upc_e
    "start": 355,
    "end": 26,
    "codeset": 100,
    "startInfo": {
      "error": 1.0000000000000002,
      "code": 104,
      "start": 21,
      "end": 41
    },
    "decodedCodes": [{
      "code": 104,
      "start": 21,
      "end": 41
    },
    // stripped for brevity
    {
      "error": 0.8888888888888893,
      "code": 106,
      "start": 328,
      "end": 350
    }],
    "endInfo": {
      "error": 0.8888888888888893,
      "code": 106,
      "start": 328,
      "end": 350
    },
    "direction": -1
  },
  "line": [{
    "x": 25.97278706156836,
    "y": 360.5616435369468
  }, {
    "x": 401.9220519377024,
    "y": 70.87524989906444
  }],
  "angle": -0.6565217179979483,
  "pattern": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, /* ... */ 1],
  "box": [
    [77.4074243622672, 410.9288668804402],
    [0.050203235235130705, 310.53619724086366],
    [360.15706727788256, 33.05711026051813],
    [437.5142884049146, 133.44977990009465]
  ],
  "boxes": [
    [
      [77.4074243622672, 410.9288668804402],
      [0.050203235235130705, 310.53619724086366],
      [360.15706727788256, 33.05711026051813],
      [437.5142884049146, 133.44977990009465]
    ],
    [
      [248.90769330706507, 415.2041489551161],
      [198.9532321622869, 352.62160512937635],
      [339.546160777576, 240.3979259789976],
      [389.5006219223542, 302.98046980473737]
    ]
  ]
}

组态

QuaggaJS附带的配置涵盖了默认的用例,可以针对特定要求进行微调。

配置由config定义以下高级属性的对象管理:

{
  numOfWorkers: 4,
  locate: true,
  inputStream: {...},
  frequency: 10,
  decoder:{...},
  locator: {...},
  debug: false,
}

文章评论已关闭!