From c7efc73cd2aa4d5a432cd1a1d333b47bd5191313 Mon Sep 17 00:00:00 2001 From: patrice012 Date: Wed, 4 Jun 2025 15:57:27 +0000 Subject: [PATCH] Implement dark mode toggle and update styles across WebRTC samples - Added a dark mode toggle button to switch between light and dark themes. - Updated CSS to support dark mode styling for various elements. - Refactored HTML structure in multiple WebRTC sample pages for consistency. - Improved accessibility by adding aria-labels to toggle buttons. - Ensured theme preference is saved in localStorage for user convenience. --- index.html | 549 +++++++++++++----- src/content/capture/canvas-filter/index.html | 132 +++-- src/content/capture/canvas-pc/index.html | 177 +++--- src/content/capture/canvas-record/index.html | 168 +++--- src/content/capture/canvas-video/index.html | 150 +++-- .../capture/video-contenthint/index.html | 164 ++++-- src/content/capture/video-pc/index.html | 145 +++-- src/content/capture/video-video/index.html | 104 ++-- src/content/capture/worker-process/index.html | 115 ++-- src/content/datachannel/basic/index.html | 129 ++-- src/content/datachannel/channel/index.html | 141 +++-- .../datachannel/datatransfer/index.html | 176 +++--- .../datachannel/filetransfer/index.html | 213 ++++--- src/content/datachannel/messaging/index.html | 113 ++-- src/content/devices/input-output/index.html | 155 +++-- src/content/devices/multi/index.html | 178 +++--- .../multipleroutes/src/options.html | 95 +-- src/content/extensions/svc/index.html | 131 +++-- src/content/getusermedia/audio/index.html | 110 ++-- src/content/getusermedia/canvas/index.html | 93 +-- src/content/getusermedia/exposure/index.html | 149 +++-- src/content/getusermedia/filter/index.html | 166 +++--- .../getusermedia/getdisplaymedia/index.html | 102 ++-- src/content/getusermedia/gum/index.html | 118 ++-- .../getusermedia/pan-tilt-zoom/index.html | 130 +++-- src/content/getusermedia/record/index.html | 132 +++-- .../getusermedia/resolution/index.html | 213 ++++--- src/content/getusermedia/volume/index.html | 141 +++-- .../audio-processing/index.html | 140 +++-- .../endtoend-encryption/index.html | 122 ++-- .../video-analyzer/index.html | 113 ++-- .../insertable-streams/video-crop/index.html | 104 ++-- .../video-processing/index.html | 172 +++--- .../insertable-streams/webgpu/index.html | 122 ++-- src/content/peerconnection/audio/index.html | 153 +++-- .../peerconnection/bandwidth/index.html | 116 ++-- .../peerconnection/change-codecs/index.html | 137 +++-- src/content/peerconnection/channel/index.html | 105 ++-- .../peerconnection/constraints/index.html | 203 ++++--- .../peerconnection/create-offer/index.html | 133 +++-- src/content/peerconnection/dtmf/css/main.css | 20 +- src/content/peerconnection/dtmf/index.html | 158 ++--- .../peerconnection/multiple-relay/index.html | 101 ++-- .../peerconnection/multiple/index.html | 116 ++-- .../peerconnection/munge-sdp/index.html | 158 +++-- .../negotiate-timing/index.html | 105 ++-- src/content/peerconnection/pc1/index.html | 128 ++-- .../per-frame-callback/index.html | 127 ++-- .../perfect-negotiation/index.html | 164 ++++-- .../peerconnection/pr-answer/index.html | 98 ++-- .../peerconnection/restart-ice/index.html | 128 ++-- src/content/peerconnection/states/index.html | 145 +++-- .../peerconnection/trickle-ice/index.html | 227 ++++---- src/content/peerconnection/upgrade/index.html | 116 ++-- .../peerconnection/webaudio-input/index.html | 187 +++--- .../peerconnection/webaudio-output/index.html | 125 ++-- src/css/main.css | 176 +++++- src/js/togglemode.js | 51 ++ 58 files changed, 5115 insertions(+), 3224 deletions(-) create mode 100644 src/js/togglemode.js diff --git a/index.html b/index.html index 2d2c40e178..aac57e5698 100644 --- a/index.html +++ b/index.html @@ -7,215 +7,442 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + WebRTC samples - - - + + + - - - -
- -

WebRTC samples

+ -
+ +
+

WebRTC samples

+

- This is a collection of small samples demonstrating various parts of the WebRTC APIs. The code for all - samples are available in the GitHub repository. + This is a collection of small samples demonstrating various parts of + the + WebRTC APIs. The code for all samples are available in the + GitHub repository.

-

Most of the samples use adapter.js, a shim to insulate apps - from spec changes and prefix differences.

- -

https://webrtc.org/getting-started/testing - lists command line flags useful for development and testing with Chrome.

- -

Patches and issues welcome! See CONTRIBUTING.md - for instructions.

+

+ Most of the samples use + adapter.js, a shim to + insulate apps from spec changes and prefix differences. +

-

Warning: It is highly recommended to use headphones when testing these - samples, as it will otherwise risk loud audio feedback on your system.

-
+

+ https://webrtc.org/getting-started/testing + lists command line flags useful for development and testing with + Chrome. +

-
+

+ Patches and issues welcome! See + CONTRIBUTING.md + for instructions. +

-

getUserMedia(): +

+ Warning: It is highly recommended to use headphones + when testing these samples, as it will otherwise risk loud audio + feedback on your system. +

+

+ +
+

+ getUserMedia():

Access media devices

Devices:

Query media devices

Stream capture:

Stream from canvas or video elements

-

RTCPeerConnection: +

+ RTCPeerConnection:

Controlling peer connectivity

-

RTCDataChannel:

+

+ RTCDataChannel: +

Send arbitrary data over peer connections

Video chat:

Full featured WebRTC application

Insertable Streams:

API for processing media

+
+
-
- -
- - - - + + + diff --git a/src/content/capture/canvas-filter/index.html b/src/content/capture/canvas-filter/index.html index 802d7de81c..e919d819ee 100644 --- a/src/content/capture/canvas-filter/index.html +++ b/src/content/capture/canvas-filter/index.html @@ -7,61 +7,85 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Video to Canvas to video - - - - - - - - - -
- -

WebRTC samples Stream camera via a canvas to a video element -

- - - - - - - -

The camera is captured to a video element, which is mapped onto a - canvas, and a red square is added.

-

The canvas is then captured to an ImageData object, and painted - onto a second canvas.

-

A stream is captured from the second canvas element using its - captureStream() method and set as the srcObject of the video element.

- -

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

- - View source on GitHub - -
- - - - - + + + + + + + +
+

+ WebRTC samples + Stream camera via a canvas to a video element +

+ + + + + + + +

+ The camera is captured to a video element, which is mapped onto a + canvas, and a red square is added. +

+

+ The canvas is then captured to an ImageData object, and painted onto a + second canvas. +

+

+ A stream is captured from the second canvas element using its + captureStream() method and set as the + srcObject of the video element. +

+ +

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

+ + View source on GitHub +
+ + + + + + + diff --git a/src/content/capture/canvas-pc/index.html b/src/content/capture/canvas-pc/index.html index 8c3076f708..13b43e91d3 100644 --- a/src/content/capture/canvas-pc/index.html +++ b/src/content/capture/canvas-pc/index.html @@ -7,77 +7,114 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Canvas to peer connection - - - - - - - - -
- -

- WebRTC samples Stream from canvas to peer connection -

- - - -
Due to autoplay policy the video seems not to be playing. Clicking the left teapot usually resolves this.
- -

Click and drag on the canvas element (on the left) to move the teapot.

- -

This demo requires Firefox 47 or Chrome 52 (or later).

- -

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

- -

View the browser console to see logging.

- -

Several variables are in global scope, so you can inspect them from the console: canvas, - video, localPeerConnection, remotePeerConnection and stream. -

- -

For more demos and information about captureStream(), see Media Capture from Canvas Implementation.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - View source on GitHub - -
- - - - - - - - - - - - - - - + + + + + + + +
+

+ WebRTC samples + Stream from canvas to peer connection +

+ + + +
+ Due to autoplay policy the video seems not to be playing. Clicking the + left teapot usually resolves this. +
+ +

+ Click and drag on the canvas element (on the left) to move the teapot. +

+ +

This demo requires Firefox 47 or Chrome 52 (or later).

+ +

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

+ +

View the browser console to see logging.

+ +

+ Several variables are in global scope, so you can inspect them from the + console: canvas, video, + localPeerConnection, remotePeerConnection and + stream. +

+ +

+ For more demos and information about captureStream(), see + Media Capture from Canvas Implementation. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub +
+ + + + + + + + + + + + + + + + + diff --git a/src/content/capture/canvas-record/index.html b/src/content/capture/canvas-record/index.html index 598cf05254..91a687d767 100644 --- a/src/content/capture/canvas-record/index.html +++ b/src/content/capture/canvas-record/index.html @@ -7,79 +7,113 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Record canvas stream - - - - - - - - - -
- -

WebRTC samples Record stream from a canvas -

- - - - -
+ + + + + + + +
+

+ WebRTC samples + Record stream from a canvas +

+ + + + +
+
+ +

Click and drag on the canvas (on the left) to move the teapot.

+ +

+ This demo requires Firefox 43 or above, Chrome 51 or above, or Chrome 50 + with Experimental Web Platform features enabled. +

+ +

+ The teapot is drawn on the canvas element using WebGL. A stream is + captured from the canvas element using its + captureStream() method then recorded using the + MediaRecorder API. +

+ +

+ The canvas, video, and + stream variables are in global scope, so you can inspect + them from the browser console. +

+ +

+ For more demos and information about captureStream(), see + Media Capture from Canvas Implementation. +

+ +

+ For more information see the MediaStream Recording API + Editor's Draft. +

+ View source on GitHub
-

Click and drag on the canvas (on the left) to move the teapot.

- -

This demo requires Firefox 43 or above, Chrome 51 or above, or Chrome 50 with Experimental Web Platform - features enabled.

