v132 · multimedia

Element Capture

API for capturing a subtree of the DOM.

concepts

  1. Element Capture

    Element Capture restricts a screen-share to a specific element. The captured stream contains only that subtree.

  2. conferencing app

    The motivating use case: share only the slide; the participant sidebar, chat and toolbar stay private.

  3. subtree cropper

    Pick a sidebar, main, or toolbar region in a fake email app. Start a tab capture, then restrictTo() the picked element and see only that subtree in the preview.

  4. RestrictionTarget lifecycle

    Walk five lifecycles — happy path, reparent, remove, hide, innerHTML replace — with timestamped step-by-step effects and the spec excerpt that drives them.

why it shipped

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 exclus

references