Add documentation for Screen Capture extensions, element capture and region capture

[chrisdavidmills]

Description

Motivation

Chrome supports extensions to the Screen Capture API that allow developers to limit the region of the capture. Namely, these are:

• The Element Capture API, which is supported from Chrome 132 (see https://chromestatus.com/feature/5198989277790208).
• The Region Capture API, which is supported from Chrome 104 (see https://chromestatus.com/feature/5712447794053120).

This PR adds documentation for these extensions under a new tree "Screen Capture extensions", which I felt was preferable to adding a separate docs tree for multiple APIs that do very similar things.

Additional details

Related issues and pull requests

Fixes mdn/mdn#580

• BCD addition: Chrome 132 supports Element Capture API browser-compat-data#25232.
• dom-examples addition: Add DOM examples for Screen Capture API dom-examples#285. The linked demos won't work until this PR is merged.

[github-actions]

Preview URLs (11 pages)

• /en-US/docs/Web/API/BrowserCaptureMediaStreamTrack/clone
• /en-US/docs/Web/API/BrowserCaptureMediaStreamTrack/cropTo
• /en-US/docs/Web/API/BrowserCaptureMediaStreamTrack/restrictTo
• /en-US/docs/Web/API/BrowserCaptureMediaStreamTrack
• /en-US/docs/Web/API/CropTarget/fromElement_static
• /en-US/docs/Web/API/CropTarget
• /en-US/docs/Web/API/RestrictionTarget/fromElement_static
• /en-US/docs/Web/API/RestrictionTarget
• /en-US/docs/Web/API/Screen_Capture_API
• /en-US/docs/Web/API/Screen_Capture_extensions/Element_Region_Capture
• /en-US/docs/Web/API/Screen_Capture_extensions

Flaws (4)

Note! 7 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/BrowserCaptureMediaStreamTrack/restrictTo
Title: BrowserCaptureMediaStreamTrack: restrictTo() method
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.BrowserCaptureMediaStreamTrack.restrictTo

---

URL: /en-US/docs/Web/API/RestrictionTarget
Title: RestrictionTarget
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.RestrictionTarget

---

URL: /en-US/docs/Web/API/RestrictionTarget/fromElement_static
Title: RestrictionTarget: fromElement() static method
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.RestrictionTarget.fromElement_static

---

URL: /en-US/docs/Web/API/Screen_Capture_extensions
Title: Screen Capture extensions
Flaw count: 1

• bad_bcd_queries:
  • No BCD data for query: api.RestrictionTarget

External URLs (8)

URL: /en-US/docs/Web/API/Screen_Capture_extensions
Title: Screen Capture extensions

• https://developer.chrome.com/docs/web-platform/element-capture (1 time) (Note! This may be a new URL 👀)
• https://developer.chrome.com/docs/web-platform/region-capture (1 time) (Note! This may be a new URL 👀)
• https://element-capture-demo.glitch.me/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/screen-capture-api (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/API/Screen_Capture_extensions/Element_Region_Capture
Title: Using the Element Capture and Region Capture APIs

• https://element-capture-demo.glitch.me/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/screen-capture-api/basic-screen-capture (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/screen-capture-api/element-capture (2 times) (Note! This may be a new URL 👀)
• https://mdn.github.io/dom-examples/screen-capture-api/region-capture (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2024-11-29 10:06:42)

[skyclouds2001]

mdn/mdn#580 could be close with this PR

[chrisdavidmills]

mdn/mdn#580 could be close with this PR

Cool, thanks for the heads-up @skyclouds2001. I'll update the description to mention it.

[beaufortfrancois]

I'm not sure that's the right conclusion we aimed regarding these two APIs.
My understanding is that both APIs have legitimate use cases, and that Element Capture does not supersede Region Capture.

FYI @eladalon1983

[chrisdavidmills]

I'd appreciate some guidance here on what to say here @beaufortfrancois @eladalon1983 — I am not clear on what the distinct use cases are for each.

[beaufortfrancois]

If it's okay with you, let's wait until mid-January when @eladalon1983 returns, as there's nothing urgent that needs to be addressed immediately.

[chrisdavidmills]

Sure, that's fine by me. Do you want to get this published before that, and then update with better information once @eladalon1983 returns, or hold off on publication?

[beaufortfrancois]

Let's hold off if that's okay.

[chrisdavidmills]

OK, that's fine.

[wbamberg]

Since this PR is not currently waiting for content review, I just removed requests for content reviewers, otherwise we will get confused :).