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

files/en-us/web/api/browsercapturemediastreamtrack/clone/index.md

@@ -0,0 +1,64 @@
+---
+title: "BrowserCaptureMediaStreamTrack: clone() method"
+short-title: clone()
+slug: Web/API/BrowserCaptureMediaStreamTrack/clone
+page-type: web-api-instance-method
+browser-compat: api.BrowserCaptureMediaStreamTrack.clone
+---
+
+{{APIRef("Screen Capture extensions")}}{{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.
+
+## 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 extensions](/en-US/docs/Web/API/Screen_Capture_extensions)
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)

files/en-us/web/api/browsercapturemediastreamtrack/cropto/index.md

@@ -0,0 +1,84 @@
+---
+title: "BrowserCaptureMediaStreamTrack: cropTo() method"
+short-title: cropTo()
+slug: Web/API/BrowserCaptureMediaStreamTrack/cropTo
+page-type: web-api-instance-method
+browser-compat: api.BrowserCaptureMediaStreamTrack.cropTo
+---
+
+{{APIRef("Screen Capture extensions")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`cropTo()`** method of the {{domxref("BrowserCaptureMediaStreamTrack")}} interface crops a self-capture stream to the area in which a specified crop target 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 has clones or is not a track captured from the user's screen.
+- `CropTarget` is not one of the values specified above.
+- `CropTarget` was created in a tab other than the one being captured.
+
+## 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_extensions/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 extensions](/en-US/docs/Web/API/Screen_Capture_extensions)
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)

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 extensions")}}{{SeeCompatTable}}
+
+The **`BrowserCaptureMediaStreamTrack`** interface of the {{domxref("Screen Capture extensions", "Screen Capture extensions", "", "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 crop target element is rendered.
+- {{domxref("BrowserCaptureMediaStreamTrack.restrictTo", "restrictTo()")}} {{Experimental_Inline}}
+  - : Restricts a self-capture stream to a specific rendered restriction target element.
+
+## Examples
+
+See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_extensions/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture extensions](/en-US/docs/Web/API/Screen_Capture_extensions)
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)

files/en-us/web/api/browsercapturemediastreamtrack/restrictto/index.md

@@ -0,0 +1,84 @@
+---
+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 extensions")}}{{SeeCompatTable}}{{securecontext_header}}
+
+The **`restrictTo()`** method of the {{domxref("BrowserCaptureMediaStreamTrack")}} interface restricts a self-capture stream to a specific rendered restriction target element.
+
+## 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 has clones or is not a track captured from the user's screen.
+- `RestrictionTarget` is not one of the values specified above.
+- `RestrictionTarget` was created in a tab other than the one being captured.
+
+## 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_extensions/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 extensions](/en-US/docs/Web/API/Screen_Capture_extensions)
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)

files/en-us/web/api/croptarget/fromelement_static/index.md

@@ -0,0 +1,67 @@
+---
+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 extensions")}}{{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.
+
+## Syntax
+
+```js-nolint
+CropTarget.fromElement(element)
+```
+
+### Parameters
+
+- `element`
+  - : A reference to a DOM element that you want to use as a crop target.
+
+### 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 {{domxref("Window.postMessage()")}}, for example.
+
+## 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_extensions/Element_Region_Capture) for in-context example code.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [Screen Capture extensions](/en-US/docs/Web/API/Screen_Capture_extensions)
+- [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)