Web capture is the browser feature that lets a person choose a tab, window, or monitor and share its contents with a website as a live media stream. Developers use navigator.mediaDevices.getDisplayMedia() to request that stream, then preview it, record it, or send it to other people with WebRTC. The browser—not the website—controls the source picker and permission decision.
What web capture means
In this context, web capture means browser display capture: a user-authorized capture of a display surface that a web app receives as a MediaStream. The source may be a browser tab, an application window, or an entire monitor, depending on the browser and operating system. The Screen Capture API’s main entry point is MediaDevices.getDisplayMedia(). MDN’s API reference describes it as prompting the user to select and grant permission to capture display contents as a media stream.
This is different from taking a screenshot of a webpage on a server. Display capture is interactive and produces a live video track; the selected pixels can change while sharing continues. It is also different from a page capturing its own DOM or canvas: with display capture, the user chooses what surface is shared through browser UI.
How developers use a captured stream
A typical flow begins with a user action, such as clicking a “Share screen” button. The browser presents a source picker and permission prompt. If the user chooses a source, the promise resolves to a stream, normally with a video track and optionally audio. The application can then:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
- Show a local preview in an
<video>element. - Record locally with
MediaRecorder. - Send the video track to remote participants using WebRTC.
- Pass the stream to another supported media-processing pipeline.
When sharing ends, either because the user stops it in browser chrome or the application ends the session, the app should update its interface and stop the captured tracks it owns.
Build a basic screen-sharing preview
The following example requests display capture after a button click, previews the selected source, and offers an application-level stop button. Serve the page from a secure context such as HTTPS or localhost, and test the exact browser and operating system combination your users will run.
<button id="start">Share a tab, window, or screen</button>
<button id="stop" disabled>Stop sharing</button>
<video id="preview" autoplay playsinline muted></video>
<p id="status" role="status">Not sharing</p>
<script>
const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');
const video = document.querySelector('#preview');
const status = document.querySelector('#status');
let stream;
function stopSharing() {
if (!stream) return;
stream.getTracks().forEach(track => track.stop());
stream = undefined;
video.srcObject = null;
startButton.disabled = false;
stopButton.disabled = true;
status.textContent = 'Not sharing';
}
startButton.addEventListener('click', async () => {
if (!navigator.mediaDevices?.getDisplayMedia) {
status.textContent = 'Display capture is not available in this browser.';
return;
}
try {
// Call directly from the click handler so transient user activation is available.
stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: false
});
video.srcObject = stream;
startButton.disabled = true;
stopButton.disabled = false;
status.textContent = 'Sharing is active';
// The browser can end capture from its own UI; keep the app in sync.
stream.getVideoTracks()[0]?.addEventListener('ended', stopSharing, { once: true });
} catch (error) {
if (error.name === 'NotAllowedError') {
status.textContent = 'Sharing was cancelled or permission was denied.';
} else {
status.textContent = `Could not start sharing: ${error.name}`;
}
}
});
stopButton.addEventListener('click', stopSharing);
</script>The stream remains local in this example: setting srcObject only previews it in the current page. Muting the preview avoids audio feedback; it does not change what the capture API requested. If you want audio, request it and handle the possibility that no audio track is returned. Audio availability and source choices vary by browser and platform.
Record the stream
To create a local recording, pass the stream to MediaRecorder. A minimal pattern is:
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.addEventListener('dataavailable', event => {
if (event.data.size) chunks.push(event.data);
});
recorder.addEventListener('stop', () => {
const recording = new Blob(chunks, { type: recorder.mimeType || 'video/webm' });
const link = document.createElement('a');
link.href = URL.createObjectURL(recording);
link.download = 'screen-recording.webm';
link.click();
URL.revokeObjectURL(link.href);
});
recorder.start();
// Later, in response to a stop action:
recorder.stop();For production, check MediaRecorder.isTypeSupported() before choosing a MIME type, handle recorder errors, and decide how to manage large recordings. A long capture can consume substantial memory if every chunk is retained until the end.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Send the stream with WebRTC
For a live call or remote screen share, add the video track to an existing RTCPeerConnection and complete the application’s normal signaling and connection setup:
for (const track of stream.getTracks()) {
peerConnection.addTrack(track, stream);
}The remote participant must receive the negotiated track through the peer connection. This snippet only attaches tracks; it does not implement signaling, ICE exchange, reconnection, participant authorization, or call controls. Keep the stop-sharing action connected to the peer connection lifecycle so ending capture also ends or replaces the transmitted track.
Options, audio, and source selection
The options object can express capture preferences, but it does not let a site silently select or force a source. The browser must show its own picker, and the user decides what to share.
- Video: Request video for the display stream. The browser’s selected surface is the source; use supported constraints to shape the resulting track where appropriate.
- Audio: Audio is optional. Whether tab, window, or system audio can be selected depends on browser and operating-system support. Treat an audio track as a capability to check after capture, not a guarantee.
- Surface: Available picker choices and any surface-selection preferences are browser-dependent. Design the UI to work whether the person picks a tab, window, or full screen.
- Ending capture: Listen for the video track’s
endedevent because the user can stop sharing in browser UI at any time.
MDN marks getDisplayMedia() as having limited availability: it is not implemented in some widely used browsers. Feature-detect the method and test the browsers, versions, and platforms you support rather than assuming universal behavior. The MDN reference tracks its browser support and API details.
Permission, security, and privacy
Display capture is deliberately user-mediated. It is available only in secure contexts in supporting browsers, requires recent user interaction, and invokes browser-controlled permission and source-selection UI. A site cannot silently enumerate the user’s displays or force a particular tab, window, or monitor. Browsers also indicate when capture is active.
Rank #3
The main privacy risk is not a hidden browser permission; it is a user sharing more than intended. A full monitor can expose notifications, password-manager windows, private conversations, or customer records. A selected logical surface may also include content that is not currently visible in the way the user expects. Reduce the chance of accidental disclosure:
- Explain whether the app needs a tab, a window, or an entire display before opening the picker.
- Show a preview and a persistent, clear sharing state while capture is active.
- Provide an obvious stop control in the page and respond when the browser ends sharing.
- Stop all tracks when the user ends the session, navigates away from the workflow, or the call closes.
- Avoid recording or transmitting the stream unless that behavior is clearly disclosed and needed.
Choosing display capture, a screenshot, or another approach
Use the mechanism that matches the output the user actually needs:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →| Need | Suitable approach | Important distinction |
|---|---|---|
| Live view of a user-selected tab, window, or monitor | getDisplayMedia() |
Interactive permission flow; produces a live stream. |
| Local video recording of what the user selected | getDisplayMedia() plus MediaRecorder |
Recording format support and storage strategy need to be handled. |
| Remote screen sharing in a call | getDisplayMedia() plus WebRTC |
Requires signaling, transport, and controls beyond capture itself. |
| Automated still image of a public webpage without asking a visitor to pick a screen | A screenshot API or browser automation tool | Captures a webpage as an image or document rather than a user-authorized live desktop stream. |
For the last case, ScreenshotNeo is a website screenshot API and MCP server for developers, not a replacement for live display sharing. It can return a webpage screenshot or PDF from a request, which is useful when you need a repeatable page capture rather than a participant’s live screen.
Or skip the browser setup
If the task is to capture a webpage rather than share a person’s display, ScreenshotNeo takes one GET request:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request options. Its capture flow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 shots a month without a card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month with no card.
Troubleshooting common problems
The API is missing or the call fails immediately
Check that the page runs in a secure context and that navigator.mediaDevices.getDisplayMedia exists. An unsupported browser or insecure origin can prevent the request from working. Test on HTTPS or localhost and provide a useful fallback message for browsers without display capture.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallRank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The browser says permission was denied, or no stream is returned
The user may have cancelled the picker or declined permission. Do not retry in a loop or attempt to bypass the browser prompt. Explain the next action and let the user start again with a fresh click.
The request fails with a user-activation error
Call getDisplayMedia() directly from a user gesture such as a button click. Do not put unrelated asynchronous work before the request if it may consume transient activation.
There is no audio
Audio selection is optional and platform-dependent. Inspect stream.getAudioTracks() after the user selects a source, and continue gracefully if it is empty. Test tab, window, and system audio separately on the actual browser and operating systems you support.
The preview or remote share stops unexpectedly
The person may have ended sharing from browser UI. Listen for the video track’s ended event, clear the preview, update the status, and remove or replace the corresponding WebRTC sender track as appropriate.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →The recording is empty or cannot be played
Make sure the stream is active before starting the recorder, collect non-empty dataavailable chunks, and wait for the recorder’s stop event before building the Blob. Select a MIME type supported by the current browser; do not assume every browser produces the same recording format.
Performance and reliability considerations
Display capture adds a live video source, so the stream’s resolution and frame rate affect encoding, network use, and device load. For a local preview, avoid unnecessary parallel processing. For recording, consider writing chunks incrementally instead of retaining an unbounded array. For WebRTC, use the application’s media-quality controls and connection monitoring, and treat network quality separately from capture permission: a successfully acquired stream does not guarantee a stable remote connection.
Reliability also depends on clear lifecycle handling. Cover the states “not sharing,” “picker open,” “sharing,” “user stopped,” and “capture failed.” Stop tracks on session teardown, and account for the user closing a tab or changing the shared surface if the browser exposes the relevant control. Browser behavior and newer capture-control proposals can change; the stable approach is to rely on implemented browser behavior, feature-detect optional capabilities, and test your supported matrix.
Standards status and newer capture controls
The foundational browser workflow is getDisplayMedia() returning a user-selected stream. Newer proposals and control APIs—including Region Capture, Element Capture, and Captured Surface Control—address narrower or interactive control of captured content, but should not be treated as universally available baseline features.
The W3C Screen Capture document dated 16 July 2026 is a Working Draft. Its status says it is incomplete, may change substantially, and is not intended for implementation as a specification. Use browser documentation and compatibility data for features available to users today; treat draft material as evolving standards work. W3C Screen Capture Working Draft.
Frequently Asked Questions
Can a website start recording my screen without asking?
No. In supporting browsers, display capture requires a user-initiated request and browser-controlled source selection and permission. A site cannot silently choose a display surface.
Does getDisplayMedia() capture only the current webpage?
Not necessarily. The user chooses among the surfaces the browser offers, which can include a tab, a window, or a monitor.
Is web capture the same as taking a website screenshot?
No. Display capture creates a live stream of a user-selected surface. A website screenshot tool captures a webpage as a still image or PDF.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
