Screen capture

With the Screen Capture API, you can capture the screen, stream it to a video element, and download it.
The PWA Screen Capture controller provides a simple way to do this.

Demo

Capture now!

Code example

<button
    {{ stimulus_action("@pwa/capture", "capture") }}
>
    Start the capture
</button>

On compatible browsers, when the button is clicked the user will be asked to select the screen to capture.
It can be a browser tab, a specific application or an entire screen.

<video
    {{ stimulus_target("@pwa/capture", "destination") }}
    width="800" height="600" class="mx-auto"
    autoplay playsinline
>
</video>

To show the captured screen, you can use the code above.
The video element will be automatically displayed and updated with the captured screen.

<a
    hidden="hidden"
    {{ stimulus_target("@pwa/capture", "download") }}
    href="#" download="capture.mp4"
>
    Download the capture
</a>

To download the captured screen, you can use the code above.
The download link will be automatically displayed and updated with the captured screen.