Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create docs for @uppy/screen-capture #3282

Merged
merged 2 commits into from Nov 2, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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 Chrome, [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.
Murderlon marked this conversation as resolved.
Show resolved Hide resolved

```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: {}`