webrtc/samples

This system is a curated collection of interactive code samples and demos designed to illustrate the usage of WebRTC and related browser APIs. It provides concrete examples for capturing media, establishing peer connections, transferring data, and processing audio and video streams in real-time. The repository serves as a practical reference for developers to understand modern WebRTC patterns, including device selection, codec negotiation, and insertable streams.

63 changes.

This period focused on modernizing the WebRTC samples repository by refactoring legacy code to ES6 and current Web APIs, while simultaneously restructuring the project for better developer experience. It involved adding a comprehensive suite of new interactive demos covering peer connections, data channels, device selection, and media recording, alongside the introduction of shared visualization utilities and consistent styling.

34 changes.

This period focused on expanding the project's sample library with interactive demonstrations for emerging WebRTC capabilities, including ICE restarts, Web Audio integration, and synthetic video generation. Significant effort was dedicated to implementing canvas and video capture workflows using the captureStream() API, alongside new samples for data channel messaging and screen sharing via getDisplayMedia. The work also involved modernizing existing code to ES6 standards and ensuring compatibility with browser autoplay policies and WebKit requirements.

29 changes.

This period focused on expanding the WebRTC samples collection with extensive support for insertable streams, including video, audio, and end-to-end encryption demos. It introduced advanced media processing techniques such as off-main-thread worker processing, WebGPU rendering, and canvas-based video manipulation. The work also covered specialized peer connection features like perfect negotiation, codec selection, and inter-tab communication via Broadcast Channel.

A new stylesheet (main.css) has been added to the bandwidth peerconnection example to define the layout for video elements, buttons, labels, and graph containers, ensuring correct sizing and positioning of the UI components.

src/content/peerconnection/bandwidth/css · high confidence

Added new CSS files for the 'multiple' and 'states' peerconnection samples to define layout and styling for video elements, buttons, and state displays, including responsive adjustments for different screen sizes.

src/content/peerconnection/multiple/css, src/content/peerconnection/states/css · high confidence

A new stylesheet (main.css) has been added to style the peerconnection constraints sample, defining layout, typography, and responsive behavior for video elements, input controls, and statistics sections.

src/content/peerconnection/constraints/css · high confidence

A new interactive sample page has been added to the WebRTC code samples repository, demonstrating how to send DTMF tones over a WebRTC peer connection. The page provides a dial pad interface for manual tone entry, controls for adjusting tone duration and gap, and a text field for sending predefined tone sequences, allowing users to test DTMF transmission capabilities directly in the browser.

src/content/peerconnection/dtmf · high confidence

A new interactive demo has been added to the WebRTC samples collection that allows users to control a camera's pan, tilt, and zoom capabilities. The sample uses the MediaStreamTrack API to detect if a connected camera supports these features and, if so, exposes sliders to adjust the settings in real-time via applyConstraints.

src/content/getusermedia/pan-tilt-zoom · high confidence

A new interactive sample demonstrating WebRTC Peer Connection end-to-end encryption has been added. It allows users to configure a crypto key and toggle the encryption offset, visualizing the encrypted stream in a middlebox monitor while the sender and receiver display the decrypted video.

src/content/insertable-streams/endtoend-encryption · high confidence

A new interactive sample demonstrating the Perfect Negotiation pattern for RTCPeerConnection has been added. It features two peers (polite and impolite) running in iframes, allowing users to observe how the system handles signaling collisions (glare) when both sides attempt to negotiate simultaneously, including the ability to trigger specific glare scenarios via UI buttons.

src/content/peerconnection/perfect-negotiation · high confidence

A new interactive demo has been added to the WebRTC samples collection that demonstrates the Scalable Video Coding (SVC) Extension. This sample allows users to establish a peer connection and explicitly select video codec preferences and scalability modes (such as L1T1, L2T2, etc.) using the MediaCapabilities API to verify device support. It includes UI controls for codec and mode selection, along with real-time graphs visualizing bitrate and packets sent per second to help evaluate SVC performance.

src/content/extensions/svc · high confidence

A new sample demonstrating how to upgrade an audio-only WebRTC peer connection to include video has been added. The implementation includes the playsinline attribute on video elements to ensure compatibility with modern WebKit browsers, addressing issue \#1064.

src/content/peerconnection/upgrade · high confidence

The audio processing demo now performs real-time audio filtering in a dedicated Web Worker to keep the main thread responsive. The worker applies a configurable low-pass filter to the incoming audio stream using the WebCodecs API, and the main script manages the media pipeline (getUserMedia, MediaStreamTrackProcessor/Generator) and communicates with the worker via postMessage, including support for aborting the processing stream.

src/content/insertable-streams/audio-processing/js · high confidence

The video processing sample now supports using a canvas element as an input source for insertable streams, in addition to existing options like camera, video file, and peer connection. This allows users to process video frames originating from canvas rendering operations.

src/content/insertable-streams/video-processing · high confidence

A new interactive demo has been added to the WebRTC samples collection that captures a live camera stream, draws it onto a canvas, applies a visual modification (a red square), and then re-captures the modified canvas content back into a video element. This sample illustrates the workflow of converting video to pixel data and back to video using the Canvas API and captureStream().

src/content/capture/canvas-filter · high confidence

A new sample page has been added to demonstrate how to select preferred video codecs during a WebRTC peer connection. The interface includes a dropdown menu for codec preferences and displays the actual codec currently in use, allowing users to inspect and control codec negotiation behavior.

src/content/peerconnection/change-codecs · high confidence

A new interactive sample page has been added to demonstrate the getDisplayMedia API for screen sharing. The page includes a video element to display the shared content, a start button, and an advanced options fieldset that allows users to specify their preferred display surface (browser tab, window, or monitor) via the displaysurface constraint.

