在前端开发中，我们经常需要使用到一些二维码识别和生成的功能。而最近非常流行的一种解决方案就是使用 QuaggaJS 库来实现这一功能。同时，为了更加方便地使用 QuaggaJS 库，前端开发者还开发了一个 npm 包，即 ember-cli-quaggajs。
本文将详细介绍如何使用 npm 包 ember-cli-quaggajs，在使用过程中需要注意的问题，并提供示例代码以供参考。
1. 安装
首先，我们需要使用 npm 安装 ember-cli-quaggajs 包。在终端中输入以下命令即可：
npm install ember-cli-quaggajs --save
安装完成后，我们就可以在项目中使用这个库了。
2. 使用
使用 ember-cli-quaggajs 库非常简单。我们只需要在组件中调用 scanBarcode 方法即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------
------ ------ ---- -------------
------ ------- ------------------------
-------
-------------- ------
------ -
--------------------------
-------------
------------ -
----- -------
----- -------------
------- --------------------------------------------
------------ -
------ ----
------- ----
----------- -------------
--
--
-------- -
-------- -
------------------
-------------
---------------
-----------------
--
------ -
---------------- -----
-------------- -----
------------- -----
------------ ----
-
--
-- ------- -- -
-- ------- -
-------------------
-------
- ---- -
--------------------------- --------- ----- -- --------
---------------
-
---
-------------------------- -- -
------------------------- -------
---------------------------------- ------------------------
---
--
------------- -
------------------------- ------
--
---如上例所示，我们先导入了需要的包：Ember，Quagga，以及组件的布局文件 layout。
然后，在组件的 init 方法中初始化了 QuaggaJS 库，并设置了一些扫码器的参数。我们还绑定了 onDetected 事件，当扫码成功时，会执行相应的回调函数。
最后，在组件的 scanBarcode 函数中，我们设置扫码器的 scannerActive 状态为 true，表示开始扫描条形码。当扫码完成后，我们将状态设置为 false，并调用 onBarcodeDetect 回调函数，将条形码的值作为参数传递给它。
3. 注意事项
在使用 ember-cli-quaggajs 库时，我们需要注意以下几点：
- 必须拥有摄像头权限。
- 必须在 HTTPS 环境下使用，否则无法进行摄像头播放。
- 可以在
quagga.js文件中设置更多的参数选项，例如修改扫描时间间隔、扫描的区域大小等等，具体可参考官方文档。
4. 示例代码
以下是使用 ember-cli-quaggajs 库实现条形码扫描的完整示例代码，在使用前请先安装依赖包：
ember new quagga-demo cd quagga-demo npm i ember-cli-quaggajs --save ember generate component barcode-reader
4.1 app/templates/application.hbs
{{outlet}}4.2 app/templates/index.hbs
{{barcode-reader onBarcodeDetect=(action "onBarcodeDetect")}}4.3 app/components/barcode-reader.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------
------ ------ ---- -------------
------ ------- ------------------------
-------
-------------- ------
------ -
--------------------------
-------------
------------ -
----- -------
----- -------------
------- --------------------------------------------
------------ -
------ ----
------- ----
----------- -------------
--
--
-------- -
-------- -
------------------
-------------
---------------
-----------------
--
------ -
---------------- -----
-------------- -----
------------- -----
------------ ----
-
--
-- ------- -- -
-- ------- -
-------------------
-------
- ---- -
--------------------------- --------- ----- -- --------
---------------
-
---
-------------------------- -- -
------------------------- -------
---------------------------------- ------------------------
---
--
------------- -
------------------------- ------
--
---4.4 app/components/barcode-reader.hbs
<div id="camera-container" {{bind-attr class=(if scannerActive "active")}}>
<video id="camera" autoplay></video>
<button class="reader-btn" {{action "scanBarcode"}}>Scan Barcode</button>
</div>4.5 app/styles/app.css
-- -------------------- ---- -------
------- -
--------- ---------
-
------- ----- -
------ -----
------- -----
----------- --------
-
----------- -
--------- ---------
------- ------
----- ----
---------- --------------- ---
---------- ----
-通过上述示例代码，我们可以完成一个简单的条形码扫描器。在使用时，只需要点击 Scan Barcode 按钮，将摄像头对准条形码，即可自动扫描并显示条形码的内容。同时，我们也可以通过修改 QuaggaJS 库中的参数，来实现更多的定制化需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005643181e8991b448e15cd