在前端开发中，拍照、上传图片这样的操作是非常常见的。本文将介绍 npm 包 camerajs，它为我们提供了拍照功能的解决方案。
什么是 camerajs
camerajs 是一个轻量级的 JavaScript 库，可以轻松地在 web 应用程序中实现拍照。它不需要 Flash 或任何其他插件，只需要一个支持 getUserMedia() 的浏览器即可使用。同时，camerajs 可以与 React、Vue 等框架很好地配合使用。
安装 camerajs
camerajs 可以通过 npm 安装，使用以下命令：
npm install camerajs
使用 camerajs
使用 camerajs 相对简单，只需要导入 camerajs 的库并在 HTML 页面中添加一个 <video> 标签即可。
HTML 页面
在 HTML 页面中添加一个 <video> 标签，用于预览、拍照。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
-------
------
------ ---------- ----------- -----------------
------- ----------------------------
------- ------------------------------------------------------------
------- --------------------------
-------
-------JavaScript 代码
在 JavaScript 中，你需要先实例化 Camera 类，然后使用 start() 方法打开摄像头并启动预览。一旦预览成功，你可以触发拍照事件。
-- -------------------- ---- -------
------ ------ ---- -----------
----- ------ - --- -----------------------------------------
--------------
-------------- -- ------------------------------ --------
---------------------------------------------------------------- -- -- -
---------------------------------- -- -
-- ------------
------------------- -- ----- - ------ -----
--
-------------- -- --------------------- --------
---API 文档
camerajs 提供了以下 API：
Camera 类
构造函数
new Camera(video: HTMLVideoElement, options?: CameraOptions)
参数：
video: HTMLVideoElement- 用于预览、拍照的<video>标签options?: CameraOptions- 可选参数，详见后文
实例方法
start(): Promise<void>
打开摄像头并启动预览。
stop(): void
停止预览。
takeSnapshot(): Promise<any>
拍照并返回 base64 编码的图片。
getSnapshotBlob(): Promise<Blob>
拍照并返回 Blob 对象。
CameraOptions 类
{
facingMode: 'user' | 'environment',
resolution: { width: number; height: number; } | string,
logger: (level: LogLevel, message: string) => void,
}参数：
facingMode: 'user' | 'environment'- 摄像头方向，默认为 'environment'（后置摄像头）resolution: { width: number; height: number; } | string- 分辨率，默认为 'hd'（高清）logger: (level: LogLevel, message: string) => void- 日志记录器，默认为 console
示例代码
如果你想要完整的示例代码，可以访问 camerajs 的 GitHub 仓库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa881e8991b448d82b2