src/content/getusermedia/getdisplaymedia · high confidence

The multi-device demo now allows users to select specific audio output devices (speakers) for individual media elements. The script enumerates available audio output devices and populates dropdown selectors, enabling distinct audio routing for each video or audio element on the page via the setSinkId API.

src/content/devices/multi/js · high confidence

This location introduces a new interactive sample that demonstrates how to prioritize specific video codecs (such as VP8) on the receiving side of a WebRTC peer connection using the \setCodecPreferences\ API. The sample allows users to select a preferred codec from a dropdown list, which is then applied to the remote transceiver to influence codec negotiation, and displays the actual codec being used in the session.

src/content/peerconnection/change-codecs/js · high confidence

Adds a new CSS file to style the DTMF peerconnection sample, defining layout and appearance for the dial pad, parameter controls, and DTMF status display.

src/content/peerconnection/dtmf/css · high confidence

Introduces a new CSS file (main.css) for the Web Audio input peer connection sample, defining layout and visual styles for audio elements, buttons, status displays, and form controls.

src/content/peerconnection/webaudio-input/css · high confidence

The ICE restart example now includes a dedicated stylesheet that defines the layout for video elements and buttons. Video elements are sized responsively based on their container width, and buttons are styled with specific margins and widths, including adjustments for screens narrower than 400px.

src/content/peerconnection/restart-ice/css · high confidence

The peer connection sample now includes a dedicated CSS file (main.css) that defines the layout and dimensions for video elements. This ensures that local and remote video streams are displayed with correct sizing (45% width, 3:4 aspect ratio) and proper spacing, with specific adjustments for mobile viewports (max-width: 400px) to maintain usability on smaller screens.

src/content/peerconnection/pc1/css · high confidence

A new CSS file (main.css) has been added to style the video content hint demo page. It defines layout rules for video elements, including a responsive width calculation based on a CSS variable, aspect-ratio preservation, and object-fit settings, as well as container and layout styles for the demo interface.

src/content/capture/video-contenthint/css · high confidence

A new 'Breakout Box crop' demo has been added to the insertable-streams section, demonstrating how to crop a video stream using the experimental MediaStreamTrack API within a Web Worker. The implementation utilizes the VideoFrame copy constructor (available in Chrome 94+) to extract a specific rectangular region from the video frames, providing a concrete example of off-main-thread media processing.

src/content/insertable-streams/video-crop · high confidence

A new JavaScript sample for the getusermedia filter demo has been added. It allows users to apply CSS-based video filters via a selection dropdown and capture the filtered video frame to a canvas using a snapshot button. The implementation uses modern Web APIs, including navigator.mediaDevices.getUserMedia for stream acquisition and srcObject for video playback, while exposing the stream and DOM elements to the browser console for debugging.

src/content/getusermedia/filter/js · high confidence

New CSS files have been added to the end-to-end encryption and video-processing sample directories to define the layout and styling for their respective UI elements, including buttons, status indicators, and video containers.

src/content/insertable-streams/endtoend-encryption/css, src/content/insertable-streams/video-processing/css · high confidence

Added new CSS files for the 'create-offer' and 'munge-sdp' peerconnection samples to define layout, spacing, and responsive design for buttons, forms, and media elements.

src/content/peerconnection/create-offer/css, src/content/peerconnection/munge-sdp/css · high confidence

New stylesheets have been added for the video-pc and video-video capture demos to control the layout of video elements. The CSS ensures videos are displayed side-by-side with appropriate margins on larger screens and adjusts the layout for mobile viewports (max-width 400px) to stack or resize elements for better readability.

src/content/capture/video-pc/css, src/content/capture/video-video/css · high confidence

A new JavaScript file (src/js/lib/ga.js) has been added to initialize Google Analytics. This script loads the analytics library asynchronously and automatically sends a pageview hit for the property UA-48530561-1, enabling basic usage tracking for the application.

src/js/lib · high confidence

This change introduces a new interactive demo in the peerconnection samples that allows users to trigger an ICE restart on an active WebRTC connection, and includes an automated test to verify that the restart successfully changes the candidate pairs. The demo provides UI controls to start a call and restart the ICE process, while the test ensures the functionality works as expected by checking that local and remote candidate IDs change after a restart.

src/content/peerconnection/restart-ice/js · high confidence

A new demo page has been added to the WebRTC samples repository, demonstrating how to use the 'pranswer' mechanism when setting up a peer connection. The page includes the necessary HTML structure, video elements with playsinline support for WebKit compatibility, and links to the adapter library and main JavaScript logic.

src/content/peerconnection/pr-answer · high confidence

A new JavaScript module, videopipe.js, has been added to the src/js directory. This utility provides a simplified abstraction for WebRTC video streaming by automatically setting up two RTCPeerConnections, exchanging ICE candidates, and handling the offer/answer negotiation. It allows developers to create a video pipe by passing a media stream and a handler function, which is invoked when the remote stream becomes available, and provides a close method to terminate the connections.

src/js · high confidence

A new sample page has been added to demonstrate capturing microphone input, applying a high-pass filter (fc=1500 Hz), encoding with Opus, and streaming it via RTCPeerConnection to a remote peer. The interface includes controls to start/stop the stream and an option to add local audio to the output, with specific notes on Windows sample rate/channel requirements and default microphone limitations.

src/content/peerconnection/webaudio-input · high confidence

