Code Monkey home page Code Monkey logo

prefer-current-tab's Introduction

Sites often wish to self-capture. For example, a slides deck application might wish to let the user stream the presentation to a virtual conference.

Calling getDisplayMedia offers the user a wide selection of possible capture-sources. What if the application really just wants the current tab? It could be hard for the user to hunt down the specific tab out of all the tabs they have open.

Ideally, the application would be able to present a confirmation-only dialog to the user - share the current tab, yes/no? Standardization efforts for this feature as getViewportMedia are underway.

However, getViewportMedia will be gated by (1) cross-origin isolation and (2) an opt-in header. That will limit adoption, at least initially.

We therefore extend getDisplayMedia in a way that allows the application to inform the browser that it prefers the current tab. getDisplayMedia currently accepts a single parameter of type MediaStreamConstraints (a dictionary). We extend that dictionary with a new member called preferCurrentTab. This new member is a boolean defaulting to false. When set to true, the browser presents the current tab as the most prominent option.

Sample code:

navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,
  preferCurrentTab: true,
});

And the resulting media picker is: Screen Shot 2021-06-09 at 15 29 40

This is an imperfect solution; a compromise between two needs:

  • Applications need a way to signal preference for the current tab. Possibly even exclusive need of the current tab.
  • getViewportMedia is a long way off, and the security requirements gating it will need a long time to gain widespread adoption.

Read the spec here.

prefer-current-tab's People

Contributors

eladalon1983 avatar yoavweiss avatar

Stargazers

Sean P. Myrick V19.1.7.2 avatar Ted Klingenberg avatar Jessica Claire Edwards avatar Mark Foltz avatar Stephanie Stimac avatar Rollin hossain avatar  avatar azu avatar  avatar

Watchers

James Cloos avatar Holger Jeromin avatar  avatar  avatar Sean P. Myrick V19.1.7.2 avatar

Forkers

seanpm2001

prefer-current-tab's Issues

"Tab" isn't perhaps the best spec language?

While I understand the goal of using tab in the name of the API vs. document, it might be worth considering some more generalised alternatives that can work in non-tab scenarios (e.g. PWAs). A few that come to mind:

  • preferCurrentContext
  • preferCurrentWindow
  • preferCurrentFrame (perhaps most accurate)

Thoughts?

Note relationship to requirements of Screen Capture

https://w3c.github.io/mediacapture-screen-share/#dom-mediadevices-getdisplaymedia says:

The user agent MUST let the end-user choose which display surface to share out of all available choices every time, and MUST NOT use constraints to limit that choice. Instead, constraints MUST be applied to the media chosen by the user, only after they have made their selection. This prevents an application from influencing the selection of sources, see § 5.3 Unconstrained Display Surface Selection for details.

While preferCurrentTab won't limit which display surfaces are possible to chose, it will influence which surface is easiest to chose.

In a literal reading I don't think there's a willful violation (which would be OK but not great) but it is still worth a note explaining how this fits together. Maybe link back to that spec and affirm that the requirement to not use constraints still applied, but that an influence of UI order is happening.

Extend README

Extend README. Recall Picasso and steal shamelessly from the original WICG thread.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.