Remove logging code from screen capture demos

chrisdavidmills · Feb 5, 2025 · 6ac36ff · 6ac36ff
1 parent 1f768e7
commit 6ac36ff
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 197 deletions.
diff --git a/screen-capture-api/basic-screen-capture/index.css b/screen-capture-api/basic-screen-capture/index.css
@@ -18,9 +18,8 @@ video,
 }
 
 video,
-#demo>p,
-#log {
-  border: 1px solid #CCC;
+#demo > p {
+  border: 1px solid #ccc;
   margin: 0;
 }
 
@@ -29,17 +28,11 @@ video {
   aspect-ratio: 4/3;
 }
 
-#demo>h2 {
+#demo > h2 {
   margin-top: 0;
 }
 
-#demo>p {
+#demo > p {
   padding: 5px;
   height: 320px;
 }
-
-#log {
-  height: 20rem;
-  padding: 0.5rem;
-  overflow: auto;
-}
diff --git a/screen-capture-api/basic-screen-capture/index.html b/screen-capture-api/basic-screen-capture/index.html
@@ -1,36 +1,36 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Screen Capture API demo</title>
+    <link href="index.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>Screen Capture API demo</title>
-  <link href="index.css" rel="stylesheet">
-  <script defer src="index.js"></script>
-</head>
+  <body>
+    <h1>Screen Capture API example</h1>
+    <p>
+      Click the "Start Capture" button to capture a tab, window, or screen as a
+      video stream and broadcast it in the
+      <code>&lt;video&gt;</code> element on the left. This demo uses the Screen
+      Capture API.
+    </p>
 
-<body>
-  <h1>Screen Capture API example</h1>
-  <p>
-    Click the "Start Capture" button to capture a tab, window, or screen as a video stream and broadcast it in the
-    <code>&lt;video&gt;</code> element on the left. This demo uses the Screen Capture API.
-  </p>
+    <p>
+      <button id="start">Start Capture</button>&nbsp;<button id="stop">
+        Stop Capture
+      </button>
+    </p>
 
-  <p>
-    <button id="start">Start Capture</button>&nbsp;<button id="stop">
-      Stop Capture
-    </button>
-  </p>
-
-  <div id="main-app">
-    <video autoplay></video>
-    <div id="demo">
-      <h2>Some kind of demo</h2>
-      <p>This container is a placeholder for some kind of demo that you might want to share with other participants.</p>
+    <div id="main-app">
+      <video autoplay></video>
+      <div id="demo">
+        <h2>Some kind of demo</h2>
+        <p>
+          This container is a placeholder for some kind of demo that you might
+          want to share with other participants.
+        </p>
+      </div>
     </div>
-  </div>
-
-  <h2>Log:</h2>
-  <pre id="log"></pre>
-</body>
-
+  </body>
 </html>
diff --git a/screen-capture-api/basic-screen-capture/index.js b/screen-capture-api/basic-screen-capture/index.js
@@ -1,5 +1,4 @@
 const videoElem = document.querySelector("video");
-const logElem = document.getElementById("log");
 const startElem = document.getElementById("start");
 const stopElem = document.getElementById("stop");
 
@@ -18,28 +17,22 @@ startElem.addEventListener(
   (evt) => {
     startCapture();
   },
-  false,
+  false
 );
 
 stopElem.addEventListener(
   "click",
   (evt) => {
     stopCapture();
   },
-  false,
+  false
 );
 
-console.log = (msg) => (logElem.textContent = `${logElem.textContent}\n${msg}`);
-console.error = (msg) =>
-  (logElem.textContent = `${logElem.textContent}\nError: ${msg}`);
-
 async function startCapture() {
-  logElem.textContent = "";
-
   try {
-    videoElem.srcObject =
-      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-    dumpOptionsInfo();
+    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(
+      displayMediaOptions
+    );
   } catch (err) {
     console.error(err);
   }
@@ -51,13 +44,3 @@ function stopCapture(evt) {
   tracks.forEach((track) => track.stop());
   videoElem.srcObject = null;
 }
-
-function dumpOptionsInfo() {
-  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
-
-  console.log("Track settings:");
-  console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
-  console.log("Track constraints:");
-  console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
-}
-
diff --git a/screen-capture-api/element-capture/index.css b/screen-capture-api/element-capture/index.css
@@ -26,9 +26,8 @@ video,
 }
 
 video,
-#demo>p,
-#log {
-  border: 1px solid #CCC;
+#demo > p {
+  border: 1px solid #ccc;
   margin: 0;
 }
 
@@ -37,17 +36,11 @@ video {
   aspect-ratio: 4/3;
 }
 
-#demo>h2 {
+#demo > h2 {
   margin-top: 0;
 }
 