New JavaScript modules have been added to the third-party library folder to support real-time data visualization. The graph.js module introduces TimelineDataSeries and TimelineGraphView classes, which manage buffered statistical data points and render them on a canvas with configurable precision and caching for performance. Additionally, streamvisualizer.js provides a StreamVisualizer class that utilizes the Web Audio API to analyze remote media streams and render frequency and time-domain visualizations on a canvas element.

_src/js/third\party · high confidence

The multiple-relay sample now includes an audio checkbox that allows users to enable or disable audio capture when starting a local stream. This change updates the getUserMedia options to include audio when the checkbox is checked, enabling full audio-video relay scenarios in addition to the previous video-only mode.

src/content/peerconnection/multiple-relay/js · high confidence

A new interactive demo page has been added to the WebRTC samples collection, allowing users to measure the timing of peer connection renegotiations when transceivers are added or removed. The sample provides controls to start a call, initiate renegotiation with a configurable number of video sections, and hang up, with detailed logging available in the browser console for inspection of the underlying MediaStream and RTCPeerConnection objects.

src/content/peerconnection/negotiate-timing · high confidence

A new sample demonstrating how to upgrade an existing WebRTC peer connection from audio-only to audio-video is now available in the peerconnection directory. The sample includes the main JavaScript logic for managing the upgrade flow and an end-to-end test that verifies the transition from an audio call to a video call using Selenium WebDriver.

src/content/peerconnection/upgrade/js · high confidence

The video-pc sample now demonstrates capturing a media stream directly from a local video element using the captureStream() API. The implementation waits for the oncanplay event to ensure video tracks are available before creating the capture stream, then establishes a peer connection to transmit that captured stream to a remote video element.

src/content/capture/video-pc/js · high confidence

The audio peer connection sample now provides a dedicated UI for testing audio-only WebRTC sessions. Users can select from Opus, G722, PCMU, and RED codecs via a dropdown, and the interface includes real-time graphs to visualize bitrate, packets sent per second, and average audio levels. The sample also integrates the latest WebRTC adapter library and standardizes meta/link elements for better browser compatibility.

src/content/peerconnection/audio · high confidence

The bandwidth adjustment sample in the peerconnection directory has been updated to include a checkbox for enabling synthetic video generation. This allows users to test bandwidth throttling and bitrate graphs without requiring a physical camera, making it easier to demonstrate and measure the effects of different bandwidth restrictions (from 75 kbps to unlimited) in a controlled environment.

src/content/peerconnection/bandwidth · high confidence

The bandwidth demonstration sample has been updated to allow users to generate synthetic video traffic instead of relying solely on a live camera feed. By checking the 'synthetic' option in the UI, the sample uses a generated video stream, which enables consistent testing of bandwidth throttling and bitrate graphs without requiring a physical webcam or dealing with variable lighting conditions.

src/content/peerconnection/bandwidth/js · high confidence

The canvas-video demo now uses the canvas.captureStream() API to capture the canvas content and display it in a video element via srcObject, replacing previous capture methods.

src/content/capture/canvas-video/js · high confidence

A new demo has been added to the canvas-record section that captures frames from a canvas element (rendering a spinning teapot) and records them into a WebM video file using the MediaRecorder API. Users can start and stop the recording, play the resulting video in the browser, or download the generated .webm file.

src/content/capture/canvas-record/js · high confidence

A new demo page has been added to the canvas-video capture section that streams a WebGL teapot from a canvas element to a video element. The implementation uses the canvas captureStream() method to generate a media stream, which is then assigned to the video element's srcObject property. The demo includes a playsinline attribute on the video tag to ensure compatibility with modern WebKit autoplay policies and requires Firefox 47 or Chrome 52 or later.

src/content/capture/canvas-video · high confidence

A new demo page has been added to visualize how video track content hints affect encoding. The JavaScript logic captures a video stream, clones it into two separate PeerConnections, and applies 'motion' and 'detail' content hints to the respective tracks. This allows users to observe the difference in bitrate allocation and quality when the encoder prioritizes motion versus detail.

src/content/capture/video-contenthint/js · high confidence

The file transfer demo now calculates and displays the transfer bitrate in real-time. Users will see a bitrate value update during the file transfer process, providing immediate feedback on connection performance. This feature is implemented in the main JavaScript logic which tracks bytes transferred over time and updates the UI element, alongside a corresponding test to verify the transfer functionality.

src/content/datachannel/filetransfer/js · high confidence

Added a new stylesheet for the canvas-record demo that defines layout and styling for the video and canvas elements, ensuring they are displayed side-by-side with a 45% width and 3:4 aspect ratio, along with basic button and paragraph spacing.

src/content/capture/canvas-record/css · high confidence

The project introduces a new main stylesheet (src/css/main.css) that defines the visual appearance of the sample applications. This includes global resets, typography using the Roboto font, and specific styles for interactive elements like buttons, links, and form controls. It also provides layout rules for containers, sections, and media elements (audio, video, canvas), ensuring a consistent and responsive look across the demos.

src/css · high confidence

This change introduces the primary stylesheet for the Trickle ICE sample application. It defines the layout and visual presentation for the user interface, including button sizing, input field widths, label alignment, and the styling of the candidate results table. It also includes specific styles for the ICE candidate pool value display and hides the error note and getUserMedia permissions UI by default.

src/content/peerconnection/trickle-ice/css · high confidence

The input-output demo has been updated to allow users to select a specific audio output device (speaker) via a dropdown menu. This feature relies on the \setSinkId\ API, which is only available in browsers that support it; in unsupported browsers, the audio output selector remains disabled. The demo also refreshes device labels after permissions are granted and handles security errors (such as requiring HTTPS for output selection) gracefully.

src/content/devices/input-output/js · high confidence

