ngx-simple-webcam 是一个方便易用的前端 JavaScript 库，它为 web 应用程序提供了 WebRTC 支持，使其能够在浏览器中访问摄像头和麦克风。本文将介绍 ngx-simple-webcam 库的使用方法和一些示例代码。
安装 ngx-simple-webcam
首先，你需要确保你已经安装了 Node.js 和 npm。打开终端并输入以下命令进行安装：
npm install ngx-simple-webcam --save
这将在你的项目中安装 ngx-simple-webcam 库，同时将其添加到 package.json 的依赖中。
配置 Webpack
如果你的项目使用 Webpack，请在 webpack.config.js 文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- --- ----- --------
------- -
------ -
-
----- --------
------- ---------------
-------- --------------
-
-
-
-这样做的原因是 ngx-simple-webcam 依赖于 WebRTC，而 WebRTC 使用了一些 ES6 语法，使用这个配置将帮助我们将源代码转换成支持浏览器运行的 ES5 代码。
使用 ngx-simple-webcam
在你的 JavaScript 中导入 ngx-simple-webcam 库：
import Webcam from 'ngx-simple-webcam';
然后，你可以使用 Webcam 类创建一个新的摄像头对象：
const webcam = new Webcam(document.getElementById('my-camera'));
webcam.start();这将启动摄像头并在指定的元素中显示视频流。
控制摄像头
ngx-simple-webcam 库提供了一些函数和对象来控制摄像头和视频流。例如，我们可以指定摄像头的分辨率：
webcam.setResolution(640, 480);
或者我们可以指定视频流的帧速率：
webcam.setFrameRate(30);
我们还可以获取当前的视频流、暂停或恢复视频流、或者拍照并获取图片：
const stream = webcam.getStream(); webcam.pause(); webcam.resume(); const photo = webcam.capture();
示例代码
以下是一个简单的示例，演示如何使用 ngx-simple-webcam 库在浏览器中访问摄像头和麦克风：
-- -------------------- ---- -------
------
------
------------- ------------
----- ----------------
----- --------------- ---------------------------- -------------------
-------
------
---- ----------------------------
------- -------------------------
-------
-------import Webcam from 'ngx-simple-webcam';
const webcam = new Webcam(document.getElementById('camera-container'));
webcam.start();总结
本文介绍了如何使用 ngx-simple-webcam 库在浏览器中访问摄像头和麦克风。我们还介绍了如何使用一些库函数来控制摄像头和视频流。相信通过这篇文章，你已经对 ngx-simple-webcam 有了一定的了解。祝你使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f7d9381d61a3540f2c