Screen Recorder

The Screen Recorder captures a full screen, application window, or browser tab directly from the browser. Depending on browser support and permissions, it can also include system audio and microphone input for quick tutorials, bug reproductions, product demos, class clips, design reviews, and support explanations without installing separate software. Before recording, users should check for private windows, notifications, passwords, customer data, or unrelated tabs, because the captured area is recorded exactly as selected. Processing is local and the resulting file can be downloaded afterward, but video quality, audio tracks, and available sources depend on the browser and operating system.

Capture starts with navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }), which returns a MediaStream containing one video track (the chosen screen, window, or tab) and optionally one audio track when the browser and source allow it. The user picks the surface in a native picker dialog, and the stream ends automatically when the user clicks the system Stop sharing button, which fires the track's ended event so the recorder can finalize the file. The encoded output is produced by the MediaRecorder API. Container and codec selection goes through MediaRecorder.isTypeSupported() against candidates like video/webm;codecs=vp9,opus, video/webm;codecs=vp8,opus, and on Safari video/mp4;codecs=avc1. ondataavailable fires periodically (or on stop), delivering Blob chunks that are concatenated into a single Blob with the recorded mimeType. videoBitsPerSecond and audioBitsPerSecond trade quality for file size, and a typical 1080p screencast at 4 Mbps VP9 lands around 30 MB per minute. When both system audio and microphone are requested, the page builds an AudioContext, wraps each MediaStreamTrack in a MediaStreamAudioSourceNode, and mixes them through a GainNode into a MediaStreamAudioDestinationNode. The merged audio track replaces the original streams before MediaRecorder starts, so the resulting WebM carries a single mixed Opus track instead of two separate ones. Browser support requires Chrome 72+, Firefox 66+, or Safari 13+; older browsers either refuse getDisplayMedia or omit the audio constraint.

• Capture API: navigator.mediaDevices.getDisplayMedia({ video, audio }) returns a MediaStream; the user picks screen/window/tab in a system dialog
• Encoder: MediaRecorder with isTypeSupported() probing video/webm;codecs=vp9,opus first, falling back to vp8 or H.264/AVC1 in MP4
• Chunked output: ondataavailable yields Blob slices that are concatenated and wrapped in a Blob of the negotiated mimeType
• Audio mixing: AudioContext + MediaStreamAudioSourceNode + GainNode + MediaStreamAudioDestinationNode merge system audio with the mic into one Opus track
• End-of-stream trigger: the video track's ended event fires when the user clicks the browser's Stop sharing bar, finalizing the recording
• Bitrate control: videoBitsPerSecond around 2.5-8 Mbps for 1080p; 4 Mbps VP9 is roughly 30 MB per minute
• Browser baseline: Chrome 72+, Firefox 66+, Safari 13+; tab audio capture only works in Chromium-based browsers with the Share tab audio checkbox