Skip to content

feature: Add Dark Mode for developers #1711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

feature: Add Dark Mode for developers #1711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c7efc73
Implement dark mode toggle and update styles across WebRTC samples
patrice012 Jun 4, 2025
c8323c5
merge webrtc/samples gh-pages
patrice012 Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
549 changes: 388 additions & 161 deletions index.html
View file
Open in desktop

Large diffs are not rendered by default.

132 changes: 78 additions & 54 deletions src/content/capture/canvas-filter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,61 +7,85 @@
* tree.
-->
<html>
<head>

<meta charset="utf-8">
<meta name="description" content="WebRTC code samples">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta itemprop="description" content="Client-side WebRTC code samples">
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
<meta itemprop="name" content="WebRTC code samples">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#ffffff">

<base target="_blank">
<head>
<meta charset="utf-8" />
<meta name="description" content="WebRTC code samples" />
<meta
name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"
/>
<meta itemprop="description" content="Client-side WebRTC code samples" />
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png" />
<meta itemprop="name" content="WebRTC code samples" />
<meta name="mobile-web-app-capable" content="yes" />
<meta id="theme-color" name="theme-color" content="#ffffff" />

<base target="_blank" />

<title>Video to Canvas to video</title>

<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../../../css/main.css"/>
<link rel="stylesheet" href="css/main.css"/>

</head>

<body>

<div id="container">

<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>Stream camera via a canvas to a video element</span>
</h1>

<video id="source" autoplay></video>
<canvas id="canvas-source" style="display:none"></canvas>
<canvas id="canvas-result" style="display:none"></canvas>

<video id="result" autoplay></video>

<p>The camera is captured to a video element, which is mapped onto a
canvas, and a red square is added.</p>
<p>The canvas is then captured to an ImageData object, and painted
onto a second canvas.</p>
<p>A stream is captured from the second canvas element using its
<code>captureStream()</code> method and set as the <code>srcObject</code> of the video element.</p>

<p>The <code>inputStream</code>, <code>source</code>,
<code>canvasIn</code>, <code>canvasOut</code>,
<code>result</code>, and <code>stream</code> variables are in global
scope, so you can
inspect them from the browser console.</p>

<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/canvas-filter"
title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

</div>

<script src="js/main.js"></script>

<script src="../../../js/lib/ga.js"></script>
</body>
<link
rel="icon"
sizes="192x192"
href="../../../images/webrtc-icon-192x192.png"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="../../../css/main.css" />
<link rel="stylesheet" href="css/main.css" />
</head>

<body>
<div id="container">
<h1>
<a href="//webrtc.github.io/samples/" title="WebRTC samples homepage"
>WebRTC samples</a
>
<span>Stream camera via a canvas to a video element</span>
</h1>

<video id="source" autoplay></video>
<canvas id="canvas-source" style="display: none"></canvas>
<canvas id="canvas-result" style="display: none"></canvas>

<video id="result" autoplay></video>

<p>
The camera is captured to a video element, which is mapped onto a
canvas, and a red square is added.
</p>
<p>
The canvas is then captured to an ImageData object, and painted onto a
second canvas.
</p>
<p>
A stream is captured from the second canvas element using its
<code>captureStream()</code> method and set as the
<code>srcObject</code> of the video element.
</p>

<p>
The <code>inputStream</code>, <code>source</code>,
<code>canvasIn</code>, <code>canvasOut</code>, <code>result</code>, and
<code>stream</code> variables are in global scope, so you can inspect
them from the browser console.
</p>

<a
href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/canvas-filter"
title="View source for this page on GitHub"
id="viewSource"
>View source on GitHub</a
>
</div>

<script src="../../../js/togglemode.js"></script>

<script src="js/main.js"></script>

<script src="../../../js/lib/ga.js"></script>
</body>
</html>
177 changes: 107 additions & 70 deletions src/content/capture/canvas-pc/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,77 +7,114 @@
* tree.
-->
<html>
<head>

<meta charset="utf-8">
<meta name="description" content="WebRTC code samples">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta itemprop="description" content="Client-side WebRTC code samples">
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
<meta itemprop="name" content="WebRTC code samples">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#ffffff">

<base target="_blank">
<head>
<meta charset="utf-8" />
<meta name="description" content="WebRTC code samples" />
<meta
name="viewport"
content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"
/>
<meta itemprop="description" content="Client-side WebRTC code samples" />
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png" />
<meta itemprop="name" content="WebRTC code samples" />
<meta name="mobile-web-app-capable" content="yes" />
<meta id="theme-color" name="theme-color" content="#ffffff" />

<base target="_blank" />

<title>Canvas to peer connection</title>

<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../../../css/main.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>

