
How We Added System Audio to Screen Recording
We already had screen recording with webcam overlay, drawing tools, and pause/resume. But when someone recorded a product walkthrough with background music or a tutorial with UI sounds, the recording was silent. The browser captured the screen but not the audio coming from it. The fix was surprisingly small — two constraints on one API call. But understanding why those constraints exist and how they interact with different browsers took more work than writing the code. The problem The getDisplayMedia() API lets web apps capture a user's screen. You can request audio alongside video: const stream = await navigator . mediaDevices . getDisplayMedia ({ video : true , audio : true , }); This works — sort of. The audio: true flag tells the browser you'd like audio, but the browser decides what that means. In Chrome, the share picker shows an "Also share tab audio" checkbox. If the user shares a tab, they get tab audio. If they share an entire screen or window, they might get nothing. The rea
Continue reading on Dev.to Webdev
Opens in a new tab



