From 8465282e24ba67e9407db64c6b3dc8ae25f48665 Mon Sep 17 00:00:00 2001 From: Merlijn Vos Date: Tue, 2 Nov 2021 11:25:55 +0100 Subject: [PATCH] Create docs for `@uppy/screen-capture` (#3282) Co-authored-by: Antoine du Hamel --- packages/@uppy/screen-capture/README.md | 4 +- website/src/docs/screen-capture.md | 103 ++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 website/src/docs/screen-capture.md diff --git a/packages/@uppy/screen-capture/README.md b/packages/@uppy/screen-capture/README.md index 6fb81a7340..d9043ddd2b 100644 --- a/packages/@uppy/screen-capture/README.md +++ b/packages/@uppy/screen-capture/README.md @@ -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. @@ -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 diff --git a/website/src/docs/screen-capture.md b/website/src/docs/screen-capture.md new file mode 100644 index 0000000000..ea9a819dcd --- /dev/null +++ b/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 +}) +``` + +Try it live + +## 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: {}`