Using getDisplayMedia to record the screen, system or browser tab audio, and the microphone.

Made by the Pipe Recording Platform

This demo uses getDisplayMedia(), getUserMedia() and the MediaStream Recording API to record the screen, the system or tab audio AND your microphone.

When you click the Share Screen button, Chrome and Chromium based browsers may also offer the option to include system or tab audio on supported operating systems (see below).

To ensure both microphone and system audio are included in the final recording, the demo uses the Web Audio API to combine the two audio sources in real time. The microphone stream is captured using getUserMedia(), while the system or tab audio is captured as part of the screen stream via getDisplayMedia(). These two audio tracks are mixed together and merged with the video track into a single stream. This composed stream is then passed to a MediaRecorder object, which produces a single .webm file containing your screen video, microphone input, and system or tab audio, if available.