Search code examples
audioweb-applicationsscreen-recording

Screen Recording with both headphone & system audio


I am trying to build a web-application with the functionality of screen-recording with system audio + headphone-mic audio being captured in the saved video.

I have been thoroughly googling on a solution for this, however my findings show multiple browser solutions where the above works so long as headphones are NOT connected, meaning the microphone input is coming from the system rather than headset.

In the case that you connect headphones, all of these solutions capture the screen without video-audio, and the microphone audio from my headset. So to re-clarify on this, it should have recorded video-audio from the video being played whilst recording, and the headset-mic audio also.

This is thoroughly available in native applications, however I am searching for a way to do this on a browser.

If there are no solutions for this currently that anybody knows of, some insight on the limitations around developing this would also really help, thank you.


Solution

  • Your browser manages the media input being received in the selected tab/window

    To receive media input, you need to ensure you have the checkbox Share Audio in the image below checked. However this will only record media-audio being played in your headphones, when it comes to receiving microphone audio, the opposite must be done i.e the checkbox should be unchecked, or merge the microphone audio separately on saving the recorded video

    https://slack-files.com/T1JA07M6W-F0297CM7F32-89e7407216