抠丁客 抠丁客
项目
版本
编辑 (2024/7/10)

Uppy 摄像头

@uppy/webcam 插件允许您在桌面和移动设备上使用内置摄像头拍照和录制视频。

何时应该使用它？

当您希望用户能够使用他们的摄像头时。此插件是单独发布的，但专门为 Dashboard 制作。技术上，您可以不使用它，但这并不被官方支持。

安装

  • npm

    npm install @uppy/webcam

  • yarn

    yarn add @uppy/webcam

  • CDN

    <!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { Uppy, Dashboard, Webcam } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    const uppy = new Uppy()
    uppy.use(Dashboard, { inline: true, target: 'body' })
    uppy.use(Webcam)
</script>

使用

注意

要在 Chrome 中使用 Webcam 插件，您的站点必须通过 https 提供服务 。此限制不适用于 localhost，因此在开发过程中不必绕太多弯路。

import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import Webcam from "@uppy/webcam";

import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";
import "@uppy/webcam/dist/style.min.css";

new Uppy().use(Dashboard, { inline: true, target: "body" }).use(Webcam);

API

选项

id

此插件的唯一标识符（ string，默认值：'Webcam' ）。

target

放置拖放区域的 DOM 元素、CSS 选择器或插件（ string，Element，Function，或 UIPlugin，默认：Dashboard ）。

countdown

拍照时：等待多少秒后再实际拍摄快照（ boolean，默认：false ）。

如果设置为 false 或 0，则立即拍摄快照。这也会在拍摄照片前通过 Informer 显示一条 “微笑！” 消息。

onBeforeSnapshot

在拍摄快照之前调用的钩子函数（ Function，默认：Promise.resolve ）。

Webcam 插件会等待返回的 Promise 解析后才拍摄快照。这可以用来实现对 countdown 选项的变种，例如。

modes

允许的录制模式类型（ Array，默认：[] ）。

  • video-audio - 录制包含音频和视频的视频文件。
  • video-only - 仅使用摄像头录制视频文件，不录制音频。
  • audio-only - 仅使用用户的麦克风录制音频文件。
  • picture - 使用摄像头拍照。

默认情况下，所有模式都允许，并且 Webcam 插件会显示用于录制视频以及拍照的控件。

mirror

配置是否镜像相机预览图像（ boolean，默认：true ）。

此选项在使用前置摄像头自拍时很有用：当你挥动右手时，你会看到预览屏幕上右手在右侧，就像在镜子中一样。但实际上拍照时，它不会被镜像。这是智能手机自拍相机的行为方式。

videoConstraints

配置 MediaTrackConstraints（Object，默认值：{}）。

您可以使用 aspectRatio、width 和 height 属性指定视频流分辨率的可接受范围。每个属性都接受一个具有 { min, ideal, max } 属性的对象。例如，使用 width: { min: 720, max: 1920, ideal: 1920 } 来允许任何宽度在 720 到 1920 像素之间，同时倾向于最高分辨率。

设备有时有多个摄像头，如前后摄像头。使用 facingMode 可以指定应使用哪个：

  • user: 视频源面向用户；例如，智能手机的前置摄像头。
  • environment: 视频源背向用户，因此可以看到他们的环境。这是智能手机的后置摄像头。
  • left: 视频源面向用户但在其左侧，例如朝向用户但在其左肩上方的摄像头。
  • right: 视频源面向用户但在其右侧，例如朝向用户但在其右肩上方的摄像头。

完整的可用属性列表，请查阅 MDN 文档中的 MediaTrackConstraints。

showVideoSourceDropdown

配置是否显示下拉菜单以选择要使用的视频设备（ boolean，默认值：false ）。

如果启用此选项，它将优先于 facingMode 。

showRecordingLength

配置在录制进行时是否显示录制时长（ boolean，默认值：false ）。

preferredVideoMimeType

设置视频录制的首选MIME类型，例如'video/webm'（ string，默认值：null ）。

如果浏览器支持给定的MIME类型，视频将以该格式录制。如果浏览器不支持，则使用浏览器默认格式。如果没有给出首选视频MIME类型，Webcam插件将优先考虑在 allowedFileTypes 限制中列出的类型（如果有）。

preferredImageMimeType

设置图像的首选MIME类型，例如 'image/png'（ string ，默认值：image/jpeg ）。

如果浏览器支持渲染给定的MIME类型，图像将以该格式存储。否则，默认使用 image/jpeg 。如果没有给出首选图像MIME类型，Webcam插件将优先考虑在 allowedFileTypes 限制中列出的类型（如果有）。

mobileNativeCamera

在移动设备和平板上用原生设备相机替换 Uppy 的自定义相机 UI（ Function: boolean 或 boolean，默认值：isMobile() ）。

这将显示 “拍照” 或 “录制视频” 按钮，显示哪些按钮取决于 modes 选项。

您可以设置一个布尔值来强制启用/禁用此功能，或设置一个返回布尔值的函数。默认情况下，我们使用 is-mobile 包。

locale

export default {
	strings: {
		pluginNameCamera: '摄像头',
		noCameraTitle: '摄像头不可用',
		noCameraDescription:
			'为了拍照或录像，请连接摄像头设备',
		recordingStoppedMaxSize:
			'录制已停止，因为文件大小即将超过限制',
		submitRecordedFile: '提交录制的文件',
		discardRecordedFile: '丢弃录制的文件',
		// 当设置了`countdown`选项，在拍照前显示。
		smile: '微笑！',
		// 用作拍摄照片按钮的标签。
		// 这不会被视觉渲染，但会被屏幕阅读器识别。
		takePicture: '拍摄照片',
		// 用作开始视频录制按钮的标签。
		// 这不会被视觉渲染，但会被屏幕阅读器识别。
		startRecording: '开始视频录制',
		// 用作停止视频录制按钮的标签。
		// 这不会被视觉渲染，但会被屏幕阅读器识别。
		stopRecording: '停止视频录制',
		// 用作录制时长计数器的标签。参见showRecordingLength选项。
		// 这不会被视觉渲染，但会被屏幕阅读器识别。
		recordingLength: '录制时长 %{recording_length}',
		// 在“允许访问”屏幕上的标题。
		allowAccessTitle: '请允许访问您的摄像头',
		// 在“允许访问”屏幕上的描述。
		allowAccessDescription:
			'为了使用摄像头拍照或录像，请允许此网站访问您的摄像头。',
	},
};
在本文档中