The recording sample now includes a dropdown menu allowing users to select specific video codecs (such as VP8, VP9, H.264, AV1, and HEVC) and container formats (WebM or MP4) for their recordings. The implementation dynamically filters supported MIME types based on browser capabilities and includes logic to adjust audio sampling rates to 48kHz when recording to MP4 to ensure compatibility. Users can play, download, or upload the resulting recorded files directly within the demo.

src/content/getusermedia/record/js · high confidence

The multiple peerconnection sample now demonstrates establishing two simultaneous WebRTC connections from a single local stream to two remote peers, with video rendered in separate elements. It uses the modern navigator.mediaDevices.getUserMedia API and the ontrack event for handling incoming streams. Additionally, the demo includes logic to select a preferred video codec (defaulting to VP8) via setCodecPreferences when supported by the browser, and provides an end-to-end Selenium test to verify the connection lifecycle.

src/content/peerconnection/multiple/js · high confidence

Added a new code sample demonstrating how to establish a WebRTC peer connection between two browser tabs using the Broadcast Channel API. The example includes the HTML interface, JavaScript logic for signaling and media handling, CSS styling, and an end-to-end test verifying the connection and hang-up flow across tabs.

src/content/peerconnection/channel · high confidence

A new interactive demo page has been added to the WebRTC samples to illustrate how to configure camera constraints and monitor peer connection statistics. Users can now adjust minimum and maximum video dimensions (up to 4K resolution) and frame rates via sliders, then apply these settings using the 'Get media' button. The page also includes controls to establish a local peer connection and toggle periodic updates of sender and receiver statistics, helping developers understand how constraints affect transmission bitrate and connection performance.

src/content/peerconnection/constraints · high confidence

Added a new data transfer demo in src/content/datachannel/datatransfer/js that allows users to send configurable amounts of data (up to 64 MB) over a WebRTC DataChannel, featuring progress tracking, throughput calculation, and a workaround for buffered amount low events. Included an end-to-end test (test.js) using Selenium WebDriver to verify that the demo successfully transfers the specified amount of data.

src/content/datachannel/datatransfer/js · high confidence

A new interactive demo page has been added to the Peer connection samples section, allowing users to test and observe the behavior of ICE restarts in WebRTC connections. The page includes controls to start a connection, initiate a call, manually trigger an ICE restart, and hang up, while displaying local and remote candidate IDs to help visualize the restart process.

src/content/peerconnection/restart-ice · high confidence

A new MediaRecorder demo has been added to the WebRTC samples, allowing users to record both camera and screen-share streams. The interface includes controls to start recording, play back, download, or upload the recorded file locally. It features a dropdown for selecting recording codecs, an option to enable echo cancellation, and support for screen sharing via getDisplayMedia.

src/content/getusermedia/record · high confidence

A new sample page has been added that demonstrates using a peer connection stream as input to the Web Audio API. The demo allows users to capture local video, establish a peer connection, and visualize the audio stream, with support for modern WebKit browsers via the playsinline attribute on video elements.

src/content/peerconnection/webaudio-output · high confidence

Added a new sample page at src/content/insertable-streams/webgpu that demonstrates rendering multiple video streams to a canvas using the WebGPU API and MediaStreamTrack insertable streams. The sample allows users to choose between processing the rendering on the main thread or offloading it to a Web Worker, providing a concrete example of integrating WebGPU for custom video processing in WebRTC applications.

src/content/insertable-streams/webgpu · high confidence

A new interactive sample has been added to demonstrate sending text messages between two peers over a WebRTC data channel. The sample uses a LitElement-based UI to simulate a local and remote peer, allowing users to connect, send messages, and view incoming text in real-time.

src/content/datachannel/messaging · high confidence

A new interactive demo has been added to the WebRTC samples collection that allows users to generate and transfer data via WebRTC data channels. The sample includes an HTML interface with controls to specify the amount of data to send (in MB), a checkbox to toggle ordered mode, and progress bars to monitor send and receive status. It also includes a warning for users selecting very large values to prevent potential memory issues.

src/content/datachannel/datatransfer · high confidence

A new sample application has been added to demonstrate file transfer over WebRTC data channels. The interface allows users to select a file and send it, with real-time visual feedback provided by HTML5 progress elements for both send and receive operations. Additionally, the sample displays bitrate statistics to help users monitor transfer performance.

src/content/datachannel/filetransfer · high confidence

Added a new interactive sample in the peerconnection directory that utilizes the requestVideoFrameCallback API to visualize real-time video performance. The sample provides four live graphs tracking local capture delay, network delay, render delay, and processing time for both local and remote video streams, allowing users to observe how these metrics fluctuate during a peer connection.

src/content/peerconnection/per-frame-callback · high confidence

Added two new interactive code samples under the getUserMedia section: a canvas snapshot demo that draws video frames to a canvas element, and a CSS filters demo that applies visual effects (blur, grayscale, invert, sepia) to the live video stream. Both samples use the latest WebRTC adapter and support mobile playback via the playsinline attribute.

src/content/getusermedia/filter · high confidence

Two new interactive samples have been added to the WebRTC code samples library. The 'Multiple peer connections' sample demonstrates how to establish and manage several simultaneous RTCPeerConnection instances within a single application, while the 'Peer connection: states' sample provides a visual dashboard that displays the signaling, ICE, and connection states for two peer connections in real time. Both samples include UI controls for starting, calling, and hanging up, and are designed to work with modern browsers by including the playsinline attribute for video elements.

src/content/peerconnection/states · high confidence