- -

The teapot is drawn on the canvas element using WebGL. A stream is captured from the canvas element using its - captureStream() method then recorded using the MediaRecorder API.

- -

The canvas, video, and stream variables are in global scope, so you can - inspect them from the browser console.

- -

For more demos and information about captureStream(), see Media Capture from Canvas Implementation.

- -

For more information see the MediaStream Recording API Editor's Draft.

- View source on GitHub - -
- - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/src/content/capture/canvas-video/index.html b/src/content/capture/canvas-video/index.html index 7a9931118e..263409456a 100644 --- a/src/content/capture/canvas-video/index.html +++ b/src/content/capture/canvas-video/index.html @@ -7,68 +7,96 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Canvas to video - - - - - - - - - -
- -

WebRTC samples Stream from canvas to video element -

- - - - - -

Click and drag on the canvas (on the left) to move the teapot.

- -

This demo requires Firefox 47 or Chrome 52 (or later).

- -

The teapot is drawn on the canvas element using WebGL. A stream is captured from the canvas element using its - captureStream() method and set as the srcObject of the video element.

- -

The canvas, video, and stream variables are in global scope, so you can - inspect them from the browser console.

- -

For more demos and information about captureStream(), see Media Capture from Canvas Implementation.

- - View source on GitHub - -
- - - - - - - - - - - - - + + + + + + + +
+

+ WebRTC samples + Stream from canvas to video element +

+ + + + + +

Click and drag on the canvas (on the left) to move the teapot.

+ +

This demo requires Firefox 47 or Chrome 52 (or later).

+ +

+ The teapot is drawn on the canvas element using WebGL. A stream is + captured from the canvas element using its + captureStream() method and set as the + srcObject of the video element. +

+ +

+ The canvas, video, and + stream variables are in global scope, so you can inspect + them from the browser console. +

+ +

+ For more demos and information about captureStream(), see + Media Capture from Canvas Implementation. +

+ + View source on GitHub +
+ + + + + + + + + + + + + + + diff --git a/src/content/capture/video-contenthint/index.html b/src/content/capture/video-contenthint/index.html index 8c573bd2d6..ae57914026 100644 --- a/src/content/capture/video-contenthint/index.html +++ b/src/content/capture/video-contenthint/index.html @@ -7,81 +7,117 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + MediaStreamTrack Content Hints - - - - - - - - - -
- -

WebRTC samples Guiding video encoding with content hints -

- -
+ + + + + + + +
+

+ WebRTC samples + Guiding video encoding with content hints +

+ +
-

Source video file (high bitrate)

- +

Source video file (high bitrate)

+
-

"motion" video @ 50kbps

- +

"motion" video @ 50kbps

+
-

"detail" video @ 50kbps

- +

"detail" video @ 50kbps

+
+
+ +

+ This demo requires Chrome 57.0.2957.0 or later with + Experimental Web Platform features enabled from + chrome://flags. +

+ +

+ A stream is captured from the source video using the + captureStream() method. The stream is cloned and + transmitted via two separate PeerConnections using 50kbps of video + bandwidth. This is insufficient to generate good quality in the encoded + bitstream, so trade-offs have to be made. +

+ +

+ The transmitted stream tracks are using + MediaStreamTrack Content Hints + to indicate characteristics in the video stream, which informs + PeerConnection on how to encode the track (to prefer motion or + individual frame detail). +

+ +

+ The text part of the clip shows a clear case for when + 'detail' is better, and the fighting scene shows a clear case + for when 'motion' is better. The spinning model however shows a + case where 'motion' or 'detail' are not clear-cut + decisions and even with good content detection what's preferred depends + on what the user prefers. +

+ +

+ Other MediaStreamTrack consumers such as MediaStreamRecorder can also + make use of this information to guide encoding parameters for the stream + without additional extensions to the MediaStreamRecorder specification, + but this is currently not implemented in Chromium. +

+ + View source on GitHub
-

This demo requires Chrome 57.0.2957.0 or later with Experimental Web Platform features enabled - from chrome://flags.

- -

A stream is captured from the source video using the captureStream() method. The stream is cloned - and transmitted via two separate PeerConnections using 50kbps of video bandwidth. This is insufficient to - generate good quality in the encoded bitstream, so trade-offs have to be made.

- -

The transmitted stream tracks are using MediaStreamTrack - Content Hints to indicate characteristics in the video stream, which informs PeerConnection on how to encode - the track (to prefer motion or individual frame detail).

- -

The text part of the clip shows a clear case for when 'detail' is better, and the fighting scene shows a - clear case for when 'motion' is better. The spinning model however shows a case where 'motion' - or 'detail' are not clear-cut decisions and even with good content detection what's preferred depends - on what the user prefers.

- -

Other MediaStreamTrack consumers such as MediaStreamRecorder can also make use of this information to guide - encoding parameters for the stream without additional extensions to the MediaStreamRecorder specification, but - this is currently not implemented in Chromium.

- - View source on GitHub - -
+ - - + + - - + + diff --git a/src/content/capture/video-pc/index.html b/src/content/capture/video-pc/index.html index 6a0cbb0b71..3355b8f2e4 100644 --- a/src/content/capture/video-pc/index.html +++ b/src/content/capture/video-pc/index.html @@ -7,67 +7,96 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Video to peer connection - - - - - - - - - -
- -

WebRTC samples Stream from a video to a peer connection -

- - + + + +

+ This demo requires Firefox 47, Chrome 53 with + Experimental Web Platform features enabled from + chrome://flags. +

+ +

+ A stream is captured from the video on the left using the + captureStream() method, and streamed via a peer connection + to the video element on the right. +

+ +

View the browser console to see logging.

+ +

+ Several variables are in global scope, so you can inspect them from the + console: pc1, pc2 and stream. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub +
+ + + + + + + + diff --git a/src/content/capture/video-video/index.html b/src/content/capture/video-video/index.html index 23629b92c0..d59bbe8ef7 100644 --- a/src/content/capture/video-video/index.html +++ b/src/content/capture/video-video/index.html @@ -7,57 +7,79 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + captureStream(): video to video - - - - - - - - - -
- -

WebRTC samples captureStream(): video to video -

- -
+ - + - - + + diff --git a/src/content/capture/worker-process/index.html b/src/content/capture/worker-process/index.html index 80f9db6ccb..71dec9d959 100644 --- a/src/content/capture/worker-process/index.html +++ b/src/content/capture/worker-process/index.html @@ -7,60 +7,87 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Video processing in a Worker - - - - - - - - - -
+ + + + + -

WebRTC samples Processing video data with a Worker -

+ +
+

+ WebRTC samples + Processing video data with a Worker +

- - - + + + - + -

The camera is captured to a MediaStreamTrack, which is turned into a - WHATWG Stream of ImageData objects by means of a canvas, and a red - square is added.

-

The stream is sent to a Worker, which returns a new stream containing - the same video data.

-

This is then mapped back to a MediaStream using another canvas.

+

+ The camera is captured to a MediaStreamTrack, which is turned into a + WHATWG Stream of ImageData objects by means of a canvas, and a red + square is added. +

+

+ The stream is sent to a Worker, which returns a new stream containing + the same video data. +

+

This is then mapped back to a MediaStream using another canvas.

-

The chief purpose of the demo is to demonstrate that this is doable, - but that performance can be improved significantly.

-

NOTE: This works only on Chrome 76 and above with experimental Web - features enabled, since it depends on transferable Streams.

-

A similar demo, without the worker process, is on the canvas filter demo.

- View source on GitHub +

+ The chief purpose of the demo is to demonstrate that this is doable, but + that performance can be improved significantly. +

+

+ NOTE: This works only on Chrome 76 and above with experimental Web + features enabled, since it depends on transferable Streams. +

+

+ A similar demo, without the worker process, is on the + canvas filter demo. +

+ View source on GitHub +
-
+ - + - - + + diff --git a/src/content/datachannel/basic/index.html b/src/content/datachannel/basic/index.html index 36b32fe192..d07101392d 100644 --- a/src/content/datachannel/basic/index.html +++ b/src/content/datachannel/basic/index.html @@ -7,70 +7,97 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Transmit text - - - - - - - - - -
- -

WebRTC samples - Transmit text

- -
+ + + + + + + +
+

+ WebRTC samples + Transmit text +

+ +
-
+
-
+
-

Send

- +

Send

+
-

Receive

- +

Receive

+
+
+ +

View the console to see logging.

+ +

+ The RTCPeerConnection objects + localConnection and remoteConnection are in + global scope, so you can inspect them in the console as well. +

+ +

+ For more information about RTCDataChannel, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging.

- -

The RTCPeerConnection objects localConnection and remoteConnection are in - global scope, so you can inspect them in the console as well.

- -

For more information about RTCDataChannel, see Getting Started With WebRTC.

- - View source on GitHub -
- - - + - + + - + + diff --git a/src/content/datachannel/channel/index.html b/src/content/datachannel/channel/index.html index 019b68c93e..970a8d7e5f 100644 --- a/src/content/datachannel/channel/index.html +++ b/src/content/datachannel/channel/index.html @@ -7,72 +7,107 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Transmit text (between two tabs) - - - - - - - - - -
- -

WebRTC samples - Transmit text

- -
+ + + + + + + +
+

+ WebRTC samples + Transmit text +

+ +
-
+
-
+
-

Send

- +

Send

+
-

Receive

- +

Receive

+
+
+ +

+ This sample shows how to setup a datachannel connection between two + peers in different tabs using + RTCPeerConnection + and + Broadcast Channel +

+

+ Open the sample in two tabs (of the same browser), then click start in + the first tab and send messages back and forth. +

+ +

+ For more information about RTCDataChannel, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

This sample shows how to setup a datachannel connection between two peers in different tabs using - RTCPeerConnection - and Broadcast Channel -

-

Open the sample in two tabs (of the same browser), then click start in the first tab and - send messages back and forth.

- -

For more information about RTCDataChannel, see Getting Started With WebRTC.

