Skip to content

Commit

Permalink
Create docs for @uppy/screen-capture (#3282)
Browse files Browse the repository at this point in the history
Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
  • Loading branch information
Murderlon and aduh95 committed Nov 2, 2021
1 parent 639988f commit 8465282
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/@uppy/screen-capture/README.md
Expand Up @@ -7,7 +7,7 @@
![CI status for Companion tests](https://github.com/transloadit/uppy/workflows/Companion/badge.svg)
![CI status for browser tests](https://github.com/transloadit/uppy/workflows/End-to-end%20tests/badge.svg)

The Webcam plugin for Uppy lets you take photos and record videos with a built-in camera on desktop and mobile devices.
The screen capture plugin for Uppy lets you take photos and record videos with a built-in camera on desktop and mobile devices.

Uppy is being developed by the folks at [Transloadit](https://transloadit.com), a versatile file encoding service.

Expand All @@ -33,7 +33,7 @@ Alternatively, you can also use this plugin in a pre-built bundle from Transload

## Documentation

Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/webcam).
Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/screen-capture).

## License

Expand Down
103 changes: 103 additions & 0 deletions website/src/docs/screen-capture.md
@@ -0,0 +1,103 @@
---
type: docs
order: 4
title: "Screen capture"
module: "@uppy/screen-capture"
permalink: docs/screen-capture/
category: "Sources"
tagline: "upload selfies or audio / video recordings"
---

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](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.
```js
import ScreenCapture from '@uppy/screen-capture'

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

<a class="TryButton" href="/examples/dashboard/">Try it live</a>

## Installation

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

Install from NPM:

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

In the [CDN package](/docs/#With-a-script-tag), the plugin class is available on the `Uppy` global object:

```js
const { ScreenCapture } = Uppy
```

## CSS

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

```js
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:

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

### `locale: {}`

0 comments on commit 8465282

Please sign in to comment.