A new sample page has been added to demonstrate real-time audio processing using the experimental insertable streams API. The page records audio from a microphone, applies a low-pass filter, and plays it back, allowing users to inspect the processing pipeline and adjust the filter cutoff via the browser console.

src/content/insertable-streams/audio-processing · high confidence

A new interactive demo has been added to the WebRTC samples collection that allows users to measure the volume of a local media stream using WebAudio. The sample displays three distinct volume metrics—instant, slow (averaged), and clip levels—via HTML meter elements, helping developers visualize audio input levels in real-time.

src/content/getusermedia/volume · high confidence

Added a new interactive example that demonstrates how to control camera exposure settings using the MediaStreamTrack API. The demo allows users to open their camera and adjust supported properties such as exposure mode, exposure time, exposure compensation, brightness, and white balance mode via UI controls, with changes applied in real-time using applyConstraints.

src/content/getusermedia/exposure · high confidence

A new demo page has been added that captures a WebGL teapot rendered on a canvas element using the captureStream() API and records it via the MediaRecorder API. To ensure compatibility with the latest WebKit browser changes, the output video element now includes the playsinline attribute, allowing the recorded video to play inline rather than forcing fullscreen playback.

src/content/capture/canvas-record · high confidence

A new sample demonstrating how to capture a WebGL canvas stream via captureStream() and transmit it over a WebRTC peer connection has been added. The demo includes specific fixes for browser autoplay policies by adding muted and playsinline attributes to the video element, and it detects and displays a message when autoplay is blocked. It also utilizes the latest adapter library from GitHub to ensure compatibility across browsers.

src/content/capture/canvas-pc · high confidence

Added a new interactive demo page that illustrates how to use MediaStreamTrack content hints to guide video encoding. The sample captures a video stream, clones it, and transmits it via two separate PeerConnections with limited bandwidth (50kbps). It applies 'motion' and 'detail' content hints to the tracks to demonstrate how the encoder prioritizes either temporal smoothness or spatial detail, allowing users to compare the visual quality trade-offs in real-time.

src/content/capture/video-contenthint · high confidence

A new 'getUserMedia: output device selection' demo has been added to the samples collection. It allows users to select specific audio output devices independently for different media sources, including live getUserMedia streams (video and audio) and local media files. The demo requires Chrome 49+ or localhost/HTTPS and includes playsinline attributes for better mobile compatibility.

src/content/devices/multi · high confidence

A new demo page has been added at src/content/capture/video-pc that captures a video stream using the captureStream() method and transmits it via a WebRTC peer connection. The implementation uses the latest adapter library from GitHub, includes playsinline attributes for WebKit compatibility, and exposes local and remote peer connection instances for console inspection.

src/content/capture/video-pc · high confidence

Added a new code sample demonstrating how to process video data using a Web Worker. The demo captures a camera stream, converts it into a WHATWG Stream of ImageData objects via a canvas, and passes this stream to a worker process. The worker pipes the data through a TransformStream and returns the result, which is then rendered back to the page. This sample highlights the use of transferable streams for off-main-thread video processing, noting that it requires Chrome 76+ with experimental features enabled.

src/content/capture/worker-process · high confidence

A new sample demonstrating a WebRTC peer connection relay scenario has been added to the samples repository. The entry point (index.html) and associated styles (main.css) provide a user interface with video elements, controls for starting and inserting relays, and an optional audio toggle. The implementation leverages the latest adapter library and includes specific attributes like playsinline and muted to ensure compatibility with modern browsers, particularly WebKit.

src/content/peerconnection/multiple-relay · high confidence

Added a new interactive code sample in the peerconnection directory that demonstrates the \alwaysNegotiateDataChannels\ RTCPeerConnection configuration option. The sample allows users to toggle a checkbox to enable this setting, showing how it prevents video freezes during renegotiation (specifically when stopping a transceiver) in supported browsers, compared to the default behavior where freezes may occur.

src/content/peerconnection/always-negotiate-datachannels · high confidence

Added a new code sample in the datachannel section that establishes an RTCDataChannel connection between two browser tabs using the Broadcast Channel API for signaling. The sample includes the HTML interface, CSS styling, and JavaScript logic to send and receive text messages across tabs, along with a Selenium-based test to verify the connection and message exchange.

src/content/datachannel/channel · high confidence

A new interactive sample page has been added at src/content/devices/input-output that allows users to enumerate available audio, video, and audio output devices using mediaDevices.enumerateDevices() and select specific sources for getUserMedia(). The page includes dropdowns for audio input, audio output, and video sources, and uses the playsinline attribute on the video element for better mobile compatibility.

src/content/devices/input-output · high confidence

A new demo has been added to the WebRTC samples that captures a video stream from one HTML5 video element and pipes it into another using the captureStream() API. The sample includes the necessary HTML structure and JavaScript logic to demonstrate this specific video-to-video capture workflow.

src/content/capture/video-video · high confidence

The resolution demo now supports requesting video streams at 180p, QVGA, VGA, HD, Full HD, television 4K (3840x2160), cinema 4K (4096x2160), and 8K resolutions, with buttons to trigger each. It includes a camera selector dropdown to choose between available video input devices, displays actual video dimensions in real-time, and allows pausing the self-view. The demo also enforces aspect and size locks via input controls and provides error messaging for getUserMedia failures.

src/content/getusermedia/resolution/js · high confidence

The getDisplayMedia sample has been updated to request both audio and video tracks, allowing users to capture system audio alongside their screen. It also introduces a UI control for selecting the specific display surface to share (e.g., a specific monitor or the entire screen), with logic to pass this preference to the browser. Additionally, the script now listens for the 'ended' event on the video track to detect when the user stops sharing via the browser's native UI, providing feedback and re-enabling the start button.