- - View source on GitHub -
- - - + - + + - + + diff --git a/src/content/datachannel/datatransfer/index.html b/src/content/datachannel/datatransfer/index.html index fe2b4bcb0d..81db7ecf46 100644 --- a/src/content/datachannel/datatransfer/index.html +++ b/src/content/datachannel/datatransfer/index.html @@ -7,92 +7,132 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Generate and transfer data - - - - - - - - - -
- -

WebRTC samples Generate and transfer data -

-
- -

This page generates and sends the specified amount of data via WebRTC datachannels.

- -

To accomplish this in an interoperable way, the data is split into chunks which are then transferred via the - datachannel. The datachannel is reliable and ordered by default which is well-suited to filetransfers.

- -

Send and receive progress is monitored using HTML5 progress elements.

- -
- -
+ + + + + + + +
+

+ WebRTC samples + Generate and transfer data +

+
+

+ This page generates and sends the specified amount of data via WebRTC + datachannels. +

+ +

+ To accomplish this in an interoperable way, the data is split into + chunks which are then transferred via the datachannel. The datachannel + is reliable and ordered by default which is well-suited to + filetransfers. +

+ +

+ Send and receive progress is monitored using HTML5 + progress elements. +

+
+ +
- +
- - -
+ + +
- - + +
-
Send progress:
- +
Send progress:
+
-
Receive progress:
- +
Receive progress:
+
- +
-
+
-
+

View the console to see logging.

-

The RTCPeerConnection objects localConnection and remoteConnection are - in global scope, so you can inspect them in the console as well.

- -

For more information about RTCDataChannel, see Getting Started With WebRTC.

-
- - View source on GitHub -
- - - - - - - +

+ The RTCPeerConnection objects + localConnection and remoteConnection are in + global scope, so you can inspect them in the console as well. +

+ +

+ For more information about RTCDataChannel, see + Getting Started With WebRTC. +

+ + + View source on GitHub +
+ + + + + + + + diff --git a/src/content/datachannel/filetransfer/index.html b/src/content/datachannel/filetransfer/index.html index 8295d595ee..99c422832e 100644 --- a/src/content/datachannel/filetransfer/index.html +++ b/src/content/datachannel/filetransfer/index.html @@ -7,87 +7,134 @@ * tree. --> - - - - - - - - - - - - - - Transfer a file - - - - - - - - - - -
- -

WebRTC samples Transfer a file

-
- -

This page shows how to transfer a file via WebRTC datachannels.

- -

To accomplish this in an interoperable way, the file is split into chunks which are then transferred via the datachannel. The datachannel is reliable and ordered by default which is well-suited to filetransfers.

- -

Send and receive progress is monitored using HTML5 progress elements.

- -

At the receiver, the file is reassembled using the Blob API and made available for download.

- -

Note: real-world applications require a file transfer protocol to send metadata about the file (such as the filename, type, size, last modification date, hash, ...).This information can be conveyed either via the signaling channel or in-band. The demo elides this by assuming knowledge of the file size at the receiver and closes both the datachannel and the peerconnection when the correct amount of bytes has been received.

- -
- -
-
-
- -
- - -
- -
-
Send progress:
- -
- -
-
Receive progress:
- -
- -
- - - -
- -
-

View the console to see logging.

- -

The RTCPeerConnection objects localConnection and remoteConnection are in global scope, so you can inspect them in the console as well.

- -

For more information about RTCDataChannel, see Getting Started With WebRTC.

-
- - View source on GitHub -
- - - - - - - + + + + + + + + + + + + + Transfer a file + + + + + + + + +
+

+ WebRTC samples + Transfer a file +

+
+

This page shows how to transfer a file via WebRTC datachannels.

+ +

+ To accomplish this in an interoperable way, the file is split into + chunks which are then transferred via the datachannel. The datachannel + is reliable and ordered by default which is well-suited to + filetransfers. +

+ +

+ Send and receive progress is monitored using HTML5 + progress elements. +

+ +

+ At the receiver, the file is reassembled using the Blob API and made + available for download. +

+ +

+ Note: real-world applications require a file transfer protocol to send + metadata about the file (such as the filename, type, size, last + modification date, hash, ...).This information can be conveyed either + via the signaling channel or in-band. The demo elides this by assuming + knowledge of the file size at the receiver and closes both the + datachannel and the peerconnection when the correct amount of bytes + has been received. +

+
+ +
+
+
+ +
+ + +
+ +
+
Send progress:
+ +
+ +
+
Receive progress:
+ +
+ +
+ + +
+ +
+

View the console to see logging.

+ +

+ The RTCPeerConnection objects + localConnection and remoteConnection are in + global scope, so you can inspect them in the console as well. +

+ +

+ For more information about RTCDataChannel, see + Getting Started With WebRTC. +

+
+ + View source on GitHub +
+ + + + + + + + diff --git a/src/content/datachannel/messaging/index.html b/src/content/datachannel/messaging/index.html index 0509f66bc4..077dcef7ce 100644 --- a/src/content/datachannel/messaging/index.html +++ b/src/content/datachannel/messaging/index.html @@ -7,62 +7,85 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Send messages with datachannel - - - - + + + + - - - - - -
- -

WebRTC samples Send messages with datachannel -

-
- + + + +
+

+ WebRTC samples + Send messages with datachannel +

+

This page show how to send text messages via WebRTC datachannels.

-

Enter a message in one text box and press send and it will be transferred to the "remote" peer over a - datachannel.

- -
+

+ Enter a message in one text box and press send and it will be + transferred to the "remote" peer over a datachannel. +

+
- + -
+

View the console to see logging.

-

For more information about RTCDataChannel, see Getting Started With WebRTC.

-
- - View source on GitHub -
- - - - +

+ For more information about RTCDataChannel, see + Getting Started With WebRTC. +

+ + + View source on GitHub +
+ + + + + diff --git a/src/content/devices/input-output/index.html b/src/content/devices/input-output/index.html index 0a33bc3db5..03765a04eb 100644 --- a/src/content/devices/input-output/index.html +++ b/src/content/devices/input-output/index.html @@ -7,77 +7,106 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Select audio and video sources - - - + + + - - - - -
- -

WebRTC samplesSelect sources & outputs -

- -

Get available audio, video sources and audio output devices from mediaDevices.enumerateDevices() - then set the source for getUserMedia() using a deviceId constraint.

-

Note: without permission, the browser will restrict the available devices to at most one per type.

- -
- + + + +
+

+ WebRTC samplesSelect sources & outputs +

+ +

+ Get available audio, video sources and audio output devices from + mediaDevices.enumerateDevices() then set the source for + getUserMedia() using a deviceId constraint. +

+

+ Note: without permission, the browser will restrict the available + devices to at most one per type. +

+ +
+ +
+ +
+ +
+ +
+ +
+ + + +

+ Note: If you hear a reverb sound your microphone is picking up + the output of your speakers/headset, lower the volume and/or move the + microphone further away from your speakers/headset. +

+ + View source on GitHub
-
- -
- -
- -
- - - -

Note: If you hear a reverb sound your microphone is picking up the output of your - speakers/headset, lower the volume and/or move the microphone further away from your speakers/headset.

- - View source on GitHub -
+ - - + + - - + + diff --git a/src/content/devices/multi/index.html b/src/content/devices/multi/index.html index 6701fcd3b8..e40b1e6ccc 100644 --- a/src/content/devices/multi/index.html +++ b/src/content/devices/multi/index.html @@ -7,92 +7,126 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + getUserMedia: output device selection - - - - - - - - - -
- -

WebRTC samples getUserMedia: output device selection -

- -
- + + + + + + + +
+

+ WebRTC samples + getUserMedia: output device selection +

+ +
-

getUserMedia():

-
- -
- - -
+

getUserMedia():

+
+ +
+ +
-
- -
- - -
+
+
+ +
+ +
+
-

Local media files:

-
- -
- - -
+

Local media files:

+
+ +
+ +
-
- -
- - -
+
+
+ +
+ +
+
- +
+ +

+ This demo must be run from localhost or over HTTPS Chrome 49 or later, + Firefox is not supported yet. +

+ + View source on GitHub
-

This demo must be run from localhost or over HTTPS Chrome 49 or later, Firefox is not supported yet.

- - View source on GitHub -
- - - + - + + - + + diff --git a/src/content/extensions/multipleroutes/src/options.html b/src/content/extensions/multipleroutes/src/options.html index a4d7a6c42c..11bb83ffdf 100644 --- a/src/content/extensions/multipleroutes/src/options.html +++ b/src/content/extensions/multipleroutes/src/options.html @@ -1,4 +1,4 @@ - + - -

- - -

-

- - -

-

- - -

-

- - -

-

- -

- - - + +

+ + +

+

+ + +

+

+ + +

+

+ + +

+

+ +

+ + + diff --git a/src/content/extensions/svc/index.html b/src/content/extensions/svc/index.html index a14a4faaf6..1780cb1414 100644 --- a/src/content/extensions/svc/index.html +++ b/src/content/extensions/svc/index.html @@ -7,79 +7,104 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Scalable Video Coding (SVC) Extension - - - - - - - - - -
-

WebRTC samples - Peer connection

- -

This sample shows how to setup a connection between two peers using - RTCPeerConnection and - choose the preferred video codec to use and scalability mode when the Scalable Video Coding (SVC) Extension is available. -

- - - - -
+ + + + + + + +
+

+ WebRTC samples + Peer connection +

+ +

+ This sample shows how to setup a connection between two peers using + RTCPeerConnection + and choose the preferred video codec to use and scalability mode when + the + Scalable Video Coding (SVC) Extension + is available. +

+ + + + +
-
+
-
+
Codec preferences: -
+
Scalability Mode:
-
+
-
+
Bitrate
-
-
+
+
Packets sent per second
+
+ + View source on GitHub
+ - View source on GitHub - -
- - - - - - + + + + + diff --git a/src/content/getusermedia/audio/index.html b/src/content/getusermedia/audio/index.html index 82e0d5fa09..b3441e5f8b 100644 --- a/src/content/getusermedia/audio/index.html +++ b/src/content/getusermedia/audio/index.html @@ -7,55 +7,79 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + gUM audio - - - - - - - - -
- -

