mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
151 lines
3.8 KiB
Text
151 lines
3.8 KiB
Text
---
|
||
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
|
||
[StackBlitz](https://stackblitz.com/edit/vitejs-vite-zaqyaf?file=main.js).
|
||
|
||
:::
|
||
|
||
## 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',
|
||
},
|
||
};
|
||
```
|