src/content/getusermedia/getdisplaymedia/js · high confidence

The MediaRecorder demo now includes dedicated CSS styles for its interface elements. This adds specific styling for buttons, including a new \.file-upload\ class for the local file upload feature, and ensures proper layout for video elements using CSS variables for responsive sizing. The styles also handle spacing for paragraphs and hide the default file input element to support the custom upload button design.

src/content/getusermedia/record/css · high confidence

Added CSS styles for the Web Audio output demo, defining layout and sizing for video and canvas elements to ensure correct display dimensions, along with button styling and responsive adjustments for small screens.

src/content/peerconnection/webaudio-output/css · high confidence

The video processing sample has been reorganized to include new source options alongside the existing camera and video file inputs. Users can now select a Canvas source, which renders scrolling text from the WebRTC explainer, and Peer Connection sources, which allow video to be piped through a local RTCPeerConnection to simulate remote participant input or output. These additions are supported by new implementation files (canvas-source.js, peer-connection-source.js, peer-connection-sink.js, peer-connection-pipe.js) and integrated into the main pipeline and UI.

src/content/insertable-streams/video-processing/js · high confidence

The Web Audio output peerconnection sample has been updated to include a visualizer for the remote video stream. When a remote video track is received, the application now displays the video in the remote video element and simultaneously renders a real-time audio waveform visualization on the canvas using the StreamVisualizer component, allowing users to see both the video and the audio data processing simultaneously.

src/content/peerconnection/webaudio-output/js · high confidence

A change to existing behaviour in src/content/devices/multi/video — 1 commit, 3 files.

src/content/devices/multi/video · medium confidence · unverified

A change to existing behaviour in src/video — 2 commits, 3 files.

src/video · medium confidence · unverified

A new stylesheet (main.css) has been added to the canvas-video capture demo to ensure proper layout and aspect ratio for the canvas and video elements. The styles define a 45% width with a 3:4 aspect ratio (height calculated as width \* 0.75) and apply object-fit: cover to the video element, resolving previous aspect ratio and margin issues in the demo UI.

src/content/capture/canvas-video/css · high confidence

The upgrade sample now includes a dedicated CSS file that styles the user interface, specifically setting button widths and margins, and defining responsive sizing for video elements using CSS variables to maintain aspect ratios.

src/content/peerconnection/upgrade/css · high confidence

The audio capture demo has been updated to use modern browser standards, specifically replacing legacy methods with navigator.mediaDevices.getUserMedia and setting the audio element's srcObject property directly. Error handling has been improved to display specific error messages and names in the DOM, and the code has been refactored to ES6 syntax with strict mode enabled.

src/content/getusermedia/audio/js · high confidence

The audio peerconnection sample has been updated to use modern WebRTC APIs, including navigator.mediaDevices.getUserMedia and the ontrack event, while replacing legacy constraints with offerOptions. It now supports explicit codec selection via setCodecPreferences where available and allows users to visualize audio levels, bitrate, and packet rates through real-time graphs. The sample also includes options to configure Opus DTX and FEC, and provides a test suite to verify connection establishment.

src/content/peerconnection/audio/js · high confidence

The audio-only getUserMedia demo now includes a visible warning advising users to use headphones to prevent audio feedback when playing the stream. Additionally, the page displays any errors encountered during the getUserMedia call in a dedicated error message area, and utilizes the latest adapter library to ensure compatibility across browsers.

src/content/getusermedia/audio · high confidence

The basic data channel sample now includes an origin trial token to experimentally enable the SNAP feature in Chrome 151–156, and provides instructions for inspecting SCTP traffic via Chrome logging and text2pcap.

src/content/datachannel/basic · high confidence

The canvas peer connection sample has been updated to use ES6 syntax and modern WebRTC APIs. The code now uses the \ontrack\ event instead of the deprecated \onaddstream\ to handle incoming remote streams, and utilizes \addTrack\ for sending media instead of older methods. Additionally, the sample includes logic to detect and display autoplay issues in the video element, improving the user experience when browsers block automatic playback.

src/content/capture/canvas-pc/js · high confidence

The canvas-based getUserMedia sample has been updated to dynamically match the canvas width and height to the actual video track dimensions when the capture button is clicked, ensuring the drawn image is not stretched or cropped. Additionally, the sample now uses the modern \navigator.mediaDevices.getUserMedia\ API with Promise-based error handling, providing more detailed error information (message and name) in the console.

src/content/getusermedia/canvas/js · high confidence

The end-to-end encryption sample page at src/content/peerconnection/endtoend-encryption now automatically redirects users to the new location at src/content/insertable-streams/endtoend-encryption, reflecting the sample's move to the insertable streams content area.

src/content/peerconnection/endtoend-encryption · high confidence

The end-to-end encryption sample has been reorganized to support both the legacy Insertable Streams API and the newer RTCRtpScriptTransform, automatically preferring the latter when available. It now allows users to specify preferred audio (Opus) and video (VP8) codecs, with logic to enforce these preferences via setCodecPreferences where the browser supports it. The sample also includes an end-to-end test suite using Jest and Selenium to verify connection establishment and encrypted media playback.

src/content/insertable-streams/endtoend-encryption/js · high confidence

The Munge SDP sample has been refactored to use ES6 syntax and updated to use the latest adapter library from GitHub. The user interface now includes a playsinline attribute on video elements to support modern WebKit browsers, and the layout has been standardized with consistent meta and link elements. A prominent note warns users that SDP munging is a nonstandard, unsupported feature that may not work as expected. The sample also adds data channel support and removes previous audio/video device selectors, simplifying the interaction model.

