Region & Element Capture

The difference, in one sentenceRegion Capture crops by rectangle, so anything drawn on top of the element inside that rectangle - a dropdown, a tooltip, a notification - is shared too. Element Capture shares the element's own subtree and nothing else, so the overlay is invisible to the capture even while it covers the element on screen. Element Capture asks more of the element in return: it has to form its own stacking context.

This tab only, and Chromium only Both apply to a capture of this very tab. A screen or window share refuses them and the call returns false rather than throwing. Ask for the tab once with MediaDevices; there is no second picker.

Support check

RegionCapture.IsSupported / ElementCapture.IsSupported

Two separate features that shipped at different times: a browser can have Region Capture without Element Capture. During prerender/SSR both return false rather than throwing, so defer them to OnAfterRenderAsync.

@inject Bit.Butil.RegionCapture regionCapture
@inject Bit.Butil.ElementCapture elementCapture

var canCrop = await regionCapture.IsSupported();
var canRestrict = await elementCapture.IsSupported();

Live sample

support check output

Results will appear here when you interact with the samples.

Share this tab, then narrow it

CropTo / RestrictTo / Clear

Start the share and pick this tab. The preview below shows what the far end would receive: initially the whole tab, then - after CropTo or RestrictTo - only the highlighted box. Put the overlay up and compare: with a crop it is captured, with a restriction it is not.

_stream = await mediaDevices.GetDisplayMedia(
    options: new DisplayMediaOptions { PreferCurrentTab = true });

await regionCapture.CropTo(_stream!, _target);      // by rectangle
await elementCapture.RestrictTo(_stream!, _target); // by content

await regionCapture.Clear(_stream!);                // back to the whole tab

Live sample

This box is the capture target.

Everything outside it disappears from the share once you crop or restrict.

capture output

Results will appear here when you interact with the samples.

API reference

Member

Signature

Description

RegionCapture.IsSupported

ValueTask<bool> IsSupported()

True when the runtime exposes CropTarget.fromElement. Returns default (false) during prerender/SSR instead of throwing.

RegionCapture.CropTo

ValueTask<bool> CropTo(MediaStreamHandle stream, ElementReference element)

Crops a captured stream to the rectangle an element occupies, following it as it moves. False when the capture isn't of this tab.

RegionCapture.Clear

ValueTask<bool> Clear(MediaStreamHandle stream)

Removes the crop: back to the whole captured surface.

ElementCapture.IsSupported

ValueTask<bool> IsSupported()

True when the runtime exposes RestrictionTarget.fromElement. Newer than Region Capture.

ElementCapture.RestrictTo

ValueTask<bool> RestrictTo(MediaStreamHandle stream, ElementReference element)

Restricts a captured stream to one element's own content. False when the element doesn't form its own stacking context.

ElementCapture.Clear

ValueTask<bool> Clear(MediaStreamHandle stream)

Removes the restriction: back to the whole captured surface.