Made by the Pipe Recording Platform
This demo uses getDisplayMedia(), getUserMedia() and the MediaStream Recording API to record the screen, the system/tab sounds AND your microphone on Chrome.
When you click the “Share Screen” button, the browser may also offer the option to include system or tab audio. This is supported in browsers like Chrome. If you select that option, the demo captures the system audio directly from the screen stream.
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 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 the MediaRecorder, which produces a single .webm file containing your screen video, microphone input, and system or tab audio, if available.