在前端开发中，我们经常需要使用摄像机进行视频拍摄或者视频通讯等功能。而 mighty-webcamjs 是一个基于 WebRTC 接口的 Web 摄像头操作库，可以快速、简单地在网页中添加视频捕获的功能，支持调用摄像头、播放音视频等功能。
安装
可以通过 npm 安装 mighty-webcamjs 包：
npm install mighty-webcamjs --save
如果直接下载源码，则需要手动引入代码中的 webcam.js 文件。
使用
在 HTML 文件中引入 webcam.js 文件：
<script src="node_modules/mighty-webcamjs/dist/webcam.min.js"></script>
或者在 JavaScript 文件中引入：
import Webcam from 'mighty-webcamjs';
方法
Webcam.init()
初始化摄像头。
-- -------------------- ---- -------
-------------
------ ----
------- ----
----------- ----
------------ ----
------------- -------
------------- ---
---- ---
------------ -
------ -----
------ -----
--
------- -------- -- ---
-------- -------- ----- ---
---------- -------- -- --
---width: 摄像头视频宽度（默认为 640）。height: 摄像头视频高度（默认为 480）。dest_width: 目标宽度（默认为 640）。dest_height: 目标高度（默认为 480）。image_format: 图片格式（默认为 jpeg）。jpeg_quality: 图片质量（默认为 90）。fps: 帧率（默认为 30）。constraints: 视频约束条件（默认为{ video: true, audio: false }）。onInit: 摄像头初始化回调函数。onError: 错误回调函数。onSuccess: 成功回调函数。
Webcam.set()
设置参数。
Webcam.set({
width: 640,
height: 480,
image_format: 'png',
jpeg_quality: 100
});width: 宽度值。height: 高度值。image_format: 图片格式。jpeg_quality: 图片质量。
Webcam.reset()
重置参数。
Webcam.reset();
Webcam.attach()
挂载摄像头到 DOM 节点。
Webcam.attach('#camera');#camera为 DOM 节点的 ID。
Webcam.snap()
截图并返回图片数据。
Webcam.snap(function(data_uri) {
document.querySelector('img').src = data_uri;
});Webcam.upload()
上传图片到服务器。
Webcam.upload(data_uri, 'upload.php', function() {
alert('Upload complete!');
});data_uri：图片数据。upload.php：上传地址。function()：上传完成回调函数。
示例代码
以下为一个简单的示例代码，可以进行摄像头的操作、截图、上传等功能。
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------------
-------
------
---- ------------------
------- -----------------------------
---- ------------ --
------- ---------------------------------------------------------------
--------
-------------
------ ----
------- ----
----------- ----
------------ ----
------------- -------
------------- ---
---- ---
------------ -
------ -----
------ -----
--
------- -------- -- -
-------------------------
--
-------- -------- ----- -
------------- ------ - - -----
--
---------- -------- -- --
---
------------------------------------------------------------ -------- -- -
------------------------------ -
-------------------------------------- - ---------
----------------------- ------------- -------- -- -
------------- ------------
---
---
---
---------
-------
-------总结
使用 mighty-webcamjs，可以快速、简单地进行摄像头操作，同时支持截图、上传等功能。本文对其 API 进行了详细的介绍和示例演示，希望对大家在前端开发中使用摄像头有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f451d8e776d08040f38