介绍
modern-webcamjs 是一个基于浏览器的现代摄像头捕捉技术的 npm 包。它提供了简单易用的 API，方便开发者快速集成摄像头在网站中的基本功能。
安装
可以使用 npm 进行安装：
npm install modern-webcamjs
基本用法
使用 modern-webcamjs 需要先实例化 Webcam 类，并为其提供要显示视频的元素的选择器。下面是一个简单的演示：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
------- -------------------------------------------------
-------
------
------ ------------ -------- -----------------
--------
----- ------ - --- -------------------
--------------
-------- -- ------------------- ------- ----------------
------------ -- -------------------- -------- -------- ------
---------
-------
-------以上代码演示了如何在页面中使用 modern-webcamjs。首先我们在 <head> 中引入 modern-webcamjs。然后在 <body> 中创建一个 <video> 元素，id 属性为 "myVideo"。接着通过 JavaScript 创建了一个 Webcam 类的实例，并将 '#myVideo' 作为参数传递给构造函数。最后使用 start() 方法启动摄像头。
API
Webcam 类提供了一些方法和事件，用于控制和监视摄像头：
启动摄像头
使用 start() 方法启动摄像头。它返回一个 Promise，该 Promise 在摄像头启动后解决，或者在发生错误时被拒绝。
const webcam = new Webcam("#myVideo");
webcam.start()
.then(() => console.log("Webcam started successfully!"))
.catch((err) => console.error("Error starting webcam", err));关闭摄像头
使用 stop() 方法关闭摄像头。
const webcam = new Webcam("#myVideo");
webcam.start();
// some code ...
webcam.stop();拍照
使用 snap() 方法拍照。它返回一个 Promise，该 Promise 在图片捕捉后解决，并将图片数据作为参数传递给解决函数。如果捕捉图片时发生错误，则 Promise 会被拒绝。
-- -------------------- ---- -------
----- ------ - --- -------------------
---------------
-- ---- --- ---- -- ----- --------- ------
----- ------ - -----------------------------------------
-------------------------------- ----- -- -- -
--- -
----- --------- - ----- --------------
------------------ ------- -----------
-
---------- -
-------------------- --------- ------- -----
-
---监听视频
摄像头视频数据可以通过 video 元素的 srcObject 属性来获取。使用 addEventListener() 方法监听 "play" 事件，当视频准备播放时会触发该事件。可以在该事件处理程序中获取视频数据。
-- -------------------- ---- -------
----- ------ - --- -------------------
---------------
----- ------------ - -----------------------------------
------------------------------------- -- -- -
----- ------------- - ---------------------------------
----- ------------- - -------------------------------
----- ----- - ------------------------
----- ------ - -------------------------
------------------- - ------
-------------------- - -------
-------------- -- -
------------------------------------- -- -- ------ --------
----- --------- - ----------------------------- -- ------ --------
------------------ ------- -----------
-- ----
---示例
下面是一个示例，演示了如何使用 modern-webcamjs 拍照。
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
------- -------------------------------------------------
-------
-------- -
-------- ------
-------------- -----
-
-------------- -
-------- ------
----------- -----
-
--------
-------
------
------ ------------ ----------- ------------ -------- -----------------
------- -----------------------------------
--------
----- ------ - --- -------------------
--------------
-------- -- ------------------- ------- ----------------
------------ -- -------------------- -------- -------- ------
----- ------ - -----------------------------------------
-------------------------------- ----- -- -- -
--- -
----- --------- - ----- --------------
------------------ ------- -----------
-
---------- -
-------------------- --------- ------- -----
-
---
---------
-------
-------结论
modern-webcamjs 是一个非常实用的 npm 包，它提供了方便易用的 API，能够帮助开发者快速集成摄像头在网站中的基本功能。本篇文章详细介绍了 modern-webcamjs 的使用方法和 API，同时给出了实用的示例代码。希望能够对读者有所学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e2930