ScreenCapture plugin for screenshots / screen recordings

examples/dev/Dashboard.js

@@ -7,6 +7,7 @@ const Dropbox = require('@uppy/dropbox/src')
 const GoogleDrive = require('@uppy/google-drive/src')
 const Url = require('@uppy/url/src')
 const Webcam = require('@uppy/webcam/src')
+const ScreenCapture = require('@uppy/screen-capture/src')
 const GoldenRetriever = require('@uppy/golden-retriever/src')
 const Tus = require('@uppy/tus/src')
 const AwsS3 = require('@uppy/aws-s3/src')
@@ -65,6 +66,7 @@ module.exports = () => {
     .use(OneDrive, { target: Dashboard, companionUrl: COMPANION_URL })
     .use(Url, { target: Dashboard, companionUrl: COMPANION_URL })
     .use(Webcam, { target: Dashboard })
+    .use(ScreenCapture, { target: Dashboard })
     .use(Form, { target: '#upload-form' })
 
   switch (UPLOADER) {

package.json

@@ -70,6 +70,7 @@
     "@uppy/url": "file:packages/@uppy/url",
     "@uppy/utils": "file:packages/@uppy/utils",
     "@uppy/webcam": "file:packages/@uppy/webcam",
+    "@uppy/screen-capture": "file:packages/@uppy/screen-capture",
     "@uppy/xhr-upload": "file:packages/@uppy/xhr-upload",
     "remark-lint-uppy": "file:private/remark-lint-uppy",
     "uppy": "file:packages/uppy",

packages/@uppy/locales/src/en_US.js

@@ -61,6 +61,8 @@ en_US.strings = {
   importFrom: 'Import from %{name}',
   loading: 'Loading...',
   logOut: 'Log out',
+  micDisabled: 'Microphone access denied by user',
+  micIsOn: 'Microphone is on',
   myDevice: 'My Device',
   noDuplicates: 'Cannot add the duplicate file \'%{fileName}\', it already exists',
   noFilesFound: 'You have no files or folders here',
@@ -77,6 +79,7 @@ en_US.strings = {
     '0': 'Processing %{smart_count} file',
     '1': 'Processing %{smart_count} files'
   },
+  recording: 'Recording',
   recordingLength: 'Recording length %{recording_length}',
   recordingStoppedMaxSize: 'Recording stopped because the file size is about to exceed the limit',
   removeFile: 'Remove file',
@@ -88,13 +91,20 @@ en_US.strings = {
   saveChanges: 'Save changes',
   selectAllFilesFromFolderNamed: 'Select all files from folder %{name}',
   selectFileNamed: 'Select file %{name}',
+  selectSourceDescription: 'In order to capture your screen, please allow access for this site.',
+  selectSourceTitle: 'Please allow access to your screen',
   selectX: {
     '0': 'Select %{smart_count}',
     '1': 'Select %{smart_count}'
   },
   smile: 'Smile!',
+  startCapturing: 'Begin screen capturing',
   startRecording: 'Begin video recording',
+  stopCapturing: 'Stop screen capturing',
   stopRecording: 'Stop video recording',
+  streamActive: 'Stream active',
+  streamPassive: 'Stream passive',
+  submitRecordedFile: 'Submit captured video',
   takePicture: 'Take a picture',
   timedOut: 'Upload stalled for %{seconds} seconds, aborting.',
   unselectAllFilesFromFolderNamed: 'Unselect all files from folder %{name}',

packages/@uppy/locales/src/fi_FI.js

@@ -132,7 +132,16 @@ fi_FI.strings = {
     '0': 'Sinun pitää valita vähintään %{smart_count} tiedosto',
     '1': 'Sinun pitää valita vähintään %{smart_count} tiedostoa',
     '2': 'Sinun pitää valita vähintään %{smart_count} tiedostoa'
-  }
+  },
+  startCapturing: 'Aloita tallennus',
+  stopCapturing: 'Lopeta tallennus',
+  selectSourceTitle: 'Valitse kaappauksen kohde',
+  selectSourceDescription: 'Salli ruudun jako, jotta tallennus on mahdollista.',
+  submitRecordedFile: 'Hyväksy tallenne',
+  streamActive: 'Jako aktiivinen',
+  streamPassive: 'Jako passiivinen',
+  micDisabled: 'Käyttäjä on estänyt mikrofonin',
+  recording: 'Tallennetaan'
 }
 
 fi_FI.pluralize = function (n) {

packages/@uppy/screen-capture/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Transloadit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/@uppy/screen-capture/README.md

@@ -0,0 +1,41 @@
+# @uppy/webcam
+
+<img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" width="120" alt="Uppy logo: a superman puppy in a pink suit" align="right">
+
+<a href="https://www.npmjs.com/package/@uppy/webcam"><img src="https://img.shields.io/npm/v/@uppy/webcam.svg?style=flat-square"></a>
+<a href="https://travis-ci.org/transloadit/uppy"><img src="https://img.shields.io/travis/transloadit/uppy/master.svg?style=flat-square" alt="Build Status"></a>
+
+The Webcam 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.
+
+## Example
+
+```js
+const Uppy = require('@uppy/core')
+const Webcam = require('@uppy/webcam')
+
+const uppy = Uppy()
+uppy.use(Webcam, {
+  mirror: true,
+  facingMode: 'user'
+})
+```
+
+## Installation
+
+```bash
+$ npm install @uppy/webcam --save
+```
+
+We recommend installing from npm and then using a module bundler such as [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/) or [Rollup.js](http://rollupjs.org/).
+
+Alternatively, you can also use this plugin in a pre-built bundle from Transloadit's CDN: Edgly. In that case `Uppy` will attach itself to the global `window.Uppy` object. See the [main Uppy documentation](https://uppy.io/docs/#Installation) for instructions.
+
+## Documentation
+
+Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/webcam).
+
+## License
+
+[The MIT License](./LICENSE).

packages/@uppy/screen-capture/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@uppy/screen-capture",
+  "description": "Uppy plugin that captures video from display or application.",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "style": "dist/style.min.css",
+  "types": "types/index.d.ts",
+  "keywords": [
+    "file uploader",
+    "uppy",
+    "uppy-plugin",
+    "screen capture",
+    "video",
+    "record",
+    "mediarecorder"
+  ],
+  "homepage": "https://uppy.io",
+  "bugs": {
+    "url": "https://github.com/transloadit/uppy/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/transloadit/uppy.git"
+  },
+  "dependencies": {
+    "@uppy/utils": "file:../utils",
+    "preact": "8.2.9"
+  },
+  "peerDependencies": {
+    "@uppy/core": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@uppy/screen-capture/src/CaptureScreen.js

@@ -0,0 +1,55 @@
+const { h, Component } = require('preact')
+const RecordButton = require('./RecordButton')
+const SubmitButton = require('./SubmitButton')
+const StopWatch = require('./StopWatch')
+const StreamStatus = require('./StreamStatus')
+
+class RecorderScreen extends Component {
+  componentWillUnmount () {
+    this.props.onStop()
+  }
+
+  render () {
+    const { recording, stream: videoStream, recordedVideo } = this.props
+
+    const videoProps = {
+      playsinline: true
+    }
+
+    // show stream
+    if (recording || (!recordedVideo && !recording)) {
+      videoProps.muted = true
+      videoProps.autoplay = true
+      videoProps.srcObject = videoStream
+    }
+
+    // show preview
+    if (recordedVideo && !recording) {
+      videoProps.muted = false
+      videoProps.controls = true
+      videoProps.src = recordedVideo
+
+      // reset srcObject in dom. If not resetted, stream sticks in element
+      if (this.videoElement) {
+        this.videoElement.srcObject = undefined
+      }
+    }
+
+    return (
+      <div class="uppy uppy-ScreenCapture-container">
+        <div class="uppy-ScreenCapture-videoContainer">
+          <StreamStatus {...this.props} />
+          <video ref={videoElement => (this.videoElement = videoElement)} class="uppy-ScreenCapture-video" {...videoProps} />
+          <StopWatch {...this.props} />
+        </div>
+
+        <div class="uppy-ScreenCapture-buttonContainer">
+          <RecordButton {...this.props} />
+          <SubmitButton {...this.props} />
+        </div>
+      </div>
+    )
+  }
+}
+
+module.exports = RecorderScreen

packages/@uppy/screen-capture/src/RecordButton.js

@@ -0,0 +1,38 @@
+const { h } = require('preact')
+
+/**
+ * Control screen capture recording. Will show record or stop button.
+ */
+module.exports = function RecordButton ({ recording, onStartRecording, onStopRecording, i18n }) {
+  if (recording) {
+    return (
+      <button
+        class="uppy-u-reset uppy-c-btn uppy-ScreenCapture-button uppy-ScreenCapture-button--video uppy-ScreenCapture-button--stop-rec"
+        type="button"
+        title={i18n('stopRecording')}
+        aria-label={i18n('stopRecording')}
+        onclick={onStopRecording}
+        data-uppy-super-focusable
+      >
+        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+          <rect x="15" y="15" width="70" height="70" />
+        </svg>
+      </button>
+    )
+  }
+
+  return (
+    <button
+      class="uppy-u-reset uppy-c-btn uppy-ScreenCapture-button uppy-ScreenCapture-button--video"
+      type="button"
+      title={i18n('startCapturing')}
+      aria-label={i18n('stopCapturing')}
+      onclick={onStartRecording}
+      data-uppy-super-focusable
+    >
+      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="40" />
+      </svg>
+    </button>
+  )
+}

packages/@uppy/screen-capture/src/ScreenRecIcon.js

@@ -0,0 +1,13 @@
+const { h } = require('preact')
+
+module.exports = () => {
+  return (
+    <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fill-rule="evenodd">
+        <rect fill="#2C3E50" width="32" height="32" rx="16" />
+        <path d="M24.182 9H7.818C6.81 9 6 9.742 6 10.667v10c0 .916.81 1.666 1.818 1.666h4.546V24h7.272v-1.667h4.546c1 0 1.809-.75 1.809-1.666l.009-10C26 9.742 25.182 9 24.182 9zM24 21H8V11h16v10z" fill="#FFF" fill-rule="nonzero" />
+        <circle fill="#FFF" cx="16" cy="16" r="2" />
+      </g>
+    </svg>
+  )
+}