WebRTC samples getUserMedia, audio only -

- - - -

Warning: if you're not using headphones, pressing play will cause feedback.

- -

Render the audio stream from an audio-only getUserMedia() call with an audio element.

- -

The MediaStream object stream passed to the getUserMedia() - callback is in global scope, so you can inspect it from the console.

-
+ + + + + + +
+

+ WebRTC samples + getUserMedia, audio only +

+ + + +

+ Warning: if you're not using headphones, pressing play will cause + feedback. +

+ +

+ Render the audio stream from an audio-only + getUserMedia() call with an audio element. +

+ +

+ The MediaStream object stream passed + to the getUserMedia() callback is in global scope, so you + can inspect it from the console. +

+
+
+ + View source on GitHub
- - View source on GitHub - -
- - + - + + - + + diff --git a/src/content/getusermedia/canvas/index.html b/src/content/getusermedia/canvas/index.html index c2faa8289e..f5dc4076cc 100644 --- a/src/content/getusermedia/canvas/index.html +++ b/src/content/getusermedia/canvas/index.html @@ -7,51 +7,72 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + getUserMedia to canvas - - - - - - - - -
- -

WebRTC samples getUserMedia ⇒ canvas -

+ + + + - - - + +
+

+ WebRTC samples + getUserMedia ⇒ canvas +

-

Draw a frame from the video onto the canvas element using the drawImage() method.

+ + + -

The variables canvas, video and stream are in global scope, so you can - inspect them from the console.

+

+ Draw a frame from the video onto the canvas element using the + drawImage() method. +

- View source on GitHub +

+ The variables canvas, video and + stream are in global scope, so you can inspect them from + the console. +

-
+ View source on GitHub +
- - - + - + + + + diff --git a/src/content/getusermedia/exposure/index.html b/src/content/getusermedia/exposure/index.html index bac2f00fc2..f90f6ca265 100644 --- a/src/content/getusermedia/exposure/index.html +++ b/src/content/getusermedia/exposure/index.html @@ -7,89 +7,112 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Control Exposure - - - + + + - - - + -
-

WebRTC samples - Control Exposure

+ +
+

+ WebRTC samples + Control Exposure +

- - + + -
+
Exposure Mode:
- -
+ +
-
+
Exposure Time:
- -
+ +
-
+
Exposure Compensation:
- -
+ +
-
+
Brightness:
- -
+ +
-
+
White Balance Mode:
- + +
+ + + +
+ +

+ Display the video stream from getUserMedia() in a video + element and control exposureMode, exposureTime and exposureCompensation + if camera supports it. +

+ +

+ The MediaStreamTrack object track is in global + scope, so you can inspect it from the console. +

+ + View source on GitHub
- - -
- -

Display the video stream from getUserMedia() in a video - element and control exposureMode, exposureTime and exposureCompensation if camera supports it.

- -

The MediaStreamTrack object track is in - global scope, so you can inspect it from the console.

- - View source on GitHub -
- - - + - + + - + + diff --git a/src/content/getusermedia/filter/index.html b/src/content/getusermedia/filter/index.html index 7b0e6d369d..bf887a12fb 100644 --- a/src/content/getusermedia/filter/index.html +++ b/src/content/getusermedia/filter/index.html @@ -7,96 +7,120 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + getUserMedia + CSS filters - - - + + + + - - - -
+ +
+

+ WebRTC samples + getUserMedia + CSS filters +

-

WebRTC samples getUserMedia + CSS filters -

+ - - - - - + + + - + - +

+ Draw a frame from the getUserMedia video stream onto the canvas element, + then apply CSS filters. +

-

Draw a frame from the getUserMedia video stream onto the canvas element, then apply CSS filters.

+

+ The variables canvas, video and + stream are in global scope, so you can inspect them from + the console. +

-

The variables canvas, video and stream are in global scope, so you can - inspect them from the console.

+ View source on GitHub +
- View source on GitHub -
+ - - + + - - + + diff --git a/src/content/getusermedia/getdisplaymedia/index.html b/src/content/getusermedia/getdisplaymedia/index.html index bc5703dbf1..96da74c3bf 100644 --- a/src/content/getusermedia/getdisplaymedia/index.html +++ b/src/content/getusermedia/getdisplaymedia/index.html @@ -7,54 +7,76 @@ * tree. --> - + + + + + + + + + - - - - - - - - + - + getDisplayMedia - getDisplayMedia + + + + - - - + +
+

+ WebRTC samples + getDisplayMedia +

- + + + +
- +

+ Display the screensharing stream from getDisplayMedia() in + a video element. +

-
-

WebRTC samples getDisplayMedia

+ View source on GitHub +
- - - -
+ -

Display the screensharing stream from getDisplayMedia() in a video element.

+ + - View source on GitHub -
- - - - - - - + + diff --git a/src/content/getusermedia/gum/index.html b/src/content/getusermedia/gum/index.html index 69b801946e..47c16a6ba8 100644 --- a/src/content/getusermedia/gum/index.html +++ b/src/content/getusermedia/gum/index.html @@ -7,53 +7,79 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + getUserMedia - - - - - - - - -
-

WebRTC samples - getUserMedia

- - - - -
- -

Warning: if you're not using headphones, pressing play will cause feedback.

- -

Display the video stream from getUserMedia() in a video element.

- -

The MediaStream object stream passed to the getUserMedia() callback is in - global scope, so you can inspect it from the console.

- - View source on GitHub -
- - - - - - - + + + + + + +
+

+ WebRTC samples + getUserMedia +

+ + + + +
+ +

+ Warning: if you're not using headphones, pressing play + will cause feedback. +

+ +

+ Display the video stream from getUserMedia() in a video + element. +

+ +

+ The MediaStream object stream passed to the + getUserMedia() callback is in global scope, so you can + inspect it from the console. +

+ + View source on GitHub +
+ + + + + + + + diff --git a/src/content/getusermedia/pan-tilt-zoom/index.html b/src/content/getusermedia/pan-tilt-zoom/index.html index b25c8ea7bf..fbeae858bb 100644 --- a/src/content/getusermedia/pan-tilt-zoom/index.html +++ b/src/content/getusermedia/pan-tilt-zoom/index.html @@ -7,73 +7,95 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Control camera pan, tilt, and zoom - - - + + + - - - + -
-

WebRTC samples - Control Pan-Tilt-Zoom Camera

+ +
+

+ WebRTC samples + Control Pan-Tilt-Zoom Camera +

- - + + -
+
Pan:
- -
-
+ +
+
Tilt:
- -
-
+ +
+
Zoom:
- + +
+ +
+ +

+ Display the video stream from getUserMedia() in a video + element and control pan, tilt, and zoom if camera supports + Pan-Tilt-Zoom. +

+ +

+ The MediaStreamTrack object track is in global + scope, so you can inspect it from the console. +

+ + View source on GitHub
-
- -

Display the video stream from getUserMedia() in a video - element and control pan, tilt, and zoom if camera supports Pan-Tilt-Zoom.

- -

The MediaStreamTrack object track is in - global scope, so you can inspect it from the console.

- - View source on GitHub -
- - - - - + + + - + + diff --git a/src/content/getusermedia/record/index.html b/src/content/getusermedia/record/index.html index 672a9cca6c..5a0d64a526 100644 --- a/src/content/getusermedia/record/index.html +++ b/src/content/getusermedia/record/index.html @@ -7,72 +7,96 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + MediaStream Recording - - - - - - - - - -
- -

WebRTC samples - MediaRecorder

- -

For more information see the MediaStream Recording API Editor's Draft.

- - - - -
+ + + + + + + +
+

+ WebRTC samples + MediaRecorder +

+ +

+ For more information see the MediaStream Recording API + Editor's Draft. +

+ + + + +
- -
- -
- Recording format: -
-
+ +
+ +
+ Recording format: + +
+

Media Stream Constraints options

-

Echo cancellation:

-
+

+ Echo cancellation: +

+
- - View source on GitHub - -
- - - - - + - + + + + + diff --git a/src/content/getusermedia/resolution/index.html b/src/content/getusermedia/resolution/index.html index 3ec2a8cf86..c39cf788d4 100644 --- a/src/content/getusermedia/resolution/index.html +++ b/src/content/getusermedia/resolution/index.html @@ -7,82 +7,104 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + getUserMedia: select resolution - - - + + + - - - - - -
- -

WebRTC samples getUserMedia: select resolution -

-

- -

This example uses constraints.

- -

Click a button to call getUserMedia() with appropriate resolution.

-
- -
-
+ + + +
+

+ WebRTC samples + getUserMedia: select resolution +

+

+ +

+ This example uses + constraints. +

+ +

+ Click a button to call getUserMedia() with appropriate + resolution. +

+
+ +
+
@@ -92,34 +114,45 @@

WebRTC -

+
- -

- -

For more information, see Capturing Audio & - Video in HTML5 on HTML5 Rocks.

- - View source on GitHub -
- - + - + + - + + diff --git a/src/content/getusermedia/volume/index.html b/src/content/getusermedia/volume/index.html index 88873e958e..4c8c3128c0 100644 --- a/src/content/getusermedia/volume/index.html +++ b/src/content/getusermedia/volume/index.html @@ -7,78 +7,99 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Audio stream volume - - - - - - - - - -
- -

WebRTC samples Audio stream volume -

- -

Measure the volume of a local media stream using WebAudio.

- -
+ + + + + + + +
+

+ WebRTC samples + Audio stream volume +

+ +

Measure the volume of a local media stream using WebAudio.

+ +
-
Instant:
- -
+
Instant:
+ +
-
Slow:
- -
+
Slow:
+ +
-
Clip:
- -
+
Clip:
+ +
-
+
-
- +
+ -
- -

The 'instant' volume changes approximately every 50ms; the 'slow' volume approximates the average volume over - about a second.

-

Note that you will not hear your own voice; use the local audio rendering demo for that. -

-

The audioContext, stream and soundMeter variables are in global scope, so - you can inspect them from the console.

- - View source on GitHub - -
- +
+ +

