Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

Screen capture

The @uppy/screen-capture plugin can record your screen or an application and save it as a video.

tip

Try out the live example or take it for a spin in StackBlitz.

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.

note

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 install @uppy/screen-capture

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);

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 drag and drop area into (string, Element, Function, or UIPlugin, default: Dashboard).

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',
},
};