-#demo>p {
+#demo > p {
   padding: 5px;
   height: 320px;
 }
-
-#log {
-  height: 20rem;
-  padding: 0.5rem;
-  overflow: auto;
-}
diff --git a/screen-capture-api/element-capture/index.html b/screen-capture-api/element-capture/index.html
@@ -1,37 +1,36 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Element Capture API demo</title>
+    <link href="index.css" rel="stylesheet" />
+    <script defer src="index.js"></script>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>Element Capture API demo</title>
-  <link href="index.css" rel="stylesheet">
-  <script defer src="index.js"></script>
-</head>
+  <body>
+    <h1>Element Capture API example</h1>
+    <p>
+      Click the "Start Capture" button to capture the demo container element
+      shown on the right as a video stream and broadcast it in the
+      <code>&lt;video&gt;</code> element on the left. This demo uses the Screen
+      Capture API and the Element Capture API.
+    </p>
 
-<body>
-  <h1>Element Capture API example</h1>
-  <p>
-    Click the "Start Capture" button to capture the demo container element shown on the right as a video stream and
-    broadcast it in the <code>&lt;video&gt;</code> element on the left. This demo uses the Screen Capture API and the
-    Element Capture API.
-  </p>
+    <p>
+      <button id="start">Start Capture</button>&nbsp;<button id="stop">
+        Stop Capture
+      </button>
+    </p>
 
-  <p>
-    <button id="start">Start Capture</button>&nbsp;<button id="stop">
-      Stop Capture
-    </button>
-  </p>
-
-  <div id="main-app">
-    <video autoplay></video>
-    <div id="demo">
-      <h2>Some kind of demo</h2>
-      <p>This container is a placeholder for some kind of demo that you might want to share with other participants.</p>
+    <div id="main-app">
+      <video autoplay></video>
+      <div id="demo">
+        <h2>Some kind of demo</h2>
+        <p>
+          This container is a placeholder for some kind of demo that you might
+          want to share with other participants.
+        </p>
+      </div>
     </div>
-  </div>
-
-  <h2>Log:</h2>
-  <pre id="log"></pre>
-</body>
-
+  </body>
 </html>
diff --git a/screen-capture-api/element-capture/index.js b/screen-capture-api/element-capture/index.js
@@ -1,10 +1,8 @@
 const videoElem = document.querySelector("video");
-const logElem = document.getElementById("log");
 const startElem = document.getElementById("start");
 const stopElem = document.getElementById("stop");
 const demoElem = document.querySelector("#demo");
 
-
 // Options for getDisplayMedia()
 
 const displayMediaOptions = {
@@ -21,34 +19,26 @@ startElem.addEventListener(
   (evt) => {
     startCapture();
   },
-  false,
+  false
 );
 
 stopElem.addEventListener(
   "click",
   (evt) => {
     stopCapture();
   },
-  false,
+  false
 );
 
-console.log = (msg) => (logElem.textContent = `${logElem.textContent}\n${msg}`);
-console.error = (msg) =>
-  (logElem.textContent = `${logElem.textContent}\nError: ${msg}`);
-
 async function startCapture() {
-  logElem.textContent = "";
-
   try {
-    const stream =
-      await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+    const stream = await navigator.mediaDevices.getDisplayMedia(
+      displayMediaOptions
+    );
     const [track] = stream.getVideoTracks();
     const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
     await track.restrictTo(restrictionTarget);
-
     videoElem.srcObject = stream;
-
-    dumpOptionsInfo();
   } catch (err) {
     console.error(err);
   }
@@ -60,13 +50,3 @@ function stopCapture(evt) {
   tracks.forEach((track) => track.stop());
   videoElem.srcObject = null;
 }
-
-function dumpOptionsInfo() {
-  const videoTrack = videoElem.srcObject.getVideoTracks()[0];
-
-  console.log("Track settings:");
-  console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
-  console.log("Track constraints:");
-  console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
-}
-
diff --git a/screen-capture-api/region-capture/index.css b/screen-capture-api/region-capture/index.css
@@ -18,9 +18,8 @@ video,
 }
 
 video,
-#demo>p,
-#log {
-  border: 1px solid #CCC;
+#demo > p {
+  border: 1px solid #ccc;
   margin: 0;
 }
 
@@ -29,17 +28,11 @@ video {
   aspect-ratio: 4/3;
 }
 
-#demo>h2 {
+#demo > h2 {
   margin-top: 0;
 }
 
-#demo>p {
+#demo > p {
   padding: 5px;
   height: 320px;
 }
-
-#log {
-  height: 20rem;
-  padding: 0.5rem;
-  overflow: auto;
-}