Element Capture

Category: Multimedia
Type: New or changed feature
Status: In development (Chrome In development)
Intent stage: None

Summary

API for capturing a subtree of the DOM. Given a video MediaStreamTrack obtained through pre-existing means to initiate tab-capture, Element Capture allows mutating the track to only capture a subtree of the DOM starting at a given Element. The API bears some resemblance to the Region Capture API, but affords greater flexibility for applications, because occluding and occluded content are both excluded from the capture.

Motivation

Pre-existing mechanisms allow applications to capture the current tab and crop the resulting video track to the bounding box of a target-element. However: * If any elements occlude the target element, either partially or fully, they are included in the captured frames. * If any elements are partially-occluded by a partially transparent target-element, those partially-occluded elements will also be (partially) included in the captured frames. By allowing applications to restrict the capture to a subtree of the DOM rather than a subsection of the viewport, we allow the intentional exclusion of interfering content from the capture. This way, applications can robustly capture just the intended content, allowing them to offer a better experience to users.

Standards & signals

Specification: https://screen-share.github.io/element-capture
Firefox: Negative
Safari: No signal
Web developers: Strongly positive — LibreStream: “This is perfect. We have a video collaboration app where we need to share documents (e.g. PDFs) so users can walk through the document together. As part of this, we have a document viewer that the sharer needs to share dur-ing the call and scroll through different pages where others can annotate on the shared document. Prior to Element Capture, this was a lousy user experience since the entire window needed to be displayed and didn’t allow annotations from the sharer. Thank you!” Engagely: “I highly support adopting this specification. We at Engageli intend to use it for our session recorder, and for collaboration tools.” Tango: “I can't emphasize enough how instrumental this specification would be for our product and user experience.” RGO Communications: “We support this API. We have not participated in the origin trial due to prioritization issues; however, we intend to use the API after it's shipped.” AudioPump: “At AudioPump, Inc., we have several projects that use similar APIs and will likely also implement Element Capture. There are no specific plans at the moment, and the current restrictions cut down on the use cases, but I'm sure once it becomes available for users, we will implement something.” Tella: “I support adopting the Element Capture specification. We could in the future use this to do cleaner screen captures in our chrome extension. We'd let
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1418194

Samples: https://element-capture-demo.glitch.me

Explainers: https://github.com/screen-share/element-capture/blob/main/README.md

View on chromestatus.com