uppy/docs/sources/screen-capture.mdx

---
sidebar_position: 2
slug: /screen-capture
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import UppyCdnExample from '/src/components/UppyCdnExample';

# 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](/examples) or take it for a spin in
[CodeSandbox](https://codesandbox.io/s/uppy-dashboard-xpxuhd).

:::

## 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`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia).
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](https://developers.google.com/web/updates/2015/10/chrome-47-webrtc#public_service_announcements).
This restriction does not apply on `localhost`, so you don’t have to jump
through many hoops during development.

:::

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/screen-capture
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/screen-capture
```

  </TabItem>

  <TabItem value="cdn" label="CDN">
    <UppyCdnExample>
      {`
        import { Uppy, Dashboard, ScreenCapture } from "{{UPPY_JS_URL}}"
        const uppy = new Uppy()
        uppy.use(Dashboard, { inline: true, target: 'body' })
        uppy.use(ScreenCapture, { target: Uppy.Dashboard })
      `}
    </UppyCdnExample>
  </TabItem>
</Tabs>

## Use

```js {3,7,11} showLineNumbers
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()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)
(`Object`, default: `null`).

See the
[`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints)
for a list of options.

#### `userMediaConstraints`

Options passed to
[`MediaDevices.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
(`Object`, default: `null`).

See the
[`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/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](/docs/uppy/#restrictions),
if any.

#### `locale`

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