前言
随着移动支付和电子购物的普及，条形码扫描变得非常重要。现在很多网站或 App 都会使用条形码或二维码来获取商品或者信息等等。
在网页中，我们可以使用 getUserMedia API 和 BarcodeDetector API 来获取摄像头视频流，然后使用 BarcodeDetector API 来识别条形码或二维码，并获取相关的信息。
但是，BarcodeDetector API 的浏览器兼容性并不完美，目前只有 Chrome 和 Edge 支持。因此，开发者们需要使用 barcode-detector-polyfill 这个 npm 包来实现跨浏览器兼容性。
本篇文章将详细介绍 npm 包 barcode-detector-polyfill 的使用方法，并提供实用示例供读者学习和参考。
安装与使用
barcode-detector-polyfill 可以通过 npm 安装，使用以下命令：
npm install barcode-detector-polyfill
使用该 polyfill 的方式也很简单，只需要在需要使用时引入即可：
import "barcode-detector-polyfill";
在 polyfill 引入之后，我们就可以使用 BarcodeDetector API 来识别条码了：
-- -------------------- ---- -------
----- ----- - --------------------------------
------------------------------------- ------ ---- -------------- -- -
--------------- - -------
----- -------- - --- ------------------
-------------- -- -
--------
--------------
----------- -- -
-------------------
--
---------- -- -
-------------------
---
-- ------
---这段代码会每秒钟检测一次视频流，如果检测到了条码就将其打印在控制台上。
示例代码
以下是一个完整的实例代码。该代码需要使用一个简单的 Web 服务器才能运行。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- --------------- --
-------------- ----------------
-------
------
---------------
------- ------------- ------------------------
-------
--------- -------------------- ---- -------
-- ------
------ ----------------------------
----- ----- - --------------------------------
------------------------------------- ------ ---- -------------- -- -
--------------- - -------
----- -------- - --- ------------------
-------------- -- -
--------
--------------
----------- -- -
------------------ -- -
---------------------------
---
--
---------- -- -
-------------------
---
-- ------
---总结
在本文中，我们介绍了如何使用 npm 包 barcode-detector-polyfill 来识别条形码和二维码，并提供了实用示例供读者参考。使用这个 polyfill 可以帮助我们在各种浏览器中实现条形码和二维码识别功能，避免了浏览器兼容性的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aae81e8991b448d8400