+ The 'instant' volume changes approximately every 50ms; the 'slow' volume + approximates the average volume over about a second. +

+

+ Note that you will not hear your own voice; use the + local audio rendering demo for that. +

+

+ The audioContext, stream and + soundMeter variables are in global scope, so you can + inspect them from the console. +

+ + View source on GitHub +
- - - + - + + + - + + diff --git a/src/content/insertable-streams/audio-processing/index.html b/src/content/insertable-streams/audio-processing/index.html index 4408c80d8a..eec997f937 100644 --- a/src/content/insertable-streams/audio-processing/index.html +++ b/src/content/insertable-streams/audio-processing/index.html @@ -7,67 +7,93 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Insertable Streams - Audio - - - - - - - - -
- -

WebRTC samples + + + + + + +
+

+ WebRTC samples Audio processing with insertable streams -

- -

This sample shows how to perform processing on an audio stream using the experimental - insertable streams API. - It applies a low-pass filter in realtime to audio recorded from a microphone and plays it - back. -

- - -
+

+ +

+ This sample shows how to perform processing on an audio stream using the + experimental + insertable streams + API. It applies a low-pass filter in realtime to audio recorded from a + microphone and plays it back. +

+ + +
-
-

Warning: if you're not using headphones, pressing Start will cause feedback.

-
- -

View the console to see logging. The audio, processor, - generator, transformer, stream and - processedStream variables are in global scope, so you can inspect them from the - console. You may also adjust the level of filtering by assigning to cutoff.

- -

- Note: This sample is using an experimental API that has not yet been standardized. As - of 2021-09-29, this API is available in Chrome M94. -

- View source on GitHub - -
- - - - - - - +
+

+ Warning: if you're not using headphones, pressing Start will cause + feedback. +

+
+ +

+ View the console to see logging. The audio, + processor, generator, + transformer, stream and + processedStream variables are in global scope, so you can + inspect them from the console. You may also adjust the level of + filtering by assigning to cutoff. +

+ +

+ Note: This sample is using an experimental API that has not yet + been standardized. As of 2021-09-29, this API is available in Chrome + M94. +

+ View source on GitHub +
+ + + + + + + + diff --git a/src/content/insertable-streams/endtoend-encryption/index.html b/src/content/insertable-streams/endtoend-encryption/index.html index 618b75bb26..d7c895a172 100644 --- a/src/content/insertable-streams/endtoend-encryption/index.html +++ b/src/content/insertable-streams/endtoend-encryption/index.html @@ -7,71 +7,89 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Peer connection end to end encryption - - - - - - - - - -
+ + + + + -

WebRTC samples Peer connection end to end encryption -

- -

-

Sender and receiver

-
- Sender and receiver
- - + +
+

+ WebRTC samples + Peer connection end to end encryption +

+ +
+

Sender and receiver

+
+ Sender and receiver
+ + +
+
+

+ Crypto key: Encrypt first bytes: + +

-
- Crypto key: - Encrypt first bytes: -

-

-

Middlebox

-
- - Switch audio to middlebox: +
+

Middlebox

+
+ + Switch audio to middlebox: + +
-

-
+
-
-
- - View source on GitHub +
+
-
+ View source on GitHub +
- - - + - + + + - + + diff --git a/src/content/insertable-streams/video-analyzer/index.html b/src/content/insertable-streams/video-analyzer/index.html index 5df2768b3b..3f9cda262e 100644 --- a/src/content/insertable-streams/video-analyzer/index.html +++ b/src/content/insertable-streams/video-analyzer/index.html @@ -7,71 +7,88 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Insertable Streams Video Analyzer - - - - - - - - + + + + + -
-

WebRTC samples - Insertable Streams Video Analyzer

+ +
+

+ WebRTC samples + Insertable Streams Video Analyzer +

-

-

This sample shows how Insertable Streams can be used to analyze - the encoded form of a video track. -

+

+

+ This sample shows how Insertable Streams can be used to analyze the + encoded form of a video track. +

- - + + -
+
-

+

-
+
-

View the console to see logging. -

-
- Video size:
- Keyframe count:
- Interframe count:
- Last keyframe size:
- Last interframe size:
- Duplicate count:
-
+

View the console to see logging.

+
+ Video size:
+ Keyframe count:
+ Interframe count:
+ Last keyframe size:
+ Last interframe size:
+ Duplicate count:
+
- View source on GitHub + View source on GitHub +
-
+ - - + + - - + + diff --git a/src/content/insertable-streams/video-crop/index.html b/src/content/insertable-streams/video-crop/index.html index b44f796fcf..43df738039 100644 --- a/src/content/insertable-streams/video-crop/index.html +++ b/src/content/insertable-streams/video-crop/index.html @@ -7,58 +7,80 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Insertable Streams - Crop in a worker - - - - - - - - + + + + + -
-

WebRTC samples - Breakout Box crop

+ +
+

+ WebRTC samples + Breakout Box crop +

-

This sample shows how to perform cropping on a video stream using the experimental - mediacapture-transform API - in a Worker. -

+

+ This sample shows how to perform cropping on a video stream using the + experimental + mediacapture-transform + API in a Worker. +

- - + + -
+
-
+
-

- Note: This sample is using an experimental API that has not yet been standardized. As - of 2022-11-21, this API is available in the latest version of Chrome based browsers. -

- View source on GitHub +

+ Note: This sample is using an experimental API that has not yet + been standardized. As of 2022-11-21, this API is available in the latest + version of Chrome based browsers. +

+ View source on GitHub +
-
+ - - + + - - + + diff --git a/src/content/insertable-streams/video-processing/index.html b/src/content/insertable-streams/video-processing/index.html index 840b462d6d..239d223b83 100644 --- a/src/content/insertable-streams/video-processing/index.html +++ b/src/content/insertable-streams/video-processing/index.html @@ -7,100 +7,124 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Insertable Streams - Video - - - - - - + + + + + - + +
+

+ WebRTC samples + Video processing with insertable streams +

-
-

WebRTC samples - Video processing with insertable streams

+

+ This sample shows how to perform processing on a video stream using the + experimental + insertable streams + API. There are options for the source of the input stream, the + destination of the output stream, and the API used to transform the + stream. There is also the option to duplicate the source stream to a + video element on the page, which may affect the source FPS. +

-

This sample shows how to perform processing on a video stream using the experimental - insertable streams API. - There are options for the source of the input stream, the destination of the output stream, - and the API used to transform the stream. There is also the option to duplicate the source - stream to a video element on the page, which may affect the source FPS. -

+ - - -
+
Source: - Add to page: -
-
+ Add to page: +
+
Transform: -
-
+
+
Destination: -
+
-

View the console to see logging.

+

View the console to see logging.

-

- Note: This sample is using an experimental API that has not yet been standardized. - This API is available in Chrome 94 or later. -

- View source on GitHub +

+ Note: This sample is using an experimental API that has not yet + been standardized. This API is available in Chrome 94 or later. +

+ View source on GitHub +
-
+ - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - + + diff --git a/src/content/insertable-streams/webgpu/index.html b/src/content/insertable-streams/webgpu/index.html index 7bf7f97165..4339abf863 100644 --- a/src/content/insertable-streams/webgpu/index.html +++ b/src/content/insertable-streams/webgpu/index.html @@ -7,71 +7,89 @@ * tree. --> + + + + + + + + + - - - - - - - - - - - - + Integrations with WebGPU for custom video rendering - - + + + - - - - +
-

WebRTC samples - Integrations with WebGPU for custom video rendering -

+

+ WebRTC samples + Integrations with WebGPU for custom video rendering +

-

This sample shows how to render multiple video streams to canvas using the insertable streams and WebGPU APIs. There are options to either process the - rendering on the main thread or on a worker thread. -

-
-
-
- Choose type of rendering: - -
- -
Input:
- - -
Output:
-
-

- Note: This sample is using WebGPU API that is in Origin Trial as - of 2021-09-21 and is available in Chrome M94 if the experimental code is enabled on - the command line with - --enable-unsafe-webgpu. -

- View source on GitHub +

+ This sample shows how to render multiple video streams to canvas using + the + insertable streams + and WebGPU APIs. There + are options to either process the rendering on the main thread or on a + worker thread. +

+
+
+
+ Choose type of rendering: + +
+
Input:
+ + +
Output:
+
+

+ Note: This sample is using WebGPU API that is in Origin Trial as + of 2021-09-21 and is available in Chrome M94 if the experimental code is + enabled on the command line with --enable-unsafe-webgpu. +

+ View source on GitHub
+ + - - + diff --git a/src/content/peerconnection/audio/index.html b/src/content/peerconnection/audio/index.html index c21b9c74a7..41ee7dc730 100644 --- a/src/content/peerconnection/audio/index.html +++ b/src/content/peerconnection/audio/index.html @@ -7,102 +7,129 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Peer connection: audio only - - - - - - - - - + + + + + + -
+ +
+

+ WebRTC samples + Peer connection: audio only +

-

WebRTC samples Peer connection: audio only -

- -
+
-
Local audio:
- +
Local audio:
+
-
Remote audio:
- +
Remote audio:
+
-
+
-
+
-
-
+
+
Bitrate
-
-
+
+
Packets sent per second
-
-
+
+
average audio level ([0..1])
-
+
- View source on GitHub -
- - - + View source on GitHub + +
Bitrate and Packes sent per second - approximate results in browsers
+ + - - - - + + + + - -
+ Bitrate and Packes sent per second - approximate results in browsers +
Opus iSAC 16K G722 PCMU Browsers Tested
~40 kbps / Muted : Same, ~50 Packets, Muted : Same or slight drop~30 kbps / Muted : Same, ~33 Packets, Muted : Same or slight drop
+ ~40 kbps / Muted : Same, ~50 Packets, Muted : Same or slight drop + + ~30 kbps / Muted : Same, ~33 Packets, Muted : Same or slight drop + ~70 kbps / Muted : Same, ~50 Packets, Muted : Same ~70 kbps / Muted : Same, ~55 Packets, Muted : Same Tested in Chrome, Not tested in Opera, Firefox, Safari, Edge
-
- - - + + +
+ + + + + - - + + diff --git a/src/content/peerconnection/bandwidth/index.html b/src/content/peerconnection/bandwidth/index.html index 92ac78f01a..0fc46d8763 100644 --- a/src/content/peerconnection/bandwidth/index.html +++ b/src/content/peerconnection/bandwidth/index.html @@ -7,73 +7,93 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Peer connection: adjust bandwidth - - - - - - - - - - -
+ + + + + + -

