Uppy is an open source project by Transloadit
Transloadit Community Plan: free hosted Companion & tusd, unlimited uploading, and 5GB/mo encoding traffic!

Screen capture

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

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.

import ScreenCapture from '@uppy/screen-capture'

uppy.use(ScreenCapture, {
  // Options
})

Try it live

Installation

This plugin is published as the @uppy/screen-capture package.

Install from NPM:

npm install @uppy/screen-capture

In the CDN package, the plugin class is available on the Uppy global object:

const { ScreenCapture } = Uppy

CSS

The @uppy/screen-capture plugin requires the following CSS for styling:

import '@uppy/core/dist/style.css'
import '@uppy/screen-capture/dist/style.css'

Import general Core styles from @uppy/core/dist/style.css first, then add the ScreenCapture styles from @uppy/screen-capture/dist/style.css. A minified version is also available as style.min.css at the same path. The way to do import depends on your build system.

Options

The @uppy/screen-capture plugin has the following configurable options:

uppy.use(ScreenCapture, {
  displayMediaConstraints: {
    video: {
      width: 1280,
      height: 720,
      frameRate: {
        ideal: 3,
        max: 5,
      },
      cursor: 'motion',
      displaySurface: 'monitor',
    },
  },
  userMediaConstraints: {
    audio: true,
  },
  preferredVideoMimeType: 'video/webm',
})

id: 'ScreenCapture'

A unique identifier for this plugin. It defaults to 'ScreenCapture'.

title: 'Screen capture'

Configures the title / name shown in the UI, for instance, on Dashboard tabs. It defaults to 'Screen capture'.

target: null

DOM element, CSS selector, or plugin to mount ScreenCapture into.

displayMediaConstraints

Options passed to MediaDevices.getDisplayMedia(). See the MediaTrackConstraints for a list of options.

userMediaConstraints

Options passed to MediaDevices.getUserMedia(). See the MediaTrackConstraints for a list of options.

preferredVideoMimeType: null

Set the preferred mime type for video recordings, for example 'video/webm'. 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: {}

module.exports = {
  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',
  },
}