How to record Google Meet and Zoom calls with dual audio using the HTML5 MediaRecorder API

Recording virtual meetings like Google Meet or Zoom can be challenging due to limitations such as short recording times, required software installations, or needing the host's permission to record local audio. This guide explains how to create a browser-native screen recorder using the HTML5 MediaRecorder API and getDisplayMedia to capture both the meeting audio and the user's microphone input at the same time.

The process involves three key Web APIs: navigator.mediaDevices.getDisplayMedia() to capture screen/tab video and system/tab audio, navigator.mediaDevices.getUserMedia() to capture the user's local microphone, and the AudioContext & MediaStreamAudioDestinationNode to mix both audio streams into a single track. The MediaRecorder then encodes the video and combined audio into a downloadable WebM/MP4 blob.

The JavaScript function 'startMeetingRecording()' starts by capturing the screen video and tab/system audio using navigator.mediaDevices.getDisplayMedia(). Next, it captures the local microphone audio using navigator.mediaDevices.getUserMedia(). Both audio sources are mixed together using Web Audio API, creating a single audio stream.

The video track and mixed audio stream are then combined into a new MediaStream. This combined stream is passed to a new MediaRecorder instance, which records the data and saves it as a WebM file. The file is then downloaded as 'meeting-recording.webm'. All of this occurs locally within the browser, with no data uploaded to external servers.