src/content/peerconnection/munge-sdp · high confidence

The negotiate-timing demo in src/content/peerconnection/negotiate-timing/js has been updated to allow users to specify a preferred video codec (e.g., 'video/VP8') via the \preferredVideoCodecMimeType\ variable and to adjust the number of video transceivers during renegotiation. These changes enable more detailed measurement of negotiation performance under different codec and stream configurations, with results logged to the screen for analysis.

src/content/peerconnection/negotiate-timing/js · high confidence

The PeerConnection states sample has been updated to display the new connectionState property alongside the existing signaling and ICE states. This change reflects the WebRTC API evolution, providing users with a more comprehensive view of the connection lifecycle in the demo. The sample also includes end-to-end tests to verify the correct state transitions.

src/content/peerconnection/states/js · high confidence

The video sample page now redirects users to the new video-processing location, ensuring that visitors accessing the old URL are automatically forwarded to the updated content.

src/content/insertable-streams/video · high confidence

The getusermedia source page now redirects users to the input-output samples page, ensuring that visitors accessing the old URL are automatically directed to the updated location for device selection examples.

src/content/getusermedia/source · high confidence

The getUserMedia (gum) demo has been updated to use ES6 syntax and modern WebRTC APIs. Specifically, the video stream is now attached to the \<video\> element via the srcObject property instead of legacy methods, and error handling has been improved to distinguish between OverconstrainedError and NotAllowedError conditions. The implementation also includes a new Selenium-based test suite to verify that the camera stream opens correctly.

src/content/getusermedia/gum/js · high confidence

The peer connection sample in src/content/peerconnection/pc1 has been refactored to use ES6 syntax and updated with a modernized UI, including standardized meta and link elements. The HTML now includes playsinline attributes on video elements to support latest WebKit changes, and the sample uses the latest adapter library from GitHub. Additionally, the sample removes the sdpSemantics configuration option, simplifying the peer connection setup for users.

src/content/peerconnection/pc1 · medium confidence

The peerconnection sample code in src/content/peerconnection/pc1/js has been updated to use modern ES6 syntax and Promises, replacing older callback-based patterns. The sample now uses the standard navigator.mediaDevices.getUserMedia API and the ontrack event for handling remote streams, ensuring compatibility with current browser standards. Additionally, end-to-end tests have been added to verify that the peer connection can be established and torn down correctly.

src/content/peerconnection/pc1/js · high confidence

The repository has been reorganized to improve developer experience and code quality. A new index.html serves as the main landing page for the WebRTC samples, replacing the previous README-based navigation. Documentation has been standardized with new CONTRIBUTING.md and LICENSE.md files, and the README has been updated to reflect the new local development workflow using npm. Additionally, code style enforcement has been modernized by introducing .eslintrc.js (extending Google standards) and .stylelintrc, replacing previous linting setups, while .gitignore and .npmrc have been updated to support the new tooling.

(repo-wide) · high confidence

The getUserMedia resolution sample has been updated to include buttons for selecting 180p, 360p, QVGA, VGA, HD, Full HD, Television 4K, Cinema 4K, and 8K resolutions. The interface now features a slider to adjust video width, checkboxes to lock the video size and aspect ratio, and a checkbox to pause the self-view. Additionally, the video element includes the playsinline attribute to support latest WebKit changes.

src/content/getusermedia/resolution · high confidence

The constraints sample has been rewritten to use modern, spec-compliant WebRTC APIs. It now uses \navigator.mediaDevices.getUserMedia\ with proper error handling, \RTCPeerConnection.addTrack\ and \ontrack\ instead of the deprecated \addStream\/\onaddstream\, and \srcObject\ for video element binding. The UI includes controls for video width, height, and frame rate constraints, and displays real-time stats for both local and remote peers.

src/content/peerconnection/constraints/js · high confidence

The SDP munging demo has been refactored to use modern WebRTC standards and JavaScript syntax. It now uses \navigator.mediaDevices.getUserMedia\ for media capture and the \ontrack\ event instead of the deprecated \onaddstream\ for receiving remote streams. The code has been updated to ES6, and the SDP manipulation logic now explicitly handles CRLF line endings to ensure compatibility with RFC 4566 parsers. Additionally, the sample now includes DataChannel support and is accompanied by Selenium-based tests to verify the connection lifecycle.

src/content/peerconnection/dtmf/js, src/content/peerconnection/munge-sdp/js · high confidence

The Trickle ICE sample page has been updated to help users diagnose connection issues more effectively. It now displays the 'url' and 'relayProtocol' fields for ICE candidates when present, providing more granular network information. Additionally, the sample includes support for detecting TURN authentication failures via the onicecandidateerror event, allowing users to identify when wrong credentials are being used. The interface also features a checkbox to explicitly acquire microphone/camera permissions and includes explanatory notes clarifying that candidate gathering errors are not necessarily fatal.

src/content/peerconnection/trickle-ice · high confidence

The trickle-ice demo now saves and restores ICE server configurations in local storage, so users do not need to re-enter servers after a page reload. Additionally, the demo supports acquiring an audio stream via getUserMedia when the corresponding checkbox is enabled, allowing users to test ICE candidate gathering with an active media track. The interface also disables the gather button during the gathering process to prevent duplicate requests.

src/content/peerconnection/trickle-ice/js · high confidence

The PR-answer peerconnection sample has been refactored to use modern JavaScript (ES6) and updated Web APIs. It now uses \navigator.mediaDevices.getUserMedia\ for media capture and \srcObject\ for video element binding, replacing legacy methods. The code also adopts \ontrack\ for handling remote streams instead of the deprecated \onaddstream\, and implements proper error callbacks for session description and ICE candidate operations to improve reliability and debugging.

