Skip to content

Commit 6f125a0

Browse files
chadwallacehartchadwallacehart
committed
css updates
1 parent db3016b commit 6f125a0

File tree

6 files changed

+72
-39
lines changed

6 files changed

+72
-39
lines changed

‎WebCodecs/decodeToVideo.html

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>WebCodecs Stream</title>
6-
<style>
7-
body {
8-
background-color: #333;
9-
color: #fff;
10-
font-size: large;
11-
}
12-
13-
a {
14-
color: #0099ff; /* Light blue */
15-
}
16-
17-
a:hover {
18-
color: #00ccff; /* Slightly lighter blue */
19-
}
20-
21-
ul, p {
22-
margin-top: 6px;
23-
margin-bottom: 6px;
24-
}
25-
26-
</style>
6+
<link rel="stylesheet" href="../style.css">
277
</head>
288
<body>
299
<p>
@@ -49,7 +29,7 @@
4929
Video "<a href="https://peach.blender.org/">Big Buck Bunny</a>" by Blender Foundation, used under <a
5030
href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
5131
</p>
52-
<button>Play Big Buck Bunny</button>
32+
<button>Play Big Buck Bunny</button> or select a local file:
5333
<input type="file" id="videoFile" accept="video/*">
5434
<br/>
5535
<video autoplay playsinline controls></video>

‎canvas/canvasCapture.html

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
<head>
33
<meta charset="UTF-8">
44
<title>Video to MediaStream using Canvas.captureStream and WebAudio</title>
5+
<link rel="stylesheet" href="../style.css">
56
<style>
6-
body {
7-
background-color: #333;
8-
color: #fff;
9-
}
10-
117
div#results {
128
display: flex;
139
}

‎index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Client-side Examples on the ways to send a video file over WebRTC</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<p>
10+
Examples of how to convert a video file to a <code>MediaStream</code> where it can be sent via WebRTC.
11+
See <a href="https://webrtcHacks.com">webrtcHacks</a> for full details and commentary.
12+
</p>
13+
<ul>
14+
<li>
15+
<a href="screenshare/screenshareVideoPC.html">getDisplayMedia of pop-out video file</a> - load a video file into a pop-up
16+
and use the <code>getDisplayMedia</code> for capture.
17+
</li>
18+
<li>
19+
<a href="captureStream/captureStream.html">VideoElement Capture Stream</a> - capture the video and audio directly from a
20+
<code>video</code> element. The audio is captured using the Web Audio API and combined with the video stream
21+
to create a <code>MediaStream</code>.
22+
</li>
23+
<li>
24+
<a href="captureStream/captureStreamWebAudio.html">VideoElement Capture Stream with WebAudio</a> - same as above, but experimenting
25+
with using WebAudio for local audio control.
26+
</li>
27+
<li>
28+
<a href="canvas/canvasCapture.html">Canvas Capture + Web Audio</a> - write a source video to a canvas and then use
29+
<code>canvas.captureStream()</code> to capture the video with Web Audio API to capture the audio.
30+
</li>
31+
<li>
32+
<a href="WebCodecs/decodeToVideo.html">WebCodecs</a> - load a video file and use WebCodecs to convert it to a MediaStream
33+
</li>
34+
35+
</ul>
36+
</body>
37+
</html>

‎screenshare/screenshareVideo.html

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Screenshare a video file</title>
6-
<style>
7-
body {
8-
background-color: #333;
9-
color: #fff;
10-
}
11-
</style>
5+
<title>Basic screenshare a video file example</title>
6+
<link rel="stylesheet" href="../style.css">
127
</head>
138
<body>
149
<input type="file" id="videoFile" accept="video/*">Load and play</input>

‎screenshare/screenshareVideoPC.html

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Screenshare a video file</title>
6+
<link rel="stylesheet" href="../style.css">
67
<style>
7-
body {
8-
background-color: #333;
9-
color: #fff;
10-
}
11-
128
div.output {
139
display: flex;
1410
}

‎style.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap');
3+
4+
body {
5+
background-color: #333;
6+
color: #fff;
7+
font-size: 20px;
8+
font-family: 'Ubuntu', sans-serif;
9+
max-width: 1200px;
10+
}
11+
12+
a {
13+
color: #0099ff; /* Light blue */
14+
font-weight: bold;
15+
}
16+
17+
a:hover {
18+
color: #00ccff; /* Slightly lighter blue */
19+
font-weight: unset;
20+
}
21+
22+
ul, li {
23+
margin-top: 6px;
24+
margin-bottom: 6px;
25+
}
26+
code {
27+
font-family: 'Ubuntu Mono', monospace;
28+
color: #dddddd;
29+
}

0 commit comments

Comments
 (0)