Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new screen capture constraints and options #22733

Merged
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,10 @@ setFocusBehavior(focusBehavior)
### Exceptions

- `InvalidStateError` {{domxref("DOMException")}}
- : Thrown if the capture stream has been stopped, or if enough time has elapsed after the {{domxref("MediaDevices.getDisplayMedia()")}} `Promise` fulfills that the focus behavior has been finalized.
- : Thrown if:
- The capture stream has been stopped.
- The user chose to share a screen ({{domxref("MediaTrackSettings.displaySurface", "displaySurface")}} type `monitor`) rather than a `browser` tab or `window` — you can't focus a monitor. In this case the exception is thrown after the {{domxref("MediaDevices.getDisplayMedia()")}} `Promise` resolves.
- Enough time has elapsed after the {{domxref("MediaDevices.getDisplayMedia()")}} `Promise` fulfills that the focus behavior has been finalized.

## Examples

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ video {{domxref("MediaStreamTrack")}}, then checking the value of the returned
{{domxref("MediaTrackSettings.displaySurface", "displaySurface")}} object.

For example, if your app needs to know that the surface being shared is a monitor or
application—meaning that there's possibly a non-content backdrop—it can use code similar
window—meaning that there's possibly a non-content backdrop—it can use code similar
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure which non-content backdrop appears in a single window?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point; I've changed it so that it only applies to a fullscreen/monitor capture.

to this:

```js
Expand Down
5 changes: 3 additions & 2 deletions files/en-us/web/api/mediatrackconstraints/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -158,8 +158,6 @@ These constraints apply to the `video` property of the object passed into {{domx

- : A [`ConstrainDOMString`](#constraindomstring) which specifies the types of display surface that may be selected by the user. This may be a single one of the following strings, or a list of them to allow multiple source surfaces:

- `application`
- : The stream contains all of the windows of the application chosen by the user rendered into the one video track.
- `browser`
- : The stream contains the contents of a single browser tab selected by the user.
- `monitor`
Expand All @@ -170,6 +168,9 @@ These constraints apply to the `video` property of the object passed into {{domx
- {{domxref("MediaTrackConstraints.logicalSurface", "logicalSurface")}}
- : A [`ConstrainBoolean`](#constrainboolean) value which may contain a single Boolean value or a set of them, indicating whether or not to allow the user to choose source surfaces which do not directly correspond to display areas. These may include backing buffers for windows to allow capture of window contents that are hidden by other windows in front of them, or buffers containing larger documents that need to be scrolled through to see the entire contents in their windows.

- {{domxref("MediaTrackConstraints.suppressLocalAudioPlayback", "suppressLocalAudioPlayback")}}
- : A [`ConstrainBoolean`](#constrainboolean) value describing the requested or mandatory constraints placed upon the value of the {{domxref("MediaTrackSettings.suppressLocalAudioPlayback","suppressLocalAudioPlayback")}} constrainable property. This property controls whether the audio playing in a tab will continue to be played out of a user's local speakers when the tab is captured.

## Specifications

{{Specifications}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,19 @@ this is unnecessary since browsers will ignore any constraints they're unfamilia

## Value

`true`/`false`, or a [`ConstrainBoolean`](/en-US/docs/Web/API/MediaTrackConstraints#constrainboolean) object.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This confused me because "true/false" makes me think, is it a boolean or the strings? If it's a boolean why not just say that? But then it looks like ConstrainBoolean can also be just a boolean, right, so we could just say:

Suggested change
`true`/`false`, or a [`ConstrainBoolean`](/en-US/docs/Web/API/MediaTrackConstraints#constrainboolean) object.
A [`ConstrainBoolean`](/en-US/docs/Web/API/MediaTrackConstraints#constrainboolean) value.

?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, that is a bit less confusing. Updated.


If this value is a simple `true` or `false`, the user agent will
attempt to obtain media with local audio playback enabled or disabled as specified, if
possible, but will not fail if this can't be done. If, instead, the value is given as an
object with an `exact` field, that field's Boolean value indicates a required
setting for the noise suppression feature; if it can't be met, then the request will
possible, but will not fail if this can't be done.

If, instead, the value is given as a [`ConstrainBoolean`](/en-US/docs/Web/API/MediaTrackConstraints#constrainboolean) object
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here. It is always "given as a ConstrainBoolean" AFAICT.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated wording to suit.

object with an `ideal` field, that field's Boolean value indicates an ideal
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
object with an `ideal` field, that field's Boolean value indicates an ideal
object with an `ideal` field, that field's boolean value indicates an ideal

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated

setting for the local audio playback suppression feature; if it can't be met, then the request will
result in an error.

`exact` values are not permitted in constraints used in {{domxref("MediaDevices.getDisplayMedia()")}} calls, but they are in constraints used in {{domxref("MediaStreamTrack.applyConstraints()")}} calls.

## Examples

See {{SectionOnPage("/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints", "Example: Constraint exerciser")}} for an example.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are deprecating SectionOnPage: mdn/yari#6117 (comment)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But also this didn't seem to include an example of suppressLocalAudioPlayback?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

macro removed. I've also updated the example section to include a one-line example,

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ The below function sets up the constraints object specifying the options for the

```js
async function capture() {
let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
let displayMediaOptions = {
video: {},
const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
const displayMediaOptions = {
audio: {}
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,8 @@ The below function sets up the constraints object specifying the options for the

```js
async function capture() {
let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
let displayMediaOptions = {
video: {},
const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
const displayMediaOptions = {
audio: {}
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,18 @@ This allows the user total freedom to select whatever they want, within the limi
```js
const gdmOptions = {
video: {
cursor: "always"
cursor: "always",
displaySurface: "window"
},
audio: {
echoCancellation: true,
noiseSuppression: true,
sampleRate: 44100
suppressLocalAudioPlayback: true
},
surfaceSwitching: true,
selfBrowserSurface: false
surfaceSwitching: "include",
selfBrowserSurface: "exclude",
systemAudio: "exclude"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may want to update the explanation text as well then.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point; explanation updated.

}
```

Expand Down