Skip to content

Commit 8884ad4

Browse files
chrisdavidmillschrisdavidmills
authored
Remove logging code from screen capture demos (#294)
* Remove logging code from screen capture demos * Add preferCurrentTab option to basic screen capture demo * Reorder/improve comments
1 parent 1f768e7 commit 8884ad4

9 files changed

Lines changed: 121 additions & 199 deletions

File tree

‎screen-capture-api/basic-screen-capture/index.css‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ video,
1818
}
1919

2020
video,
21-
#demo>p,
22-
#log {
23-
border: 1px solid #CCC;
21+
#demo > p {
22+
border: 1px solid #ccc;
2423
margin: 0;
2524
}
2625

@@ -29,17 +28,11 @@ video {
2928
aspect-ratio: 4/3;
3029
}
3130

32-
#demo>h2 {
31+
#demo > h2 {
3332
margin-top: 0;
3433
}
3534

36-
#demo>p {
35+
#demo > p {
3736
padding: 5px;
3837
height: 320px;
3938
}
40-
41-
#log {
42-
height: 20rem;
43-
padding: 0.5rem;
44-
overflow: auto;
45-
}

‎screen-capture-api/basic-screen-capture/index.html‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Screen Capture API demo</title>
6+
<link href="index.css" rel="stylesheet" />
7+
<script defer src="index.js"></script>
8+
</head>
39

4-
<head>
5-
<meta charset="utf-8">
6-
<title>Screen Capture API demo</title>
7-
<link href="index.css" rel="stylesheet">
8-
<script defer src="index.js"></script>
9-
</head>
10+
<body>
11+
<h1>Screen Capture API example</h1>
12+
<p>
13+
Click the "Start Capture" button to capture a tab, window, or screen as a
14+
video stream and broadcast it in the
15+
<code>&lt;video&gt;</code> element on the left. This demo uses the Screen
16+
Capture API.
17+
</p>
1018

11-
<body>
12-
<h1>Screen Capture API example</h1>
13-
<p>
14-
Click the "Start Capture" button to capture a tab, window, or screen as a video stream and broadcast it in the
15-
<code>&lt;video&gt;</code> element on the left. This demo uses the Screen Capture API.
16-
</p>
19+
<p>
20+
<button id="start">Start Capture</button>&nbsp;<button id="stop">
21+
Stop Capture
22+
</button>
23+
</p>
1724

18-
<p>
19-
<button id="start">Start Capture</button>&nbsp;<button id="stop">
20-
Stop Capture
21-
</button>
22-
</p>
23-
24-
<div id="main-app">
25-
<video autoplay></video>
26-
<div id="demo">
27-
<h2>Some kind of demo</h2>
28-
<p>This container is a placeholder for some kind of demo that you might want to share with other participants.</p>
25+
<div id="main-app">
26+
<video autoplay></video>
27+
<div id="demo">
28+
<h2>Some kind of demo</h2>
29+
<p>
30+
This container is a placeholder for some kind of demo that you might
31+
want to share with other participants.
32+
</p>
33+
</div>
2934
</div>
30-
</div>
31-
32-
<h2>Log:</h2>
33-
<pre id="log"></pre>
34-
</body>
35-
35+
</body>
3636
</html>

‎screen-capture-api/basic-screen-capture/index.js‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
const videoElem = document.querySelector("video");
2-
const logElem = document.getElementById("log");
32
const startElem = document.getElementById("start");
43
const stopElem = document.getElementById("stop");
54

@@ -10,6 +9,7 @@ const displayMediaOptions = {
109
displaySurface: "window",
1110
},
1211
audio: false,
12+
preferCurrentTab: true,
1313
};
1414

1515
// Set event listeners for the start and stop buttons
@@ -18,28 +18,22 @@ startElem.addEventListener(
1818
(evt) => {
1919
startCapture();
2020
},
21-
false,
21+
false
2222
);
2323

2424
stopElem.addEventListener(
2525
"click",
2626
(evt) => {
2727
stopCapture();
2828
},
29-
false,
29+
false
3030
);
3131

32-
console.log = (msg) => (logElem.textContent = `${logElem.textContent}\n${msg}`);
33-
console.error = (msg) =>
34-
(logElem.textContent = `${logElem.textContent}\nError: ${msg}`);
35-
3632
async function startCapture() {
37-
logElem.textContent = "";
38-
3933
try {
40-
videoElem.srcObject =
41-
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
42-
dumpOptionsInfo();
34+
videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(
35+
displayMediaOptions
36+
);
4337
} catch (err) {
4438
console.error(err);
4539
}
@@ -51,13 +45,3 @@ function stopCapture(evt) {
5145
tracks.forEach((track) => track.stop());
5246
videoElem.srcObject = null;
5347
}
54-
55-
function dumpOptionsInfo() {
56-
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
57-
58-
console.log("Track settings:");
59-
console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
60-
console.log("Track constraints:");
61-
console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
62-
}
63-

‎screen-capture-api/element-capture/index.css‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ body {
1313
}
1414

1515
#demo {
16+
/* Forms a stacking context */
1617
isolation: isolate;
17-
/* Forms a stacking context. */
18+
/* Flattened */
1819
transform-style: flat;
19-
/* Flattened. */
20+
/* Explicit background color to stop the capture being transparent */
2021
background-color: white;
2122
}
2223

@@ -26,9 +27,8 @@ video,
2627
}
2728