WebRTC samples Peer connection: adjust bandwidth -

+ +
+

+ WebRTC samples + Peer connection: adjust bandwidth +

- - + + -
+
kbps - Use synthetic video: -
-
+ Use synthetic video: +
+
Bitrate
-
-
+
+
Packets sent per second
-
+
- View source on GitHub + View source on GitHub +
-
+ - - - + + + - - + + diff --git a/src/content/peerconnection/change-codecs/index.html b/src/content/peerconnection/change-codecs/index.html index 4c7f351a0f..dfe4670882 100644 --- a/src/content/peerconnection/change-codecs/index.html +++ b/src/content/peerconnection/change-codecs/index.html @@ -7,73 +7,102 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Peer connection - - - - - - - - - -
-

WebRTC samples - Peer connection

- -

This sample shows how to setup a connection between two peers using - RTCPeerConnection and - choose the preferred video codec to use (when that functionality is available.) -

- - - - -
+ + + + + + + +
+

+ WebRTC samples + Peer connection +

+ +

+ This sample shows how to setup a connection between two peers using + RTCPeerConnection + and choose the preferred video codec to use (when that functionality is + available.) +

+ + + + +
-
+
-
+
Codec preferences:
+
+ +

+ View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + pc1 and pc2 are in global scope, so you can + inspect them in the console as well. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects pc1 and pc2 are in global scope, so you can inspect them in the console as - well.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
+ - - + + - - + + diff --git a/src/content/peerconnection/channel/index.html b/src/content/peerconnection/channel/index.html index 1b1154a843..91bb4c9ac7 100644 --- a/src/content/peerconnection/channel/index.html +++ b/src/content/peerconnection/channel/index.html @@ -7,57 +7,86 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Peer connection between two tabs - - - - - - - - + + + + + -
-

WebRTC samples - Peer connection

+ +
+

+ WebRTC samples + Peer connection +

-

This sample shows how to setup a connection between two peers in different tabs using - RTCPeerConnection - and Broadcast Channel -

+

+ This sample shows how to setup a connection between two peers in + different tabs using + RTCPeerConnection + and + Broadcast Channel +

- - + + -
+
-
+
-

Click the start button in two tabs (of the same browser; can be in different windows) to make a call

+

+ Click the start button in two tabs (of the same browser; can be in + different windows) to make a call +

- View source on GitHub + View source on GitHub +
-
+ - - + + - - + + diff --git a/src/content/peerconnection/constraints/index.html b/src/content/peerconnection/constraints/index.html index 2875fdb91c..5ae4dd903b 100644 --- a/src/content/peerconnection/constraints/index.html +++ b/src/content/peerconnection/constraints/index.html @@ -7,115 +7,138 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Constraints and statistics - - - - - - - - - -
- -

WebRTC samples Constraints & statistics -

- -
-

This demo shows ways to use constraints and statistics in WebRTC applications.

-

Set camera constraints, and click Get media to (re)open the camera with these included. - Click Connect to create a (local) peer connection. The RTCPeerConnection objects localPeerConnection - and remotePeerConnection can be inspected from the console.

-

Setting a value to zero will remove that constraint.

-

The lefthand video shows the output of getUserMedia(); on the right is the video after being - passed through the peer connection. The transmission bitrate is displayed below the righthand video.

-
- -
+ + + + + + + +
+

+ WebRTC samples + Constraints & statistics +

+ +
+

+ This demo shows ways to use constraints and statistics in WebRTC + applications. +

+

+ Set camera constraints, and click Get media to + (re)open the camera with these included. Click + Connect to create a (local) peer connection. The + RTCPeerConnection objects localPeerConnection and + remotePeerConnection can be inspected from the console. +

+

Setting a value to zero will remove that constraint.

+

+ The lefthand video shows the output of getUserMedia(); on + the right is the video after being passed through the peer connection. + The transmission bitrate is displayed below the righthand video. +

+
+ +
-
- +
-
+
-
-

Camera constraints

-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
+
+

Camera constraints

+
+ +
-
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
-
- -
+
- -
+ +
- -
-
-
+ +
+
+
-
+
-
+
- -
+ +
-
- - View source on GitHub - -
+ + + View source on GitHub +
- - - + - + + + + diff --git a/src/content/peerconnection/create-offer/index.html b/src/content/peerconnection/create-offer/index.html index f0daa4c206..b24eedeeb5 100644 --- a/src/content/peerconnection/create-offer/index.html +++ b/src/content/peerconnection/create-offer/index.html @@ -7,74 +7,107 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + createOffer() output - - - - - - - - - -
- -

WebRTC samples createOffer() output -

- -

This page tests the createOffer() method. It creates a peer connection, then prints out the SDP - generated by createOffer(), with the number of desired audio MediaStreamTracks and the - checked constraints. Currently, only audio tracks can be added, as there is no programmatic way to generate - video tracks. (Web Audio is used to generate the audio tracks.)

- -
+ + + + + + + +
+

+ WebRTC samples + createOffer() output +

+ +

+ This page tests the createOffer() method. It creates a peer + connection, then prints out the SDP generated by + createOffer(), with the number of desired audio + MediaStreamTracks and the checked constraints. Currently, + only audio tracks can be added, as there is no programmatic way to + generate video tracks. (Web Audio is used to generate the audio tracks.) +

+ +
- + 1 -
+
-
+
- +
- +
- +
- +
-
- - +
- + - View source on GitHub + -
+ View source on GitHub +
- - + - + + - + + diff --git a/src/content/peerconnection/dtmf/css/main.css b/src/content/peerconnection/dtmf/css/main.css index 05d88bd34d..3c40e37003 100644 --- a/src/content/peerconnection/dtmf/css/main.css +++ b/src/content/peerconnection/dtmf/css/main.css @@ -54,7 +54,7 @@ div#dtmf { } div#dtmf div { - font-family: 'Inconsolata', 'Courier New', monospace; + font-family: "Inconsolata", "Courier New", monospace; } div#sentTones { @@ -66,7 +66,7 @@ div#dtmfStatus { margin: 0 0 10px 0; } -div#parameters input[type = range] { +div#parameters input[type="range"] { font-size: 1em; width: 85px; } @@ -85,4 +85,20 @@ div#parameters label { width: 68px; } +body.dark-mode div#dialPad button { + background-color: #ddd; + border: 1px solid #ccc; + color: black; +} +body.dark-mode div#dialPad button:hover { + background-color: #aaa; +} + +body.dark-mode div#dialPad button:active { + background-color: #888; +} + +body.dark-mode div#dtmf { + background-color: #2e2e2e; +} diff --git a/src/content/peerconnection/dtmf/index.html b/src/content/peerconnection/dtmf/index.html index 37bf3bc6d6..5302b2c1a0 100644 --- a/src/content/peerconnection/dtmf/index.html +++ b/src/content/peerconnection/dtmf/index.html @@ -7,102 +7,124 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + DTMF - - - - - - - - - - -
- -

WebRTC samples - Send DTMF tones

- -
+ + + + + + + + +
+

+ WebRTC samples + Send DTMF tones +

+ +
- - - - + + + +
- - - - + + + +
- - - - + + + +
- - - - + + + +
-
+
-
+

Sent tones

-
+
-
+
- - - 500 + + + 500
- - - 50 + + + 50
- - + +
-
+
-
+
+
+ + View source on GitHub
- View source on GitHub - -
- - - - + - + + + + diff --git a/src/content/peerconnection/multiple-relay/index.html b/src/content/peerconnection/multiple-relay/index.html index 0609c2095d..16f4669629 100644 --- a/src/content/peerconnection/multiple-relay/index.html +++ b/src/content/peerconnection/multiple-relay/index.html @@ -7,61 +7,80 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Peer connection relay - - - - - - - - - -
- -

WebRTC samples Peer connection relay -

- -
+ + + + + + + +
+

+ WebRTC samples + Peer connection relay +

+ +
-
+
-
+
+ +
-
+
-
+
-
+
- View source on GitHub - -
+ View source on GitHub +
- - - + - + + + - + + diff --git a/src/content/peerconnection/multiple/index.html b/src/content/peerconnection/multiple/index.html index 891636ab7a..221aa873b8 100644 --- a/src/content/peerconnection/multiple/index.html +++ b/src/content/peerconnection/multiple/index.html @@ -7,61 +7,83 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Multiple peer connections - - - - - - - - - -
- -

WebRTC samples Multiple peer connections -

- - - - - -
+ + + + + + + +
+

+ WebRTC samples + Multiple peer connections +

+ + + + + +
+
+ +

+ View the console to see logging and to inspect the + MediaStream object localStream. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging and to inspect the MediaStream object localStream.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
- - - + - + + - + + diff --git a/src/content/peerconnection/munge-sdp/index.html b/src/content/peerconnection/munge-sdp/index.html index e7a6b27622..80a3ef1f7b 100644 --- a/src/content/peerconnection/munge-sdp/index.html +++ b/src/content/peerconnection/munge-sdp/index.html @@ -7,91 +7,121 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Munge SDP - - - - - - - - - -
- -

WebRTC samples Munge SDP -

- - - - - + - + + - + + diff --git a/src/content/peerconnection/negotiate-timing/index.html b/src/content/peerconnection/negotiate-timing/index.html index 2bea90f00d..812cb3d67d 100644 --- a/src/content/peerconnection/negotiate-timing/index.html +++ b/src/content/peerconnection/negotiate-timing/index.html @@ -7,64 +7,83 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Peer connection - Renegotiate - - - - - - + + + + + - + +
+

+ WebRTC samples + Peer connection negotiation timing +

-
-