<body>

<div id="container">

<h1>
<a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>Stream from canvas to peer connection</span>
</h1>

<canvas></canvas>
<video playsinline autoplay muted></video>
<div id="autoplay">Due to autoplay policy the video seems not to be playing. Clicking the left teapot usually resolves this.</div>

<p>Click and drag on the canvas element (on the left) to move the teapot.</p>

<p>This demo requires Firefox 47 or Chrome 52 (or later).</p>

<p>The teapot is drawn on the canvas element using WebGL. A stream is captured from the canvas using its <code>captureStream()</code>
method and streamed via a peer connection to the video element on the right.</p>

<p>View the browser console to see logging.</p>

<p>Several variables are in global scope, so you can inspect them from the console: <code>canvas</code>,
<code>video</code>, <code>localPeerConnection</code>, <code>remotePeerConnection</code> and <code>stream</code>.
</p>

<p>For more demos and information about <code>captureStream()</code>, see <a
href="https://docs.google.com/document/d/1JmWfOtUP6ZqsYJ--U8y0OtHkBt-VyjX4N-JqIjb1t78"
title="Implementation overview doc">Media Capture from Canvas Implementation</a>.</p>

<p>For more information about RTCPeerConnection, see <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/"
title="HTML5 Rocks article about WebRTC by Sam Dutton">Getting
Started With WebRTC</a>.</p>

<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/canvas-pc"
title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

</div>

<!-- Teapot code -->
<script src="../../../js/third_party/webgl_teapot/webgl-utils.js"></script>
<script src="../../../js/third_party/webgl_teapot/webgl-debug.js"></script>
<script src="../../../js/third_party/webgl_teapot/matrix4x4.js"></script>
<script src="../../../js/third_party/webgl_teapot/cameracontroller.js"></script>
<script src="../../../js/third_party/webgl_teapot/teapot-streams.js"></script>
<script src="../../../js/third_party/webgl_teapot/demo.js"></script>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<script src="js/main.js" async></script>

<script src="../../../js/lib/ga.js"></script>
</body>
<link
rel="icon"
sizes="192x192"
href="../../../images/webrtc-icon-192x192.png"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="../../../css/main.css" />
<link rel="stylesheet" href="css/main.css" />
</head>

<body>
<div id="container">
<h1>
<a href="//webrtc.github.io/samples/" title="WebRTC samples homepage"
>WebRTC samples</a
>
<span>Stream from canvas to peer connection</span>
</h1>

<canvas></canvas>
<video playsinline autoplay muted></video>
<div id="autoplay">
Due to autoplay policy the video seems not to be playing. Clicking the
left teapot usually resolves this.
</div>

<p>
Click and drag on the canvas element (on the left) to move the teapot.
</p>

<p>This demo requires Firefox 47 or Chrome 52 (or later).</p>

<p>
The teapot is drawn on the canvas element using WebGL. A stream is
captured from the canvas using its <code>captureStream()</code> method
and streamed via a peer connection to the video element on the right.
</p>

<p>View the browser console to see logging.</p>

<p>
Several variables are in global scope, so you can inspect them from the
console: <code>canvas</code>, <code>video</code>,
<code>localPeerConnection</code>, <code>remotePeerConnection</code> and
<code>stream</code>.
</p>

<p>
For more demos and information about <code>captureStream()</code>, see
<a
href="https://docs.google.com/document/d/1JmWfOtUP6ZqsYJ--U8y0OtHkBt-VyjX4N-JqIjb1t78"
title="Implementation overview doc"
>Media Capture from Canvas Implementation</a
>.
</p>

<p>
For more information about RTCPeerConnection, see
<a
href="http://www.html5rocks.com/en/tutorials/webrtc/basics/"
title="HTML5 Rocks article about WebRTC by Sam Dutton"
>Getting Started With WebRTC</a
>.
</p>

<a
href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/canvas-pc"
title="View source for this page on GitHub"
id="viewSource"
>View source on GitHub</a
>
</div>

<script src="../../../js/togglemode.js"></script>

<!-- Teapot code -->
<script src="../../../js/third_party/webgl_teapot/webgl-utils.js"></script>
<script src="../../../js/third_party/webgl_teapot/webgl-debug.js"></script>
<script src="../../../js/third_party/webgl_teapot/matrix4x4.js"></script>
<script src="../../../js/third_party/webgl_teapot/cameracontroller.js"></script>
<script src="../../../js/third_party/webgl_teapot/teapot-streams.js"></script>
<script src="../../../js/third_party/webgl_teapot/demo.js"></script>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

<script src="js/main.js" async></script>

<script src="../../../js/lib/ga.js"></script>
</body>
</html>
Loading