Uppy 屏幕录制
@uppy/screen-capture
插件可以录制你的屏幕或应用程序,并将其保存为视频。
何时使用此功能?
当你希望用户在他们的电脑上录制屏幕时。此插件仅在支持 getDisplayMedia API
的桌面浏览器上工作。如果检测不到对该 API 的支持,屏幕录制插件将不会被安装,因此你无需做任何事情。
注意
要在基于 Chromium 的浏览器中使用屏幕录制插件, 你的站点必须通过 https 提供服务 。这一限制在
localhost
上不适用,所以在开发过程中你不必费太多周折。
安装
npm
npm install @uppy/screen-capture
yarn
yarn add @uppy/screen-capture
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: "正在录制",
},
};