Bladeren bron

Create docs for `@uppy/screen-capture` (#3282)

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>
Merlijn Vos 3 jaren geleden
bovenliggende
commit
8465282e24
2 gewijzigde bestanden met toevoegingen van 105 en 2 verwijderingen
  1. 2 2
      packages/@uppy/screen-capture/README.md
  2. 103 0
      website/src/docs/screen-capture.md

+ 2 - 2
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
 

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