最近，前端开发人员正在寻找一个在浏览器中使用摄像头的解决方案，以便捕捉视频和照片。react-webcam-westbrook 是一个在 React 中使用摄像头的 npm 包。它允许您轻松访问用户的摄像头并捕捉视频和照片。
在本文中，我们将详细介绍 react-webcam-westbrook 包的使用方法以及它可以帮助您创建哪些类型的项目。
安装
首先，使用以下命令安装 react-webcam-westbrook 包：
npm install --save react-webcam-westbrook
使用
要设置摄像头并捕捉视频或照片，需要使用 <Webcam> 组件。在 React 应用程序中引入 Webcam 并在 render() 函数中使用它。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- -------------------------
----- --- ------- --------- -
-------- -
------ -
-----
------- --
------
--
-
-
------ ------- ----上面的代码将在浏览器中从您的摄像头捕捉视频。现在让我们看一些更高级的用例。
捕捉照片
要从 webcam 捕捉照片，请使用 <Webcam> 带有 screenshotFormat 属性。
<Webcam screenshotFormat="image/jpeg" />
现在，您可以通过调用 getScreenshot() 方法访问捕捉的照片。
-- -------------------- ---- -------
----- --- ------- --------- -
------ - ------ -- -
----------- - -------
--
------- - -- -- -
----- -------- - ----------------------------
--
-------- -
------ -
-----
-------
-------------
------------
-----------------
-----------------------------
------------
--
------- ------------------------------ --------------
------
--
-
-检测摄像头
要检查摄像头是否可用，请使用 <Webcam> 带有 onUserMediaError 和 onUserMedia 属性。
-- -------------------- ---- -------
----- --- ------- --------- -
----- - -
---------- ------
--
------ - ------ -- -
----------- - -------
--
--------------- - -- -- -
---------------
---------- -----
---
--
-------------------- - -- -- -
---------------
---------- ------
---
--
-------- -
----- - --------- - - -----------
------ -
-----
---------- - -
------- ------------- ------------ ----------------- ------------ --
- - -
------- ------ --------------
--
------
--
-
-深入学习
这里有一些其他技术和用法您可以使用 react-webcam-westbrook 包来深入学习。
检测移动设备
要检测移动设备并适当地设置 height 和 width 属性，请使用以下代码：
-- -------------------- ---- ------- ----- -------- - ------------------------------------------ ------- ------------- ---------------- - --- - ---- ----------------- ----------------------------- --------------- - ---- - ---- --
自定义样式
要自定义 <Webcam> 的样式，请重写 .react-webcam-westbrook Webcam CSS 类。
例如，以下样式将更改视频框的背景颜色：
.react-webcam-westbrook Webcam {
background-color: #000;
}结论
在本文中，我们深入学习了 react-webcam-westbrook npm 包，它允许您轻松访问用户的摄像头并捕捉视频和照片。我们看了一些基本用法，例如捕捉照片和检测摄像头，以及一些高级用法，例如检测移动设备和自定义样式。如果您正在创建需要使用摄像头的 React 应用程序，那么 react-webcam-westbrook 包是必不可少的工具。
希望这篇文章可以帮助你学习如何使用 react-webcam-westbrook 包，或者作为一个参考指南供您随时查阅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609c81e8991b448ded63