前言
在前端开发中，常常需要使用摄像头进行图片或视频的采集。而使用 webcamjs-extended 这个 npm 包可以让我们在 web 应用中轻松地实现这一功能。
本文将为大家介绍 webcamjs-extended 的使用教程，详细讲解如何通过该 npm 包进行摄像头的调用与使用，并提供相应的实例代码，方便读者参考。
安装
首先，我们需要在终端中使用 npm 或 yarn 进行安装：
npm install --save webcamjs-extended
或者
yarn add webcamjs-extended
安装完成后，我们可以通过以下方式使用该 npm 包：
import Webcam from 'webcamjs-extended';
调用摄像头
在调用摄像头之前，我们需要在 HTML 文件中添加一个 video 标签，并且为其设置 id。例如：
<video id="myVideo" autoplay></video>
接下来，我们可以通过以下方式调用摄像头：
Webcam.init('myVideo');其中，myVideo 是我们所设置的 video 标签的 id。
拍照
拍照需要调用 Webcam.snap() 方法，该方法会返回一张图片的 base64 编码，我们可以将其显示在页面上。例如：
const base64 = Webcam.snap();
document.getElementById('myImg').src = base64;其中，myImg 是一个 img 标签，用于显示拍到的照片。示例代码如下：
-- -------------------- ---- -------
------ ------------ -----------------
------- ------------------------
---- ---------- ------ ------ --
--------
------ ------ ---- --------------------
----- --- - -----------------------------------
----------------------------- -- -- -
----- ------ - --------------
------------------------------------ - -------
---
-----------------------
---------视频采集
如果需要在 web 应用中进行视频采集，我们可以通过 Webcam.stream() 方法来实现。例如：
Webcam.stream().then(mediaStream => {
const video = document.getElementById('myVideo');
video.srcObject = mediaStream;
});该方法会返回一个 Promise，其中的 resolve 参数为一个 MediaStream 对象，我们可以将其赋值给 video 标签的 srcObject 属性，使其进行采集并显示。
示例代码如下：
-- -------------------- ---- -------
------ ------------ -----------------
------- ---------------------------
--------
------ ------ ---- --------------------
----- --- - ------------------------------------
----------------------------- -- -- -
-------------------------------- -- -
----- ----- - -----------------------------------
--------------- - ------------
---
---
---------总结
通过以上介绍，我们可以轻松地使用 webcamjs-extended 这个 npm 包来调用摄像头、拍照或进行视频采集等操作。这对于一些需要进行人脸识别、人脸表情识别等操作的网站或应用来说非常方便。期望本文对读者有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cbf81e8991b448e63a2