2829
video,
29-
#demo>p,
30-
#log {
31-
border: 1px solid #CCC;
30+
#demo > p {
31+
border: 1px solid #ccc;
3232
margin: 0;
3333
}
3434

@@ -37,17 +37,11 @@ video {
3737
aspect-ratio: 4/3;
3838
}
3939

40-
#demo>h2 {
40+
#demo > h2 {
4141
margin-top: 0;
4242
}
4343

44-
#demo>p {
44+
#demo > p {
4545
padding: 5px;
4646
height: 320px;
4747
}
48-
49-
#log {
50-
height: 20rem;
51-
padding: 0.5rem;
52-
overflow: auto;
53-
}

‎screen-capture-api/element-capture/index.html‎

Lines changed: 30 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,36 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Element Capture API demo</title>
6+
<link href="index.css" rel="stylesheet" />
7+
<script defer src="index.js"></script>
8+
</head>
39

4-
<head>
5-
<meta charset="utf-8">
6-
<title>Element Capture API demo</title>
7-
<link href="index.css" rel="stylesheet">
8-
<script defer src="index.js"></script>
9-
</head>
10+
<body>
11+
<h1>Element Capture API example</h1>
12+
<p>
13+
Click the "Start Capture" button to capture the demo container element
14+
shown on the right as a video stream and broadcast it in the
15+
<code>&lt;video&gt;</code> element on the left. This demo uses the Screen
16+
Capture API and the Element Capture API.
17+
</p>
1018

11-
<body>
12-
<h1>Element Capture API example</h1>
13-
<p>
14-
Click the "Start Capture" button to capture the demo container element shown on the right as a video stream and
15-
broadcast it in the <code>&lt;video&gt;</code> element on the left. This demo uses the Screen Capture API and the
16-
Element Capture API.
17-
</p>
19+
<p>
20+
<button id="start">Start Capture</button>&nbsp;<button id="stop">
21+
Stop Capture
22+
</button>
23+
</p>
1824

19-
<p>
20-
<button id="start">Start Capture</button>&nbsp;<button id="stop">
21-
Stop Capture
22-
</button>
23-
</p>
24-
25-
<div id="main-app">
26-
<video autoplay></video>
27-
<div id="demo">
28-
<h2>Some kind of demo</h2>
29-
<p>This container is a placeholder for some kind of demo that you might want to share with other participants.</p>
25+
<div id="main-app">
26+
<video autoplay></video>
27+
<div id="demo">
28+
<h2>Some kind of demo</h2>
29+
<p>
30+
This container is a placeholder for some kind of demo that you might
31+
want to share with other participants.
32+
</p>
33+
</div>
3034
</div>
31-
</div>
32-
33-
<h2>Log:</h2>
34-
<pre id="log"></pre>
35-
</body>
36-
35+
</body>
3736
</html>

‎screen-capture-api/element-capture/index.js‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
const videoElem = document.querySelector("video");
2-
const logElem = document.getElementById("log");
32
const startElem = document.getElementById("start");
43
const stopElem = document.getElementById("stop");
54
const demoElem = document.querySelector("#demo");
65

7-
86
// Options for getDisplayMedia()
97

108
const displayMediaOptions = {
@@ -21,34 +19,26 @@ startElem.addEventListener(
2119
(evt) => {
2220
startCapture();
2321
},
24-
false,
22+
false
2523
);
2624

2725
stopElem.addEventListener(
2826
"click",
2927
(evt) => {
3028
stopCapture();
3129
},
32-
false,
30+
false
3331
);
3432

35-
console.log = (msg) => (logElem.textContent = `${logElem.textContent}\n${msg}`);
36-
console.error = (msg) =>
37-
(logElem.textContent = `${logElem.textContent}\nError: ${msg}`);
38-
3933
async function startCapture() {
40-
logElem.textContent = "";
41-
4234
try {
43-
const stream =
44-
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
35+
const stream = await navigator.mediaDevices.getDisplayMedia(
36+
displayMediaOptions
37+
);
4538
const [track] = stream.getVideoTracks();
4639
const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
4740
await track.restrictTo(restrictionTarget);
48-
4941
videoElem.srcObject = stream;
50-
51-
dumpOptionsInfo();
5242
} catch (err) {
5343
console.error(err);
5444
}
@@ -60,13 +50,3 @@ function stopCapture(evt) {
6050
tracks.forEach((track) => track.stop());
6151
videoElem.srcObject = null;
6252
}
63-
64-
function dumpOptionsInfo() {
65-
const videoTrack = videoElem.srcObject.getVideoTracks()[0];
66-
67-
console.log("Track settings:");
68-
console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
69-
console.log("Track constraints:");
70-
console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
71-
}
72-

‎screen-capture-api/region-capture/index.css‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ video,
1818
}
1919

2020
video,
21-
#demo>p,
22-
#log {
23-
border: 1px solid #CCC;
21+
#demo > p {
22+
border: 1px solid #ccc;
2423
margin: 0;
2524
}
2625

@@ -29,17 +28,11 @@ video {
2928
aspect-ratio: 4/3;
3029
}
3130

32-
#demo>h2 {
31+
#demo > h2 {
3332
margin-top: 0;
3433
}
3534

36-
#demo>p {
35+
#demo > p {
3736
padding: 5px;
3837
height: 320px;
3938
}
40-
41-
#log {
42-
height: 20rem;
43-
padding: 0.5rem;
44-
overflow: auto;
45-
}

0 commit comments

Comments
 (0)