Skip to main content

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 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.


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.


npm install @uppy/screen-capture


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




A unique identifier for this plugin (string, default: 'ScreenCapture').


Configures the title / name shown in the UI, for instance, on Dashboard tabs (string, default: 'Screen Capture').


DOM element, CSS selector, or plugin to place the drag and drop area into (string, Element, Function, or UIPlugin, default: Dashboard).


Options passed to MediaDevices.getDisplayMedia() (Object, default: null).

See the MediaTrackConstraints for a list of options.


Options passed to MediaDevices.getUserMedia() (Object, default: null).

See the MediaTrackConstraints for a list of options.


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.


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