Uppy: [Feature] Create plugin for screenshots / screen recordings

[rajsite]

It would be useful to use getDisplayMedia() from the Screen Capture API to allow users to take a screenshot of their window and upload. This would be useful for a support form, etc.

https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture

[rajsite]

Related to existing closed feature https://github.com/transloadit/uppy/issues/148

The difference is that today the getDisplayMedia api is now shipping in Chrome, Firefox, Edge, and is in development for Safari: https://www.chromestatus.com/feature/6744724455030784

[goto-bus-stop]

Having additional Webcam modes for

• modes: ['screenshot']
• modes: ['screencast']

seems like a good idea. I don't _think_ the core team will have capacity to work on this soon, but PRs would be welcome (and we should be able to provide some guidance there) :)

[goto-bus-stop]

@arturi mentioned it probably makes more sense as a separate plugin like Uppy.ScreenCapture rather than adding it into Webcam. The UI will need to be different, there's no need for the video playback and mirroring stuff, because you won't be looking at Uppy when you're recording something else on your screen anyway.

[kvz]

We like this idea and are hoping the community can chime in on this one, so we've marked it as Help Wanted as well as pinned it to the repo :crossed_fingers:!

[jukakoski]

This would be very useful feature in our app, therefore I started build a new plugin for this one. Basic concept is already functional :)

[jukakoski]

Here is a preview of capturing screen using getDisplayMedia.
I think it's important to be able to preview the recorded file prior to upload. User has to submit the file with green check button which is extra step in this process flow. It might be bad UX, but I couldn't figure out any other way to make it work. By the way, I copied the UI for Record and Stop buttons from webcam, but I'm not 100% satisfied with the UI. Maybe stop button should be in different color to distinguish from record button (just an idea).

https://www.youtube.com/watch?v=xYVnyFqYflo

[arturi]

@jukakoski thanks so much for sharing your work! looks very exciting, I’d love to see a PR and make this part of Uppy. I agree, the UI in the Webcam could be improved, and then it will be mirrored to your plugin. We could do an iteration once the functionality is in place. Please let us know if we can help in some way!

[jukakoski]

I have took this plugin a bit further. getDisplayMedia doesn't support audio, thus I added getUserMedia stream to get audio for this plugin. Basically plugin will ask user to give access also for mic, but with this approach this plugin will be very useful tool for making educational video clips etc.
I fine tuned the UI also a little bit. What do you think about rec/stop button? Are you planning to move the button after iteration under common UI components?

Here is a capture of latest version.
https://www.youtube.com/watch?v=7NpMUhL05tU

[arturi]

@jukakoski Sorry for the long response! The comment slipped from my radar. Sorry.

getDisplayMedia doesn't support audio, thus I added getUserMedia stream to get audio for this plugin.

👍 I agree, it’s useful to have audio as well. Mic access is a fair tradeoff and kind of expected when you do some kind of video recording, even if it’s just the screen.

What do you think about rec/stop button? Are you planning to move the button after iteration under common UI components?

We might move it into a common component, yes. I like the concept of it, we can tweak the visual aspect just a bit to match Uppy/Webcam plugin.

Now the whole team is really looking forward to your PR 💯 Thank you.

[rajsite]

Do you think the plugin would also support capturing a single image similar to the webcam workflow?

[arturi]

@jukakoski 👋 wondering how is the progress, maybe you could send the PR already and we move the discussion there? Really looking forward to this!

[jukakoski]

@arturi Sorry about the silence. I have been quite busy last week...
I deployed this feature to prod in our app this week and some things need to be fixed. At least Samsung S8 informs incorrectly support for getDisplayMedia, thus it shows the screencap button even thought it's not capable to use getDisplayMedia. As a quick fix I disabled the screencap in mobile devices. Is there or is there on the road map any plans to add mobile device detection in core plugin component?

[xoraingroup]

@jukakoski its an amazing feature. How is the progress? Do you have the possibility to send PR and let the discussion going to have some sort of beta version. I would love to test it.

[jukakoski]

@xoraingroup I haven't found to time proceed with this one. Hopefully in near future there is more time...
I added you as collaborator in my fork if you want to check the code.
I think there should be a prop (in plugin) to tell if user agent is mobile or not as getDisplayMedia doesn't work in mobile. In Samsung S8 getDisplayMedia was true even thought it doesn't support it.

[xoraingroup]

Thanks @jukakoski , I will have a look at it. Cheers

[arturi]

@jukakoski could you please PR your branch to Uppy, so I can tweak and merge, and you’ll be attributed properly? The invitation you sent me also expired. Sorry for the delay with this again.

[jrschumacher]

@goto-bus-stop looks like this can be closed, yes?

[goto-bus-stop]

yes, thanks @jrschumacher!