Element capture

The Element Capture is very similar to the Screen Capture feature .
The difference is that you can capture a specific DOM element on a tab instead of the tab or the entire screen.

It is important to note that the Element Capture feature is only available when sharing the current screen and with a unique target region or element.

Demo

Capture now!

Captured area

Code example

<button
    {{ stimulus_action("@pwa/capture", "capture", "click", {preferCurrentTab: true}) }}
>
    Start the capture
</button>
<section {{ stimulus_target("@pwa/capture", "region") }}>
    <label for="element-capture" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Captured area</label>
    <textarea
        id="element-capture"
        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        placeholder="Write your thoughts here..."
        rows="15"
    ></textarea>
</section>

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.