Uppy 屏幕录制

@uppy/screen-capture 插件可以录制你的屏幕或应用程序，并将其保存为视频。

何时使用此功能？

当你希望用户在他们的电脑上录制屏幕时。此插件仅在支持 getDisplayMedia API 的桌面浏览器上工作。如果检测不到对该 API 的支持，屏幕录制插件将不会被安装，因此你无需做任何事情。

注意

要在基于 Chromium 的浏览器中使用屏幕录制插件，你的站点必须通过 https 提供服务。这一限制在 localhost 上不适用，所以在开发过程中你不必费太多周折。

安装

npm
```
npm install @uppy/screen-capture
```
Shell
yarn
```
yarn add @uppy/screen-capture
```
Shell

CDN

警告

此捆绑包包含了大部分Uppy插件，因此不建议在生产环境中使用此方法，因为尽管您可能仅仅用到其中一小部分插件，但用户却需要下载全部插件。
然而，这对于加速您的开发环境非常有帮助，所以在起步阶段，请放心使用它来提升开发速度。


<!-- 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, ScreenCapture } 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(ScreenCapture)
</script>

使用


import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import ScreenCapture from "@uppy/screen-capture";

import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";
import "@uppy/screen-capture/dist/style.min.css";

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

API

选项

`id`

该插件的唯一标识符（ string，默认：'ScreenCapture' ）。

`title`

配置在 UI 中显示的标题/名称，例如，在 Dashboard 标签上（ string，默认：'屏幕录制' ）。

`target`

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

`displayMediaConstraints`

传递给 MediaDevices.getDisplayMedia() 的选项（ Object，默认：null ）。

参见 MediaTrackConstraints 获取选项列表。

`userMediaConstraints`

传递给 MediaDevices.getUserMedia() 的选项（ Object，默认：null ）。

参见 MediaTrackConstraints 获取选项列表。

`preferredVideoMimeType`

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

如果浏览器支持给定的 MIME 类型，视频将以该格式录制。如果浏览器不支持，它将使用浏览器的默认值。

如果没有给出首选视频 MIME 类型，ScreenCapture 插件将优先考虑 allowedFileTypes限制中列出的类型（如果有）。

`locale`


export default {
  strings: {
    startCapturing: "开始屏幕录制",
    stopCapturing: "停止屏幕录制",
    submitRecordedFile: "提交已录制文件",
    streamActive: "流活跃",
    streamPassive: "流被动",
    micDisabled: "用户拒绝了麦克风访问权限",
    recording: "正在录制",
  },
};

Uppy 屏幕录制

何时使用此功能？

安装

使用

API

选项

id

title

target

displayMediaConstraints

userMediaConstraints

preferredVideoMimeType

locale

在本文档中