Screen capture
The @uppy/screen-capture plugin can record your screen or an application and
save it as a video.
Try out the live example or take it for a spin in CodeSandbox.
When should I use this?
When you want users record their screen on their computer. This plugin only
works on desktop browsers which support
getDisplayMedia API.
If no support for the API is detected, Screen Capture won’t be installed, so you
don’t have to do anything.
To use the screen capture plugin in a Chromium-based browser,
your site must be served over https.
This restriction does not apply on localhost, so you don’t have to jump
through many hoops during development.
Install
- NPM
- Yarn
- CDN
npm install @uppy/screen-capture
yarn add @uppy/screen-capture
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.24.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.24.3/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(Dashboard, { inline: true, target: 'body' })
uppy.use(ScreenCapture, { target: Uppy.Dashboard })
</script>
Use
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, { target: Dashboard });
API
Options
id
A unique identifier for this plugin (string, default: 'ScreenCapture').
title
Configures the title / name shown in the UI, for instance, on Dashboard tabs
(string, default: 'Screen Capture').
target
DOM element, CSS selector, or plugin to place the screen capture into (string
or Element, default: null).
displayMediaConstraints
Options passed to
MediaDevices.getDisplayMedia()
(Object, default: null).
See the
MediaTrackConstraints
for a list of options.
userMediaConstraints
Options passed to
MediaDevices.getUserMedia()
(Object, default: null).
See the
MediaTrackConstraints
for a list of options.
preferredVideoMimeType
Set the preferred mime type for video recordings, for example 'video/webm'
(string, default: null).
If the browser supports the given mime type, the video will be recorded in this format. If the browser does not support it, it will use the browser default.
If no preferred video mime type is given, the ScreenCapture plugin will prefer
types listed in the allowedFileTypes restriction,
if any.
locale
export default {
strings: {
startCapturing: 'Begin screen capturing',
stopCapturing: 'Stop screen capturing',
submitRecordedFile: 'Submit recorded file',
streamActive: 'Stream active',
streamPassive: 'Stream passive',
micDisabled: 'Microphone access denied by user',
recording: 'Recording',
},
};