diff --git a/files/en-us/web/api/browsercapturemediastreamtrack/clone/index.md b/files/en-us/web/api/browsercapturemediastreamtrack/clone/index.md
new file mode 100644
index 000000000000000..a16b07d0d065033
--- /dev/null
+++ b/files/en-us/web/api/browsercapturemediastreamtrack/clone/index.md
@@ -0,0 +1,69 @@
+---
+title: "BrowserCaptureMediaStreamTrack: clone() method"
+short-title: clone()
+slug: Web/API/BrowserCaptureMediaStreamTrack/clone
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.BrowserCaptureMediaStreamTrack.clone
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`clone()`** method of the {{domxref("BrowserCaptureMediaStreamTrack")}} interface returns a clone of the original `BrowserCaptureMediaStreamTrack`.
+
+This method is functionally identical to {{domxref("MediaStreamTrack.clone()")}}, except that it handles cases where cropping or restriction have been applied to the track. The returned clone is identical to the original `BrowserCaptureMediaStreamTrack`, but with any cropping or restriction removed.
+
+> [!NOTE]
+> In Chromium, if a track has clones, its {{domxref("BrowserCaptureMediaStreamTrack.cropTo", "cropTo()")}} and {{domxref("BrowserCaptureMediaStreamTrack.restrictTo", "restrictTo()")}} methods will reject (see [Chrome issue 41482026](https://issues.chromium.org/issues/41482026)).
+
+## Syntax
+
+```js-nolint
+clone()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{domxref("BrowserCaptureMediaStreamTrack")}} instance.
+
+## Examples
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create crop target from DOM element
+const demoElem = document.querySelector("#demo");
+const cropTarget = await CropTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Crop video track
+await track.cropTo(cropTarget);
+
+// Create uncropped clone of the track
+const clonedTrack = track.clone();
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/browsercapturemediastreamtrack/cropto/index.md b/files/en-us/web/api/browsercapturemediastreamtrack/cropto/index.md
new file mode 100644
index 000000000000000..2e59ba6a027f874
--- /dev/null
+++ b/files/en-us/web/api/browsercapturemediastreamtrack/cropto/index.md
@@ -0,0 +1,89 @@
+---
+title: "BrowserCaptureMediaStreamTrack: cropTo() method"
+short-title: cropTo()
+slug: Web/API/BrowserCaptureMediaStreamTrack/cropTo
+page-type: web-api-instance-method
+status:
+  - experimental
+browser-compat: api.BrowserCaptureMediaStreamTrack.cropTo
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`cropTo()`** method of the {{domxref("BrowserCaptureMediaStreamTrack")}} interface crops a self-capture stream to the area in which a specified DOM element is rendered.
+
+## Syntax
+
+```js-nolint
+cropTo(cropTarget)
+```
+
+### Parameters
+
+- `cropTarget`
+  - : A {{domxref("CropTarget")}} instance representing the element rendering area the stream should be cropped to, or `null`/`undefined`, in which case any previously-set cropping is removed from the track.
+
+### Return value
+
+A {{jsxref("Promise")}} that resolves to {{jsxref("undefined")}}.
+
+The promise will reject if:
+
+- The track [`kind`](/en-US/docs/Web/API/MediaStreamTrack/kind) is not `"video"`, or its [`readyState`](/en-US/docs/Web/API/MediaStreamTrack/readyState) is not `"live"`.
+- The crop target element no longer exists.
+- The track being cropped is not a track captured from the user's screen.
+- `cropTarget` is not a {{domxref("CropTarget")}} instance, `null`, or `undefined`.
+- `cropTarget` was created in a tab other than the one being captured.
+
+> [!NOTE]
+> In Chromium, if a track has clones, `cropTo()` will reject (see [Chrome issue 41482026](https://issues.chromium.org/issues/41482026)).
+
+## Examples
+
+### Basic cropping example
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create crop target from DOM element
+const demoElem = document.querySelector("#demo");
+const cropTarget = await CropTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Crop video track
+await track.cropTo(cropTarget);
+
+// Broadcast cropped stream in <video> element
+videoElem.srcObject = stream;
+```
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+### Stopping the cropping
+
+You can stop the cropping by making a call to `cropTo()` on a previously-cropped track, passing an argument of `null` to it:
+
+```js
+// Stop cropping
+await track.cropTo(null);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/browsercapturemediastreamtrack/index.md b/files/en-us/web/api/browsercapturemediastreamtrack/index.md
new file mode 100644
index 000000000000000..370506f8c84edab
--- /dev/null
+++ b/files/en-us/web/api/browsercapturemediastreamtrack/index.md
@@ -0,0 +1,40 @@
+---
+title: BrowserCaptureMediaStreamTrack
+slug: Web/API/BrowserCaptureMediaStreamTrack
+page-type: web-api-interface
+status:
+  - experimental
+browser-compat: api.BrowserCaptureMediaStreamTrack
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}
+
+The **`BrowserCaptureMediaStreamTrack`** interface of the {{domxref("Screen Capture API", "Screen Capture API", "", "nocode")}} represents a single video track. It extends the {{domxref("MediaStreamTrack")}} class with methods to limit the part of a self-capture stream (for example, a user's screen or window) that is captured.
+
+{{InheritanceDiagram}}
+
+## Instance methods
+
+- {{domxref("BrowserCaptureMediaStreamTrack.clone", "clone()")}} {{Experimental_Inline}}
+  - : Returns an uncropped, unrestricted clone of the original `BrowserCaptureMediaStreamTrack`.
+- {{domxref("BrowserCaptureMediaStreamTrack.cropTo", "cropTo()")}} {{Experimental_Inline}}
+  - : Crops a self-capture stream to the area in which a specified DOM element is rendered.
+- {{domxref("BrowserCaptureMediaStreamTrack.restrictTo", "restrictTo()")}} {{Experimental_Inline}}
+  - : Restricts a self-capture stream to a specific DOM element.
+
+## Examples
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/browsercapturemediastreamtrack/restrictto/index.md b/files/en-us/web/api/browsercapturemediastreamtrack/restrictto/index.md
new file mode 100644
index 000000000000000..bf0c905849bf1ca
--- /dev/null
+++ b/files/en-us/web/api/browsercapturemediastreamtrack/restrictto/index.md
@@ -0,0 +1,87 @@
+---
+title: "BrowserCaptureMediaStreamTrack: restrictTo() method"
+short-title: restrictTo()
+slug: Web/API/BrowserCaptureMediaStreamTrack/restrictTo
+page-type: web-api-instance-method
+browser-compat: api.BrowserCaptureMediaStreamTrack.restrictTo
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`restrictTo()`** method of the {{domxref("BrowserCaptureMediaStreamTrack")}} interface restricts a self-capture stream to a specific DOM element (and its descendants).
+
+## Syntax
+
+```js-nolint
+restrictTo(restrictionTarget)
+```
+
+### Parameters
+
+- `restrictionTarget`
+  - : A {{domxref("RestrictionTarget")}} instance representing the element the stream should be restricted to, or `null`/`undefined`, in which case any previously-set restriction is removed from the track.
+
+### Return value
+
+A {{jsxref("Promise")}} that resolves to {{jsxref("undefined")}}.
+
+The promise will reject if:
+
+- The track [`kind`](/en-US/docs/Web/API/MediaStreamTrack/kind) is not `"video"`, or its [`readyState`](/en-US/docs/Web/API/MediaStreamTrack/readyState) is not `"live"`.
+- The restriction target element no longer exists.
+- The track being restricted is not a track captured from the user's screen.
+- `restrictionTarget` is not a {{domxref("RestrictionTarget")}} instance, `null`, or `undefined`.
+- `restrictionTarget` was created in a tab other than the one being captured.
+
+> [!NOTE]
+> In Chromium, if a track has clones, `restrictTo()` will reject (see [Chrome issue 41482026](https://issues.chromium.org/issues/41482026)).
+
+## Examples
+
+### Basic restriction example
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create restriction target from DOM element
+const demoElem = document.querySelector("#demo");
+const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Restrict video track
+await track.restrictTo(restrictionTarget);
+
+// Broadcast restricted stream in <video> element
+videoElem.srcObject = stream;
+```
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+### Stopping the restriction
+
+You can stop the restriction by making a call to `restrictTo()` on the same track, passing an argument of `null` to it:
+
+```js
+// Stop restricting
+await track.restrictTo(null);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/croptarget/fromelement_static/index.md b/files/en-us/web/api/croptarget/fromelement_static/index.md
new file mode 100644
index 000000000000000..324c7efa6734928
--- /dev/null
+++ b/files/en-us/web/api/croptarget/fromelement_static/index.md
@@ -0,0 +1,75 @@
+---
+title: "CropTarget: fromElement() static method"
+short-title: fromElement()
+slug: Web/API/CropTarget/fromElement_static
+page-type: web-api-static-method
+browser-compat: api.CropTarget.fromElement_static
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`fromElement()`** static method of the {{domxref("CropTarget")}} interface returns a `CropTarget` instance that can be used to crop a captured video track to the area in which a specified element is rendered.
+
+Because the Region Capture API crops to an area of the current browser tab rather than capturing a specific element, any content drawn on top of the cropped area will be shown in the capture.
+
+## Syntax
+
+```js-nolint
+CropTarget.fromElement(element)
+```
+
+### Parameters
+
+- `element`
+
+  - : A reference to an {{domxref("Element")}} that you want to use as a crop target. For an element to be used as a crop target, it must be:
+
+    - On-screen
+    - Visible, that is, not hidden via `display: none` for example.
+
+    In addition, the element will not be captured if the track being restricted has clones (that is, created by {{domxref("BrowserCaptureMediaStreamTrack.clone()")}}) or is captured from a different tab to the current user's tab (passed via {{domxref("Window.postMessage()")}}, for example).
+
+### Return value
+
+A {{jsxref("Promise")}} that resolves to a {{domxref("CropTarget")}} object instance, which can then be passed to {{domxref("BrowserCaptureMediaStreamTrack.CropTo()")}} to crop the video captured in the track to just the area the specified DOM element is rendered in.
+
+`CropTarget` objects are serializable. They can be passed to another document using mechanisms such as {{domxref("Window.postMessage()")}}.
+
+## Examples
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create crop target from DOM element
+const demoElem = document.querySelector("#demo");
+const cropTarget = await CropTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Crop video track
+await track.cropTo(cropTarget);
+
+// Broadcast cropped stream in <video> element
+videoElem.srcObject = stream;
+```
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/croptarget/index.md b/files/en-us/web/api/croptarget/index.md
new file mode 100644
index 000000000000000..0d738d619832290
--- /dev/null
+++ b/files/en-us/web/api/croptarget/index.md
@@ -0,0 +1,58 @@
+---
+title: CropTarget
+slug: Web/API/CropTarget
+page-type: web-api-interface
+status:
+  - experimental
+browser-compat: api.CropTarget
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}
+
+The **`CropTarget`** interface of the {{domxref("Screen Capture API", "Screen Capture API", "", "nocode")}} provides a static method, {{domxref("CropTarget.fromElement_static", "fromElement()")}}, which returns a `CropTarget` instance that can be used to crop a captured video track to the area in which a specified element is rendered.
+
+{{InheritanceDiagram}}
+
+## Static methods
+
+- {{domxref("CropTarget.fromElement_static", "fromElement()")}} {{Experimental_Inline}}
+  - : Returns a `CropTarget` instance that can be used to crop a captured video track to the area in which a specified element is rendered.
+
+## Examples
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create crop target from DOM element
+const demoElem = document.querySelector("#demo");
+const cropTarget = await CropTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Crop video track
+await track.cropTo(cropTarget);
+
+// Broadcast cropped stream in <video> element
+videoElem.srcObject = stream;
+```
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/restrictiontarget/fromelement_static/index.md b/files/en-us/web/api/restrictiontarget/fromelement_static/index.md
new file mode 100644
index 000000000000000..75e1d9aebeb7045
--- /dev/null
+++ b/files/en-us/web/api/restrictiontarget/fromelement_static/index.md
@@ -0,0 +1,82 @@
+---
+title: "RestrictionTarget: fromElement() static method"
+short-title: fromElement()
+slug: Web/API/RestrictionTarget/fromElement_static
+page-type: web-api-static-method
+browser-compat: api.RestrictionTarget.fromElement_static
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`fromElement()`** static method of the {{domxref("RestrictionTarget")}} interface returns a {{domxref("RestrictionTarget")}} instance that can be used to restrict a captured video track to a specified DOM element (plus its decendants).
+
+## Syntax
+
+```js-nolint
+RestrictionTarget.fromElement(element)
+```
+
+### Parameters
+
+- `element`
+
+  - : A reference to an {{domxref("Element")}} that you want to use as a restriction target. For an element to be used as a restriction target, it must:
+
+    - Form a [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
+    - Be flattened in 3D space (for example, it is not subjected to any 3D [transforms](/en-US/docs/Web/CSS/CSS_transforms)).
+    - Be rendered (for example, not be off-screen or hidden via `display: none`).
+    - Contain only one box fragment (for example, not be broken across multiple lines).
+
+    If it does not meet the above criteria, it is considered to be **not eligible for restriction**.
+
+    In addition, the element will not be captured if the track being restricted has clones (that is, created by {{domxref("BrowserCaptureMediaStreamTrack.clone()")}}) or is captured from a different tab to the current user's tab (passed via {{domxref("Window.postMessage()")}}, for example).
+
+> [!NOTE]
+> When the element is captured, any alpha-channel value set on it is not included. If the restriction target element is semi-transparent, it will end up completely opaque in the capture and therefore end up looking different.
+
+### Return value
+
+A {{jsxref("Promise")}} that resolves to a {{domxref("RestrictionTarget")}} object instance, which can then be passed to {{domxref("BrowserCaptureMediaStreamTrack.restrictTo()")}} to restrict the video captured in the track to just the particular DOM element the `RestrictionTarget` was created with.
+
+`RestrictionTarget` objects are serializable. They can be passed to another document using mechanisms such as {{domxref("Window.postMessage()")}}.
+
+The promise will reject if the restriction target element is not eligible for restriction.
+
+## Examples
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create restriction target from DOM element
+const demoElem = document.querySelector("#demo");
+const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Restrict video track
+await track.restrictTo(restrictionTarget);
+
+// Broadcast restricted stream in <video> element
+videoElem.srcObject = stream;
+```
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/restrictiontarget/index.md b/files/en-us/web/api/restrictiontarget/index.md
new file mode 100644
index 000000000000000..eb56c8ed9819133
--- /dev/null
+++ b/files/en-us/web/api/restrictiontarget/index.md
@@ -0,0 +1,58 @@
+---
+title: RestrictionTarget
+slug: Web/API/RestrictionTarget
+page-type: web-api-interface
+status:
+  - experimental
+browser-compat: api.RestrictionTarget
+---
+
+{{APIRef("Screen Capture API")}}{{SeeCompatTable}}
+
+The **`RestrictionTarget`** interface of the {{domxref("Screen Capture API", "Screen Capture API", "", "nocode")}} provides a static method, {{domxref("RestrictionTarget.fromElement_static", "fromElement()")}}, which returns a `RestrictionTarget` instance that can be used to restrict a captured video track to a specified DOM element.
+
+{{InheritanceDiagram}}
+
+## Static methods
+
+- {{domxref("RestrictionTarget.fromElement_static", "fromElement()")}} {{Experimental_Inline}}
+  - : Returns a `RestrictionTarget` instance that can be used to restrict a captured video track to a specified DOM element (plus its decendants).
+
+## Examples
+
+```js
+// Options for getDisplayMedia()
+const displayMediaOptions = {
+  preferCurrentTab: true,
+};
+
+// Create restriction target from DOM element
+const demoElem = document.querySelector("#demo");
+const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
+
+// Capture video stream from user's webcam and isolate video track
+const stream =
+  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+const [track] = stream.getVideoTracks();
+
+// Restrict video track
+await track.restrictTo(restrictionTarget);
+
+// Broadcast restricted stream in <video> element
+videoElem.srcObject = stream;
+```
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
diff --git a/files/en-us/web/api/screen_capture_api/element_region_capture/hall-of-mirrors.png b/files/en-us/web/api/screen_capture_api/element_region_capture/hall-of-mirrors.png
new file mode 100644
index 000000000000000..e40ca6faa9b8991
Binary files /dev/null and b/files/en-us/web/api/screen_capture_api/element_region_capture/hall-of-mirrors.png differ
diff --git a/files/en-us/web/api/screen_capture_api/element_region_capture/index.md b/files/en-us/web/api/screen_capture_api/element_region_capture/index.md
new file mode 100644
index 000000000000000..33bf50db6f524fd
--- /dev/null
+++ b/files/en-us/web/api/screen_capture_api/element_region_capture/index.md
@@ -0,0 +1,295 @@
+---
+title: Using the Element Capture and Region Capture APIs
+slug: Web/API/Screen_Capture_API/Element_Region_Capture
+page-type: guide
+---
+
+{{DefaultAPISidebar("Screen Capture API")}}
+
+This guide provides a walkthrough of typical usage of the Element Capture and Region Capture APIs, showing how to use them and the problem they solve.
+
+## Background
+
+By default, the [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API) captures an entire screen, window, or tab. The Element Capture and Region Capture APIs respectively enable you to restrict the captured stream to a specific rendered DOM tree, or to the part of the screen defined by a specific DOM tree's bounding box.
+
+This is useful when you want to share only a limited region to cut down on unnecessary bandwidth or screen space required to show the capture, or for privacy reasons (you might not want to show other participants your message notifications, or background settings required to run the demo you are sharing).
+
+In addition, when capturing your web cam output, you can end up with one of those undesirable "infinite wormhole" or "hall of mirrors" type effects. The Element Capture and Region Capture APIs can help you avoid these kinds of problems too.
+
+## When to use each API
+
+The Element Capture API captures the element itself (and its descendants), whereas the Region Capture API captures the area of the browser tab defined by the bounding box of the target element. Element Capture will always show just the captured element, even if other DOM content overlaps it, whereas Region Capture can result in overlapping content being shown over the top of the content you intended to share.
+
+There are legitimate use cases for both:
+
+- If you need to keep the capture specific to one DOM tree, and exclude anything outside it, then the Element Capture API is a better choice. For example, you don't want private content such as a set of message notifications or a speaker notes UI showing up in the capture.
+- However, if you really do want to capture a region of the browser tab, regardless of what is shown in it, the Region Capture API will serve you well. The [Region Capture Demo](https://region-capture-demo.glitch.me/) (see the [source code](https://glitch.com/edit/#!/region-capture-demo)) shows a useful possibility — zooming in on a particular area of the tab as you show multiple users an interactive walkthrough of some kind.
+
+In the next section we'll start with a basic Screen Capture API demo to illustrate the issues that the Element Capture and Region Capture APIs were created to solve.
+
+## Screen Capture API demo
+
+This demo uses the Screen Capture API to capture a window, screen, or tab, and broadcast the stream via a {{htmlelement("video")}} element on the same page. You can see it running live at [Screen Capture API example](https://mdn.github.io/dom-examples/screen-capture-api/basic-screen-capture) (also see the [source code](https://github.com/mdn/dom-examples/tree/main/screen-capture-api/basic-screen-capture)).
+
+### HTML
+
+The HTML starts off with a main heading and intro text, then includes two {{htmlelement("button")}} elements to start and stop the capture:
+
+```html
+<h1>Screen Capture API example</h1>
+<p>
+  This example shows you the contents of the selected part of your display.
+  Click the Start Capture button to begin.
+</p>
+
+<p>
+  <button id="start">Start Capture</button>&nbsp;
+  <button id="stop">Stop Capture</button>
+</p>
+```
+
+Next, we include the main app container, which contains the `<video>` element to broadcast the capture, and plus a demo placeholder {{htmlelement("div")}}:
+
+```html
+<div id="main-app">
+  <video autoplay></video>
+  <div id="demo">
+    <h2>Some kind of demo</h2>
+    <p>
+      This container is a placeholder for some kind of demo that you might want
+      to share with other participants.
+    </p>
+  </div>
+</div>
+```
+
+### CSS
+
+The CSS for this demo is mostly unremarkable, but the following few rules are worth explaining. We've hidden the rest of the CSS for brevity.
+
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0 25px;
+}
+
+video,
+#demo > p {
+  border: 1px solid #ccc;
+  margin: 0;
+}
+
+#demo > h2 {
+  margin-top: 0;
+}
+
+#demo > p {
+  padding: 5px;
+  height: 320px;
+}
+```
+
+We set a {{cssxref("display")}} value of `flex` on the `main-app` `<div>` to lay the video and the demo placeholder out side by side in two columns, setting a {{cssxref("gap")}} of `5%` between them. We also set a {{cssxref("min-width")}} of `980px` on the container, essentially limiting the demo app to being a desktop layout. This is because Element Capture and Region Capture are only supported on desktop browsers, and off-screen content is not captured.
+
+```css
+#main-app {
+  display: flex;
+  gap: 5%;
+  min-width: 980px;
+}
+```
+
+We also give the `<video>` element and the `demo` `<div>` a {{cssxref("flex")}} value of `1`, so they will take up the same amount of horizontal space.
+
+```css
+video,
+#demo {
+  flex: 1;
+}
+```
+
+Finally, we give the `<video>` element a {{cssxref("max-width")}} of `50%` and a fixed {{cssxref("aspect-ratio")}} of `4/3`. This is to keep the video at a consistent size and avoid too much layout upheaval when the screen capture starts to be broadcast. If we didn't do this, the `<video>` element would grow to the same width as the entire captured area (window or screen), which would affect the layout. It is a [replaced element](/en-US/docs/Web/CSS/Replaced_element), after all, so its [intrinsic size](/en-US/docs/Glossary/Intrinsic_Size) depends on that of its content.
+
+```css
+video {
+  max-width: 50%;
+  aspect-ratio: 4/3;
+}
+```
+
+Layout shift can also cause problems when using the Region and Element Capture APIs, hence this code is included in all three demos.
+
+### JavaScript
+
+The JavaScript for this example is adapted from the [Streaming screen capture](/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#streaming_screen_capture) example in our "Using the Screen Capture API" guide. We won't repeat the full code explanation here; we'll just explain the most relevant capture code.
+
+In the options object passed into `getDisplayMedia()` when we invoke it, we set [`preferCurrentTab: true`](/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab). This hint suggests that the browser should offer the user's current tab as the most prominent capture source in the dialog that asks them what to share. Chrome, for example, only gives them this option when `preferCurrentTab: true` is set.
+
+```js
+const displayMediaOptions = {
+  video: {
+    displaySurface: "window",
+  },
+  preferCurrentTab: true,
+};
+```
+
+This option is very useful if you are building an app with a built-in "share screen" option — you don't want to allow users to share a different tab or window.
+
+When the "Start Capture" button is pressed, the `startCapture()` function runs, which invokes {{domxref("MediaDevices.getDisplayMedia()")}}. This causes the browser to prompt the user to choose a surface to share (window, tab, etc.). Once a choice is made, the resulting {{domxref("MediaStream")}} is set to the value of the `<video>` element's {{domxref("HTMLMediaElement.srcObject")}} property to broadcast it:
+
+```js
+async function startCapture() {
+  try {
+    videoElem.srcObject =
+      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+  } catch (err) {
+    console.error(err);
+  }
+}
+```
+
+## Screen Capture API issues
+
+Run the demo above in a [supporting browser](/en-US/docs/Web/API/Screen_Capture_API#browser_compatibility), click "Start Capture", and select the same tab the demo is running in. You will see the "hall of mirrors effect", as mentioned earlier:
+
+![A browser window containing a video capture of that same browser window, meaning that it shows infinite captures inside captures, getting smaller and smaller](hall-of-mirrors.png)
+
+This obviously isn't ideal, and would cause issues in any kind of conferencing application with a built-in "share screen" option.
+
+## The Element Capture API
+
+The Element Capture API restricts the captured region to a specified rendered DOM tree (a selected element and its descendants). In this section we will explore a second demo that is identical to the one presented above, except that it uses Element Capture on top of basic Screen Capture. See this demo running live at [Element Capture API example](https://mdn.github.io/dom-examples/screen-capture-api/element-capture) (also see the [source code](https://github.com/mdn/dom-examples/tree/main/screen-capture-api/element-capture)).
+
+The HTML is identical to the previous example, and the CSS is _nearly_ identical. We'll explain the differences in the JavaScript now, then look at the CSS differences later on, in the [Issues with the Element Capture API](#issues-with-the-element-capture-api) section.
+
+To use the Element Capture API, we additionally grab a reference to a DOM element that we will later use as a **restriction target** — the screen area shown in the stream will be restricted to just that rendered element and its descendants:
+
+```js
+const demoElem = document.querySelector("#demo");
+```
+
+The other code differences are all in the modified `startCapture()` function:
+
+```js
+async function startCapture() {
+  try {
+    const stream =
+      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+    const [track] = stream.getVideoTracks();
+    const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
+    await track.restrictTo(restrictionTarget);
+    videoElem.srcObject = stream;
+  } catch (err) {
+    console.error(err);
+  }
+}
+```
+
+1. Here, we start by grabbing the media stream as before, using `mediaDevices.getDisplayMedia()`.
+2. We then isolate the video track from the stream using {{domxref("MediaStream.getVideoTracks()")}}.
+3. We create the necessary `restrictionTarget` object to apply the restriction to the video track by running {{domxref("RestrictionTarget.fromElement_static", "RestrictionTarget.fromElement()")}}, passing to it the DOM element reference we grabbed earlier.
+4. We apply the restriction target to the track by calling {{domxref("BrowserCaptureMediaStreamTrack.restrictTo()")}} on it, passing it the `restrictionTarget` object.
+5. Once all the above is done, we then set the `<video>` element's `srcObject` property value to the stream, to start broadcasting it.
+
+Try running the [Element Capture API example](https://mdn.github.io/dom-examples/screen-capture-api/element-capture) in a [supporting browser](/en-US/docs/Web/API/RestrictionTarget#browser_compatibility) now. You should see that only the demo placeholder is included in the stream, thereby fixing the "hall of mirrors" problem.
+
+> [!NOTE]
+> You can stop the restriction by calling `restrictTo()` again on the same track, passing an argument of `null` to it:
+>
+> ```js
+> await track.restrictTo(null);
+> ```
+
+### Restrictions on the Element Capture API
+
+To ensure that the element is **eligible for restriction**, that is, it will be captured when chosen as the restriction target element, it must form a [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) and be flattened in 3D space.
+
+To handle these restrictions, we've set the following additional CSS rule that targets the demo container element:
+
+```css
+#demo {
+  /* Forms a stacking context */
+  isolation: isolate;
+  /* Flattened */
+  transform-style: flat;
+  /* Explicit background color to stop the capture being transparent */
+  background-color: white;
+}
+```
+
+The {{cssxref("isolation")}} property is set to `isolate` to make the element form a stacking context, and the {{cssxref("transform-style")}} property is set to `flat` to flatten it. Also, because of the nature of the isolation we've set, the element will no longer inherit the page's default white color. As a result, we set {{cssxref("background-color")}} to `white` to stop the capture being transparent.
+
+For the full list of restrictions on the elements that can be used as restriction targets, see the [`RestrictionTarget.fromElement()`](/en-US/docs/Web/API/RestrictionTarget/fromElement_static#element) reference page.
+
+## The Region Capture API
+
+The Region Capture API has a very similar effect to the Element Capture API, except that rather than restricting the captured region to a specific rendered DOM tree, it crops the stream to the area of the current browser tab defined by the bounding box of the target element. Let's look at a demo and then explore the differences between the two in more detail later on.
+
+In this section we will explore a third demo that is identical to the others, except that it uses Region Capture on top of basic Screen Capture. See this demo running live at [Region Capture API example](https://mdn.github.io/dom-examples/screen-capture-api/region-capture) (also see the [source code](https://github.com/mdn/dom-examples/tree/main/screen-capture-api/region-capture)).
+
+The HTML and CSS are identical to the previous examples. The JavaScript is nearly the same as the Element Capture JavaScript, with a few notable differences that we'll now explain.
+
+To use the Region Capture API, we first grab a reference to a DOM element that we will later use as a **crop target** — the region shown in the stream will be cropped to just the area that element is rendered in:
+
+```js
+const demoElem = document.querySelector("#demo");
+```
+
+Now let's examine the Region Capture demo's `startCapture()` function:
+
+```js
+async function startCapture() {
+  try {
+    const stream =
+      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+    const [track] = stream.getVideoTracks();
+    const cropTarget = await CropTarget.fromElement(demoElem);
+    await track.cropTo(cropTarget);
+    videoElem.srcObject = stream;
+  } catch (err) {
+    console.error(err);
+  }
+}
+```
+
+1. As before, we start by grabbing the media stream using `mediaDevices.getDisplayMedia()`, then isolate the video track from the stream using {{domxref("MediaStream.getVideoTracks()")}}.
+2. We create the necessary `cropTarget` object to apply the crop to the video track by running {{domxref("CropTarget.fromElement_static", "fromElement()")}}, passing to it the DOM element reference we grabbed earlier.
+3. We apply the crop target to the track by calling {{domxref("BrowserCaptureMediaStreamTrack.cropTo()")}} on it, passing it the `cropTarget` object.
+4. Once all the above is done, we then set the `<video>` element's `srcObject` property value to the stream, to start broadcasting it.
+
+Try running the [Region Capture API example](https://mdn.github.io/dom-examples/screen-capture-api/region-capture) in a [supporting browser](/en-US/docs/Web/API/CropTarget#browser_compatibility) now. You should see that only the demo placeholder is included in the stream, which also fixes the "hall of mirrors" problem.
+
+> [!NOTE]
+> You can stop the cropping by calling `cropTo()` again on the same track, passing an argument of `null` to it:
+>
+> ```js
+> await track.cropTo(null);
+> ```
+
+### Restrictions on the Region Capture API
+
+Region Capture doesn't have the same level of restrictions as Element Capture — it is cropping the stream to a particular size, rather than broadcasting a specific rendered DOM tree, so it doesn't require this rule:
+
+```css
+#demo {
+  /* Forms a stacking context */
+  isolation: isolate;
+  /* Flattened */
+  transform-style: flat;
+  /* Explicit background color to stop the capture being transparent */
+  background-color: white;
+}
+```
+
+However, there are still restrictions on the elements that can be used as crop targets. For the full list, see the [`CropTarget.fromElement()`](/en-US/docs/Web/API/CropTarget/fromElement_static#element) reference page.
+
+## See also
+
+- [Capture a video stream from any element](https://developer.chrome.com/docs/web-platform/element-capture) on developer.chrome.com (2025)
+- [Better tab sharing with Region Capture](https://developer.chrome.com/docs/web-platform/region-capture) on developer.chrome.com (2023)
+- [Element Capture Demo](https://element-capture-demo.glitch.me/)
+- [Region Capture Demo](https://region-capture-demo.glitch.me/)
diff --git a/files/en-us/web/api/screen_capture_api/index.md b/files/en-us/web/api/screen_capture_api/index.md
index cd17bea8e8a80c3..b2d75dfc7f91f27 100644
--- a/files/en-us/web/api/screen_capture_api/index.md
+++ b/files/en-us/web/api/screen_capture_api/index.md
@@ -2,7 +2,14 @@
 title: Screen Capture API
 slug: Web/API/Screen_Capture_API
 page-type: web-api-overview
-browser-compat: api.MediaDevices.getDisplayMedia
+browser-compat:
+  - api.MediaDevices.getDisplayMedia
+  - api.CropTarget
+  - api.RestrictionTarget
+spec-urls:
+  - https://w3c.github.io/mediacapture-screen-share/
+  - https://screen-share.github.io/element-capture/
+  - https://w3c.github.io/mediacapture-region/
 ---
 
 {{DefaultAPISidebar("Screen Capture API")}}
@@ -24,10 +31,23 @@ The {{jsxref("Promise")}} returned by `getDisplayMedia()` resolves to a {{domxre
 
 See the article [Using the Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture) for a more in-depth look at how to use the API to capture screen contents as a stream.
 
+The Screen Capture API also has features that limit the part of the screen captured in the stream:
+
+- The **Element Capture API** restricts the captured region to a specified rendered DOM element and its descendants.
+- The **Region Capture API** crops the captured region to the area of the screen in which a specified DOM element is rendered.
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture) to learn more.
+
 ## Interfaces
 
+- {{domxref("BrowserCaptureMediaStreamTrack")}}
+  - : Represents a single video track; extends the {{domxref("MediaStreamTrack")}} class with methods to limit the part of a self-capture stream (for example, a user's screen or window) that is captured.
 - {{domxref("CaptureController")}}
   - : Provides methods that can be used to further manipulate a capture session separate from its initiation via {{domxref("MediaDevices.getDisplayMedia()")}}. A `CaptureController` object is associated with a capture session by passing it into a {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} call as the value of the options object's `controller` property.
+- {{domxref("CropTarget")}}
+  - : Provides a static method, {{domxref("CropTarget.fromElement_static", "fromElement()")}}, which returns a {{domxref("CropTarget")}} instance that can be used to crop a captured video track to the area in which a specified element is rendered.
+- {{domxref("RestrictionTarget")}}
+  - : Provides a static method, {{domxref("RestrictionTarget.fromElement_static", "fromElement()")}}, which returns a {{domxref("RestrictionTarget")}} instance that can be used to restrict a captured video track to a specified DOM element.
 
 ## Additions to the MediaDevices interface
 
@@ -88,4 +108,5 @@ The default allowlist is `self`, which lets any content within the same origin u
 ## See also
 
 - [Using the Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)
+- [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_API/Element_Region_Capture)
 - {{domxref("MediaDevices.getDisplayMedia()")}}
diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json
index 83601f457c8261f..edb1a565a38aa6c 100644
--- a/files/jsondata/GroupData.json
+++ b/files/jsondata/GroupData.json
@@ -1339,8 +1339,16 @@
     },
     "Screen Capture API": {
       "overview": ["Screen Capture API"],
-      "guides": ["/docs/Web/API/Screen_Capture_API/Using_Screen_Capture"],
-      "interfaces": ["CaptureController"],
+      "guides": [
+        "/docs/Web/API/Screen_Capture_API/Using_Screen_Capture",
+        "/docs/Web/API/Screen_Capture_API/Element_Region_Capture"
+      ],
+      "interfaces": [
+        "BrowserCaptureMediaStreamTrack",
+        "CaptureController",
+        "CropTarget",
+        "RestrictionTarget"
+      ],
       "methods": ["MediaDevices.getDisplayMedia()"],
       "properties": [
         "MediaTrackConstraints.displaySurface",