src/content/peerconnection/pr-answer/js · high confidence

The canvas-pc demo now uses CSS custom properties to calculate the width and height of canvas and video elements, ensuring they maintain a consistent 4:3 aspect ratio and are displayed side-by-side with appropriate margins. The autoplay video element is hidden by default to prevent immediate playback issues.

src/content/capture/canvas-pc/css · high confidence

The create-offer sample has been updated to allow users to specify the number of audio tracks to include in the generated SDP offer. A new input field lets users set the count of audio tracks, which are then added to the peer connection before calling createOffer, enabling testing of scenarios involving multiple audio streams.

src/content/peerconnection/create-offer/js · high confidence

The create-offer sample page now loads the WebRTC adapter library directly from the GitHub-hosted latest release (adapter-latest.js) instead of a local or versioned copy. This ensures the sample uses the most up-to-date polyfills and compatibility fixes provided by the adapter project, improving reliability across different browsers and WebRTC API versions.

src/content/peerconnection/create-offer · high confidence

The CSS for the multi-device selection interface has been updated to improve the layout of source devices and media elements. Audio elements now span the full width with consistent spacing, while source device containers are arranged in a two-column float layout. Video elements are styled with a black background and a fixed height of 234px, and select elements have adjusted margins for better alignment.

src/content/devices/multi/css · high confidence

The Video Analyzer sample has been reorganized into a new directory structure, introducing a dedicated HTML page, CSS styles, and JavaScript logic. The updated interface allows users to start a local video stream, initiate a peer connection, and analyze the encoded video track using Insertable Streams. Key features include real-time display of video metrics (size, keyframe/interframe counts, duplicate count) in the UI and the ability to dynamically change the local video resolution (Small, VGA, HD) via new buttons.

src/content/insertable-streams/video-analyzer · high confidence

The video analyzer page at src/content/peerconnection/video-analyzer now redirects users to the new location at src/content/insertable-streams/video-analyzer, ensuring access to the tool after its relocation.

src/content/peerconnection/video-analyzer · high confidence

The video-to-video capture demo in the src/content/capture/video-video/js directory has been updated to initialize the stream capture only after the source video element fires the 'canplay' event. This ensures that the video data is ready before captureStream() is called, fixing issues where streaming might fail or produce empty frames in browsers like Firefox. The code also prefers the standard captureStream() API over the legacy mozCaptureStream() when available.

src/content/capture/video-video/js · high confidence

The volume meter sample now uses the AudioWorklet API for audio processing, replacing the legacy ScriptProcessorNode approach. This change introduces a new \volume-meter-processor.js\ module to handle real-time volume calculation and updates the main logic to manage the AudioContext lifecycle more robustly, including proper cleanup via \AudioContext.close()\ and error handling for MediaStream constraints.

src/content/getusermedia/volume/js · high confidence

The Web Audio input peerconnection sample has been refactored to use modern browser APIs, replacing deprecated methods with current standards. Media capture now uses \navigator.mediaDevices.getUserMedia\ and returns Promises, while peer connection signaling utilizes \createOffer\/\createAnswer\ with Promises and \addTrack\/\ontrack\ instead of the legacy \addStream\/\onaddstream\. Additionally, the sample now manages media tracks individually via \track.stop()\ rather than stopping entire streams, and the Web Audio filter logic has been updated to use \setValueAtTime\ for frequency changes.

src/content/peerconnection/webaudio-input/js · high confidence

The WebGL Teapot demo files, including the camera controller, matrix utilities, and rendering logic, have been moved to a single location at src/js/third\_party/webgl\_teapot. This change resolves path issues in the webgl-based samples, ensuring the demo loads correctly without broken relative references.

_src/js/third\_party/webgl\teapot · high confidence

The WebRTC Network Limiter extension has been migrated to Manifest V3 and updated to version 0.2.1.4, ensuring compatibility with modern Chrome versions. A new Options page has been added, allowing users to configure WebRTC IP handling policies (such as using default public/private interfaces or disabling non-proxied UDP) via a dedicated UI rather than Chrome's internal settings. The extension now explicitly requires Chrome version 42.0.2311.135 or higher and uses the 'privacy' permission to manage these settings.

src/content/extensions/multipleroutes · high confidence

The getUserMedia demo page now includes the playsinline attribute on the video element, enabling video playback to work correctly on iOS devices. Additionally, a warning message has been added to alert users about potential audio feedback if they are not using headphones, and an error message container is now present to display any stream errors.

src/content/getusermedia/gum · high confidence

A new CSS file has been added to style the volume meter UI components. It defines layout and spacing for meter labels and values, sets the width of the meter elements, and applies specific colors to indicate different audio levels: red for clipping, yellow for slow average, and green for instant volume.

src/content/getusermedia/volume/css · high confidence

Added WebRTC interop test infrastructure; Added interop test for establishing WebRTC connections between two browsers; Basic data channel sample and test.

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 49 → 49 (+0.4)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 52 → 52 (+0.0)
• Architecture 99 → 86 (-13.1)
• Maturity 68 → 68 (+0.0)
• Readiness 58 → 58 (+0.0)
• Security 82 → 81 (-0.4)
• Accessibility 36 → 36 (+0.1)
• Performance 100 (new)

• Documentation: no licence statement (README.md)
• Off-boarding risk: anonymized user #1

• Medium: security finding (details withheld)
• Off-boarding risk: anonymized user #1
• Projects may be oversized for their cohesion

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

webrtc/samples was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.