WebRTC samples - Peer connection negotiation timing

+ + - - - -
+
-
-
+
+
+

+ Video sections after renegotiating: + +

+

- Video sections after renegotiating: + View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + pc1 and pc2 are in global scope, so you can + inspect them in the console as well.

-
-

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects pc1 and pc2 are in global scope, so you can inspect them in the console as - well.

-

-

- Log goes here +
+
Log goes here
-

- View source on GitHub + View source on GitHub +
-
+ - - + + - - + + diff --git a/src/content/peerconnection/pc1/index.html b/src/content/peerconnection/pc1/index.html index 9844b81265..4e8ee86b6f 100644 --- a/src/content/peerconnection/pc1/index.html +++ b/src/content/peerconnection/pc1/index.html @@ -7,64 +7,92 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Peer connection - - - - - - - - - -
-

WebRTC samples - Peer connection

- -

This sample shows how to setup a connection between two peers using - RTCPeerConnection. -

- - - - -
+ + + + + + + +
+

+ WebRTC samples + Peer connection +

+ +

+ This sample shows how to setup a connection between two peers using + RTCPeerConnection. +

+ + + + +
+
+ +

+ View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + pc1 and pc2 are in global scope, so you can + inspect them in the console as well. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects pc1 and pc2 are in global scope, so you can inspect them in the console as - well.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
+ - - + + - - + + diff --git a/src/content/peerconnection/per-frame-callback/index.html b/src/content/peerconnection/per-frame-callback/index.html index cff5928c33..92933ddbc1 100644 --- a/src/content/peerconnection/per-frame-callback/index.html +++ b/src/content/peerconnection/per-frame-callback/index.html @@ -7,76 +7,103 @@ * tree. --> - + + + + + + + + + - - - - - - - - - - + Peer connection and requestVideoFrameCallback() - - - - - - - - - + + + + + + -
+ +
+

+ WebRTC samples + Peer connection and requestVideoFrameCallback() +

-

WebRTC samples Peer connection and requestVideoFrameCallback() -

+ - - - - + + -
+
-
-
+
+
Local capture delay (converted to milliseconds)
-
-
+
+
Network delay (milliseconds)
-
-
-
+
+
+
Render delay (milliseconds)
-
-
+
+
Processing time (converted to milliseconds)
-
-

For more information about requestVideoFrameCallback, see Perform efficient per-video-frame operations on video with requestVideoFrameCallback().

+
+

+ For more information about requestVideoFrameCallback, see + Perform efficient per-video-frame operations on video with + requestVideoFrameCallback(). +

- View source on GitHub + View source on GitHub +
-
+ - - - + + + - - + + diff --git a/src/content/peerconnection/perfect-negotiation/index.html b/src/content/peerconnection/perfect-negotiation/index.html index b4066f6eb8..6fbc22bbdd 100644 --- a/src/content/peerconnection/perfect-negotiation/index.html +++ b/src/content/peerconnection/perfect-negotiation/index.html @@ -7,75 +7,115 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Perfect Negotiation - - - - - - - - - -
-

WebRTC samples - Perfect Negotiation

- -

This sample shows how to setup a connection between two peers using - RTCPeerConnection - with the Perfect Negotiation - usage pattern.

- -

Perfect Negotiation supports both endpoints sending offers. The pattern intelligently handles the - situation of "glare" (both peers making an offer at the same time, causing a collision) by having - one peer be "polite" and the other peer be "impolite". In the event of an offer collision, the - polite peer rolls back its offer in order to process the impolite peer's incoming offer. Once - back to the stable signaling state, the polite peer's onnegotiationneeded fires again and a - follow-up O/A is completed.

- -

Click both peers' Start button to create local streams. - Then press the Swap Sending Track button to modify which transceiver is sending; - this will be negotiated and displayed as a remote track on the other peer's iframe.

- -
+ + + + + + + +
+

+ WebRTC samples + Perfect Negotiation +

+ +

+ This sample shows how to setup a connection between two peers using + RTCPeerConnection + with the + Perfect Negotiation + usage pattern. +

+ +

+ Perfect Negotiation supports both endpoints sending offers. The pattern + intelligently handles the situation of "glare" (both peers making an + offer at the same time, causing a collision) by having one peer be + "polite" and the other peer be "impolite". In the event of an offer + collision, the polite peer rolls back its offer in order to process the + impolite peer's incoming offer. Once back to the stable signaling state, + the polite peer's onnegotiationneeded fires again and a + follow-up O/A is completed. +

+ +

+ Click both peers' Start button to create local streams. Then press the + Swap Sending Track button to modify which transceiver is sending; this + will be negotiated and displayed as a remote track on the other peer's + iframe. +

+ +
+
+ +
+ + +
+ +

The JavaScript console shows logs for the negotiation steps.

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-
- - -
- -

The JavaScript console shows logs for the negotiation steps.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
+ - - + + - - + + diff --git a/src/content/peerconnection/pr-answer/index.html b/src/content/peerconnection/pr-answer/index.html index 9c5691d5e1..56bebd3bdf 100644 --- a/src/content/peerconnection/pr-answer/index.html +++ b/src/content/peerconnection/pr-answer/index.html @@ -7,52 +7,74 @@ * tree. --> - - - - - - - - - - - + + + + + + + + + + PeerConnection PRANSWER Demo - - - + + + - - -
+ + +
+

+ WebRTC samples + Use pranswer when setting up a peer connection +

-

WebRTC samples Use pranswer when setting up a peer connection -

+ + +
+ + + +

+ View the console to see logging and to inspect the + MediaStream object localStream. +

+ View source on GitHub +
- - -
- - - -

View the console to see logging and to inspect the MediaStream object localStream.

- View source on GitHub + -
- - - - + + + + - diff --git a/src/content/peerconnection/restart-ice/index.html b/src/content/peerconnection/restart-ice/index.html index 0ee06b5596..10378840c1 100644 --- a/src/content/peerconnection/restart-ice/index.html +++ b/src/content/peerconnection/restart-ice/index.html @@ -7,72 +7,96 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + ICE Restart - - - - - - - - - -
- -

WebRTC samples - Peer connection

- -
+ + + + + + + +
+

+ WebRTC samples + Peer connection +

+ +
- - -

Not connected.

+ + +

Not connected.

- - -

Not connected.

+ + +

Not connected.

-
+
-
+
+
+ +

+ View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + localPeerConnection and + remotePeerConnection are in global scope, so you can + inspect them in the console as well. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects localPeerConnection and remotePeerConnection are in global scope, so you can - inspect them in the console as well.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
+ - - + + - - + + diff --git a/src/content/peerconnection/states/index.html b/src/content/peerconnection/states/index.html index 947302a72c..9d28b6c7e3 100644 --- a/src/content/peerconnection/states/index.html +++ b/src/content/peerconnection/states/index.html @@ -7,88 +7,111 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Peer connection: states - - - - - - - - - -
- -

WebRTC samples Peer connection: states -

- - - - -
+ + + + + + + +
+

+ WebRTC samples + Peer connection: states +

+ + + + +
-
+
-
+
-
PC1 signaling state:
-
+
PC1 signaling state:
+
-
PC1 ICE state:
-
+
PC1 ICE state:
+
-
PC1 connection state:
-
+
PC1 connection state:
+
-
PC2 signaling state:
-
+
PC2 signaling state:
+
-
PC2 ICE state:
-
+
PC2 ICE state:
+
-
PC2 connection state:
-
+
PC2 connection state:
+
+
+ +

+ View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + pc1 and pc2 are in global scope, so you can + inspect them in the console as well. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects pc1 and pc2 are in global scope, so you can inspect them in the console as well.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
- - - + - + + - + + diff --git a/src/content/peerconnection/trickle-ice/index.html b/src/content/peerconnection/trickle-ice/index.html index 7ae337cf06..39ef063888 100644 --- a/src/content/peerconnection/trickle-ice/index.html +++ b/src/content/peerconnection/trickle-ice/index.html @@ -7,143 +7,174 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Trickle ICE - - - - - - - - - -
- -

WebRTC samples - Trickle ICE

- -
- -

This page tests the trickle ICE functionality in a WebRTC implementation. It creates a PeerConnection with - the specified ICEServers, and then starts candidate gathering for a session with a single audio stream. As - candidates are gathered, they are displayed in the text box below, along with an indication when candidate - gathering is complete.

- -

Note that if no getUserMedia permissions for this origin are persisted only candidates from a single - interface will be gathered in Chrome. See the RTCWEB IP address handling - recommendations draft for details.You have given permission, candidate from multiple interface will be gathered. + + + + + + + +

+

+ WebRTC samples + Trickle ICE +

+ +
+

+ This page tests the trickle ICE functionality in a WebRTC + implementation. It creates a PeerConnection with the specified + ICEServers, and then starts candidate gathering for a session with a + single audio stream. As candidates are gathered, they are displayed in + the text box below, along with an indication when candidate gathering + is complete.

-

Individual STUN and TURN servers can be added using the Add server / Remove server controls below; in - addition, the type of candidates released to the application can be controlled via the IceTransports - constraint.

- -

If you test a STUN server, it works if you can gather a candidate with type "srflx". - If you test a TURN server, it works if you can gather a candidate with type "relay".

-

If you test just a single TURN/UDP server, this page even allows you to detect when you are using the wrong - credential to authenticate.

+

+ Note that if no getUserMedia permissions for this origin are persisted + only candidates from a single interface will be gathered in Chrome. + See + the RTCWEB IP address handling recommendations draft + for details.You have given permission, candidate from multiple interface will + be gathered. +

-
+

+ Individual STUN and TURN servers can be added using the Add server / + Remove server controls below; in addition, the type of candidates + released to the application can be controlled via the IceTransports + constraint. +

-
+

+ If you test a STUN server, it works if you can gather a candidate with + type "srflx". If you test a TURN server, it works if you can gather a + candidate with type "relay". +

+

+ If you test just a single TURN/UDP server, this page even allows you + to detect when you are using the wrong credential to authenticate. +

+
+

ICE servers

- +
- - + +
- - + +
- - + +
- - - + + +
+
-
- -
- +

