Screen Sharing a Single Tab With getViewportMedia or getDisplayMedia

When implementing screen-sharing applications in the browser, it is possible to ask/force the user to share a single browser tab. This can be achieved today in Chrome, Edge, and Opera by using the the preferCurrentTab constraint in getDisplayMedia(). Meanwhile, a new dedicated method called getViewportMedia() is being discussed.

What Is getViewportMedia?

getViewportMedia is a proposed extension to the Screen Capture API that allows capturing just the browser's current tab (viewport) without showing a source picker. Instead, it should only prompt the user for permission.

Implementation Status & Browser Support

Right now, no major browser has implemented getViewportMedia, as the specification is still in draft form. Some browsers are still exploring or tracking the feature (for example, Mozilla has an open bug about it), but nothing is supported in production.

• Editor's Draft URL: https://w3c.github.io/mediacapture-viewport/ (bleeding-edge version)
• Working Draft URL: https://www.w3.org/TR/mediacapture-viewport/ (more stable reference point)

What Can You Use Instead?

Currently, the most dependable option for capturing screen content is the getDisplayMedia() API, which:

• Prompts the user to select a screen, window, or tab.
• Works across most modern browsers (e.g., Chrome, Firefox, Safari).
• Requires user interaction for each request (there's no persistence).
• Is supported within secure contexts (https://, file://, localhost)

And, in selected browsers, when paired with preferCurrentTab:true, you can ask the user to share only the current tab (as shown in the image below).

It also:

• Prompts the user to Allow or Cancel (not to choose the surface)
• Allows sharing of tab audio

Unfortunately, it is only supported on Chrome & Edge 94+ and Opera 80+.

It is worth noting that older Chrome implementations only suggested the user to share the current tab by adding and pre-selecting a new This Tab option in the surface picker. The user could still choose a different surface.

Live Demo

You can test it using our getDisplayMedia demo, as preferCurrentTab is one of the available constraints you can play with. Just click on Change getDisplayMedia() constraints, enable the preferCurrentTab constraint, and set it to true before clicking the Share Screen button.

Code Example

Here's a simple example of using getDisplayMedia() with the preferCurrentTab:true constraint:

<button id="startCapture">Start Capture</button><br>
<video autoplay playsinline style="width: 600px; border: 1px solid black;"></video>

<script>
async function captureCurrentTab() {
  console.log("captureCurrentTab()")
  try {
    // Request screen capture with a hint to prefer the current tab
    const stream = await navigator.mediaDevices.getDisplayMedia({
      video:  true,
      preferCurrentTab: true, // Hint to prefer capturing the current tab
      audio: true // You can set to true if you want audio too
    });

    // Attach the captured stream to a video element for preview
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;
    videoElement.play();

    console.log('Screen capture started');
  } catch (err) {
    console.error('Error capturing screen:', err);
  }
}

document.querySelector('#startCapture').addEventListener('click', captureCurrentTab);
</script>