Editorial review: Add documentation for Screen Capture extensions, element capture and region capture

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

@@ -29,9 +29,14 @@ 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(demoArea);
+const cropTarget = await CropTarget.fromElement(demoElem);
 
 // Capture video stream from user's webcam and isolate video track
 const stream =

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

@@ -38,9 +38,14 @@ The promise will reject if:
 ### 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(demoArea);
+const cropTarget = await CropTarget.fromElement(demoElem);
 
 // Capture video stream from user's webcam and isolate video track
 const stream =

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

@@ -38,6 +38,11 @@ The promise will reject if:
 ### 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);

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

@@ -30,9 +30,14 @@ A {{jsxref("Promise")}} that resolves to a {{domxref("CropTarget")}} object inst
 ## 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(demoArea);
+const cropTarget = await CropTarget.fromElement(demoElem);
 
 // Capture video stream from user's webcam and isolate video track
 const stream =

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

@@ -21,9 +21,14 @@ The **`CropTarget`** interface of the {{domxref("Screen Capture extensions", "Sc
 ## 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(demoArea);
+const cropTarget = await CropTarget.fromElement(demoElem);
 
 // Capture video stream from user's webcam and isolate video track
 const stream =

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

@@ -43,6 +43,11 @@ The promise will reject if the restriction target element is not eligible for re
 ## 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);

files/en-us/web/api/restrictiontarget/index.md

@@ -21,6 +21,11 @@ The **`RestrictionTarget`** interface of the {{domxref("Screen Capture extension
 ## 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);

files/en-us/web/api/screen_capture_extensions/element_region_capture/index.md

@@ -282,14 +282,22 @@ const demoElem = document.querySelector("#demo");
 Now let's examine the Region Capture demo's `startCapture()` function:
 
 ```js
+const displayMediaOptions = {
+  video: {
+    displaySurface: "window",
+  },
+  audio: false,
+  preferCurrentTab: true,
+};
+
 async function startCapture() {
   logElem.textContent = "";
 
   try {
     const stream =
       await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
     const [track] = stream.getVideoTracks();
-    const cropTarget = await CropTarget.fromElement(demoArea);
+    const cropTarget = await CropTarget.fromElement(demoElem);
     await track.cropTo(cropTarget);
 
     videoElem.srcObject = stream;
@@ -350,3 +358,4 @@ As a result, it is generally recommended that you use the newer Element Capture
 
 - [Screen Capture extensions](/en-US/docs/Web/API/Screen_Capture_extensions)
 - [Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API)
+- [Element Capture Demo](https://element-capture-demo.glitch.me/)

files/en-us/web/api/screen_capture_extensions/index.md

@@ -44,6 +44,8 @@ See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Scre
 
 For demos, see our [Screen Capture API demos](https://mdn.github.io/dom-examples/screen-capture-api) GitHub directory. See [Using the Element Capture and Region Capture APIs](/en-US/docs/Web/API/Screen_Capture_extensions/Element_Region_Capture) for code explanation.
 
+See also [Element Capture Demo](https://element-capture-demo.glitch.me/).
+
 ## Specifications
 
 {{Specifications}}