ICE options

- - - all - - relay + + + all + + relay
+
-
- -
+
- - + +
+
-
- -
- +
- + - - - - - - - - - + + + + + + + + + - - + +
TimeTypeFoundationProtocolAddressPortPriorityURL (if present)relayProtocol (if present)TimeTypeFoundationProtocolAddressPortPriorityURL (if present)relayProtocol (if present)
-
Note: errors from onicecandidateerror above are not necessarily fatal. For example an IPv6 DNS lookup may fail but relay candidates can still be gathered via IPv4.
+
+ Note: errors from onicecandidateerror above are not necessarily fatal. + For example an IPv6 DNS lookup may fail but relay candidates can still + be gathered via IPv4. +
-
- +
- View source on GitHub -
+ View source on GitHub +
- - + - + + - + + diff --git a/src/content/peerconnection/upgrade/index.html b/src/content/peerconnection/upgrade/index.html index ab449efb99..0f01016484 100644 --- a/src/content/peerconnection/upgrade/index.html +++ b/src/content/peerconnection/upgrade/index.html @@ -7,61 +7,85 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Peer connection - upgrade - - - - - - - - - -
-

WebRTC samples - Peer connection

- - - - -
+ + + + + + + +
+

+ WebRTC samples + Peer connection +

+ + + + +
+
+ +

+ View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + pc1 and pc2 are in global scope, so you can + inspect them in the console as well. +

+ +

+ For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

+ + View source on GitHub
-

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects pc1 and pc2 are in global scope, so you can inspect them in the console as - well.

- -

For more information about RTCPeerConnection, see Getting - Started With WebRTC.

- - - View source on GitHub - -
+ - - + + - - + + diff --git a/src/content/peerconnection/webaudio-input/index.html b/src/content/peerconnection/webaudio-input/index.html index a4f2f85439..efacd02e1d 100644 --- a/src/content/peerconnection/webaudio-input/index.html +++ b/src/content/peerconnection/webaudio-input/index.html @@ -7,91 +7,134 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Web Audio input - - - - - - - - - -
- -

WebRTC samples - Web Audio input

- - - -
- -
- -
+ + + + + + + +
+

+ WebRTC samples + Web Audio input +

+ + + +
+ +
+ +
-
- -
-
- -

Capture microphone input and stream it to a peer with processing applied to the audio.

- -

The audio stream is:

- -
+ +
+
+ +

+ Capture microphone input and stream it to a peer with processing applied + to the audio. +

+ +

The audio stream is:

+ +
    +
  • + Recorded using + live web audio input in chrome://flags .
  • Filtered using an HP filter with fc=1500 Hz.
    • -
  • Encoded using Opus.
    • -
  • Transmitted (in loopback) to a remote peer using RTCPeerConnection where it is decoded. +
  • + Encoded using + Opus.
    • -
  • Finally, the received remote stream is used as source to an <audio> element and played out locally. +
  • + Transmitted (in loopback) to a remote peer using + RTCPeerConnection + where it is decoded.
    • -
+
  • + Finally, the received remote stream is used as source to an + <audio> element and played out locally. +
    • + -

    Press any key to add an effect to the transmitted audio while talking.

    +

    + Press any key to add an effect to the transmitted audio while talking. +

    -

    Please note that:

    -
      -
    • Sample rate and channel configuration must be the same for input and - output sides on Windows. +

      Please note that:

      +
        +
      • + Sample rate and channel configuration must be the same for input and + output sides on Windows.
      • Only the default microphone device can be used for capturing.
        • -
      - -

      For more information, see WebRTC - integration with the Web Audio API.

      - - - View source on GitHub +
    + +

    + For more information, see + WebRTC integration with the Web Audio API. +

    + + View source on GitHub +
    -
    + - - - - - + + + + + diff --git a/src/content/peerconnection/webaudio-output/index.html b/src/content/peerconnection/webaudio-output/index.html index 5405788a0c..7415a94982 100644 --- a/src/content/peerconnection/webaudio-output/index.html +++ b/src/content/peerconnection/webaudio-output/index.html @@ -7,64 +7,87 @@ * tree. --> - - - - - - - - - - - - + + + + + + + + + + + Peer connection as input to Web Audio - - - - - - - - - -
    - -

    WebRTC samples Peer connection as input to Web Audio -

    - - - - - - -
    + + + + + + + +
    +

    + WebRTC samples + Peer connection as input to Web Audio +

    + + + + + + +
    +
    + +

    + View the console to see logging. The MediaStream object + localStream, and the RTCPeerConnection objects + localPeerConnection and + remotePeerConnection are in global scope, so you can + inspect them in the console as well. +

    + +

    + For more information about RTCPeerConnection, see + Getting Started With WebRTC. +

    + + View source on GitHub
    -

    View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects localPeerConnection and remotePeerConnection are in global scope, so you can - inspect them in the console as well.

    - -

    For more information about RTCPeerConnection, see Getting - Started With WebRTC.

    - - - View source on GitHub - -
    - - - - + + + + - - + + diff --git a/src/css/main.css b/src/css/main.css index b0536599c1..3ee965fe01 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -33,7 +33,7 @@ audio { } body { - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; font-weight: 300; margin: 0; padding: 1em; @@ -45,7 +45,7 @@ button { border: none; border-radius: 2px; color: white; - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; font-size: 0.8em; margin: 0 0 1em 0; padding: 0.5em 0.7em 0.6em 0.7em; @@ -74,7 +74,7 @@ canvas { } code { - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; font-weight: 400; } @@ -90,7 +90,7 @@ div#links { h1 { border-bottom: 1px solid #ccc; - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; font-weight: 500; margin: 0 0 0.8em 0; padding: 0 0 0.2em 0; @@ -124,7 +124,7 @@ img { max-width: 100%; } -input[type=radio] { +input[type="radio"] { position: relative; top: -1px; } @@ -174,7 +174,7 @@ h1 span { } a { - color: #1D6EEE; + color: #1d6eee; font-weight: 300; text-decoration: none; } @@ -198,7 +198,7 @@ a#viewSource { } div#errorMsg p { - color: #F00; + color: #f00; } div#links a { @@ -221,7 +221,7 @@ strong { textarea { resize: none; - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; } video { @@ -271,3 +271,163 @@ fieldset > select { font-size: 20px; } } + +body.dark-mode { + background-color: #121212; + color: #e0e0e0; +} + +body.dark-mode iframe { + background: #fff !important; + color-scheme: light !important; + filter: none !important; + border: none; +} + +body.dark-mode h1, +body.dark-mode h2, +body.dark-mode h3, +body.dark-mode p, +body.dark-mode li, +body.dark-mode a { + color: #e0e0e0; +} + +body.dark-mode h1 { + border-bottom: 1px solid #444; +} + +body.dark-mode section, +body.dark-mode div#container, +body.dark-mode textarea, +body.dark-mode select { + background-color: #1e1e1e; + color: #e0e0e0; + border-color: #444; +} + +body.dark-mode input { + background-color: #2e2e2e; + color: #e0e0e0; + border-color: #444; +} + +body.dark-mode a { + color: #80b3ff; +} + +body.dark-mode a:hover { + color: #aad4ff; +} + +body.dark-mode a#viewSource { + border-top: 1px solid #444; +} + +body.dark-mode button { + background-color: #333; + color: #e0e0e0; +} + +body.dark-mode button:hover, +body.dark-mode button:active { + background-color: #444; +} + +body.dark-mode button[disabled] { + color: #c0c0c0; +} + +body.dark-mode canvas, +body.dark-mode video { + background-color: #2e2e2e; +} + +body.dark-mode .highlight { + background-color: #1e1e1e; +} + +body.dark-mode .warning { + color: #ff6b6b; +} + +body.dark-mode button { + background-color: #bb4430; + color: #fff; +} + +body.dark-mode button:hover, +body.dark-mode button:active { + background-color: #a43c29; +} + +body.dark-mode button[disabled]:hover { + background-color: #bb4430; +} + +body.dark-mode canvas { + background-color: #2b2b2b; +} + +body.dark-mode code { + background-color: #1e1e1e; + color: #ffffff; +} + +body.dark-mode p#data { + border-top-color: #555; + color: #e0e0e0; +} + +body.dark-mode p.borderBelow { + border-bottom-color: #666; +} + +body.dark-mode div#errorMsg p { + color: #ff5252; +} + +#darkModeToggle { + position: fixed; + top: 1em; + right: 1em; + z-index: 1000; + background: none; + border: none; + cursor: pointer; + padding: 0; +} + +.toggle-track { + width: 80px; + height: 40px; + background-color: #333; + border-radius: 9999px; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 8px; + box-sizing: border-box; +} + +.toggle-track .icon { + color: #f87171; + z-index: 1; +} + +.toggle-track .thumb { + width: 36px; + height: 35px; + background-color: white; + border-radius: 50%; + position: absolute; + top: 2px; + left: 2px; + transition: transform 0.3s ease; + z-index: 0; +} + +body.dark-mode .toggle-track .thumb { + transform: translateX(40px); +} diff --git a/src/js/togglemode.js b/src/js/togglemode.js new file mode 100644 index 0000000000..3dd4a37f3a --- /dev/null +++ b/src/js/togglemode.js @@ -0,0 +1,51 @@ +const toggleBtn = document.createElement('button'); +toggleBtn.id = 'darkModeToggle'; +toggleBtn.setAttribute('aria-label', 'Toggle dark mode'); + +toggleBtn.innerHTML = ` +
    +
    + + + + + + + + + + + +
    +
    +
    + + + +
    +
    + `; + +document.body.appendChild(toggleBtn); + +toggleBtn.addEventListener('click', () => { + document.body.classList.toggle('dark-mode'); + + if (document.body.classList.contains('dark-mode')) { + localStorage.setItem('theme', 'dark'); + } else { + localStorage.setItem('theme', 'light'); + } +}); + +window.addEventListener('DOMContentLoaded', () => { + if (localStorage.getItem('theme') === 'dark') { + document.body.classList.add('dark-mode'); + } +});