From 782fafd0cfe5164575406f4be2bfcd1d23eed06b Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 16 Sep 2025 14:49:23 +1000 Subject: [PATCH 1/6] Layout only fixes --- .../api/mediadevices/getdisplaymedia/index.md | 104 ++++---- .../api/mediadevices/getusermedia/index.md | 238 +++++++----------- 2 files changed, 139 insertions(+), 203 deletions(-) diff --git a/files/en-us/web/api/mediadevices/getdisplaymedia/index.md b/files/en-us/web/api/mediadevices/getdisplaymedia/index.md index f96dc3c1c9f917c..8c5a1c3ea1a5fc7 100644 --- a/files/en-us/web/api/mediadevices/getdisplaymedia/index.md +++ b/files/en-us/web/api/mediadevices/getdisplaymedia/index.md @@ -8,11 +8,9 @@ browser-compat: api.MediaDevices.getDisplayMedia {{APIRef("Screen Capture API")}}{{SecureContext_Header}} -The **`getDisplayMedia()`** method of the {{domxref("MediaDevices")}} interface prompts the user to select and -grant permission to capture the contents of a display or portion thereof (such as a window) as a {{domxref("MediaStream")}}. +The **`getDisplayMedia()`** method of the {{domxref("MediaDevices")}} interface prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a {{domxref("MediaStream")}}. -The resulting stream can then be -recorded using the [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) or transmitted as part of a [WebRTC](/en-US/docs/Web/API/WebRTC_API) session. +The resulting stream can then be recorded using the [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) or transmitted as part of a [WebRTC](/en-US/docs/Web/API/WebRTC_API) session. See [Using the Screen Capture API](/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture) for more details and an example. @@ -26,86 +24,95 @@ getDisplayMedia(options) ### Parameters - `options` {{optional_inline}} - - : An optional object specifying requirements for the returned {{domxref("MediaStream")}}. The options for `getDisplayMedia()` work in the same as the [constraints](/en-US/docs/Web/API/MediaDevices/getUserMedia#parameters) for the {{domxref("MediaDevices.getUserMedia()")}} method, although in that case only `audio` and `video` can be specified. The list of possible option properties for `getDisplayMedia()` is as follows: + - : An optional object specifying requirements for the returned {{domxref("MediaStream")}}. + The options for `getDisplayMedia()` work in the same as the [constraints](/en-US/docs/Web/API/MediaDevices/getUserMedia#parameters) for the {{domxref("MediaDevices.getUserMedia()")}} method, although in that case only `audio` and `video` can be specified. + The list of possible option properties for `getDisplayMedia()` is as follows: - `video` {{optional_inline}} - - : A boolean or a {{domxref("MediaTrackConstraints")}} instance; the default value is `true`. If this option is omitted or set to `true`, the returned {{domxref("MediaStream")}} will contain a video track. Since `getDisplayMedia()` requires a video track, if this option is set to `false` the promise will reject with a `TypeError`. + - : A boolean or a {{domxref("MediaTrackConstraints")}} instance; the default value is `true`. + If this option is omitted or set to `true`, the returned {{domxref("MediaStream")}} will contain a video track. + Since `getDisplayMedia()` requires a video track, if this option is set to `false` the promise will reject with a `TypeError`. - `audio` {{optional_inline}} - - : A boolean or a {{domxref("MediaTrackConstraints")}} instance; the default value is `false`. A value of `true` indicates that the returned {{domxref("MediaStream")}} will contain an audio track, if audio is supported and available for the display surface chosen by the user. + - : A boolean or a {{domxref("MediaTrackConstraints")}} instance; the default value is `false`. + A value of `true` indicates that the returned {{domxref("MediaStream")}} will contain an audio track, if audio is supported and available for the display surface chosen by the user. - `controller` {{Experimental_Inline}} {{optional_inline}} - : A {{domxref("CaptureController")}} object instance containing methods that can be used to further manipulate the capture session if included. - `monitorTypeSurfaces` {{Experimental_Inline}} {{optional_inline}} - - : An enumerated value specifying whether the browser should offer entire screens in the screen capture options presented to the user alongside tab and window options. This option is intended to protect companies from leakage of private information through employee error when using video conferencing apps. Possible values are `include`, which hints that the browser should include screen options, and `exclude`, which hints that they should be excluded. A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. + - : An enumerated value specifying whether the browser should offer entire screens in the screen capture options presented to the user alongside tab and window options. + This option is intended to protect companies from leakage of private information through employee error when using video conferencing apps. + Possible values are `include`, which hints that the browser should include screen options, and `exclude`, which hints that they should be excluded. + A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. > [!NOTE] - > You cannot set `monitorTypeSurfaces: "exclude"` at the same time as [`displaySurface: "monitor"`](/en-US/docs/Web/API/MediaTrackConstraints/displaySurface) as the two settings are contradictory. Trying to do so will result in the `getDisplayMedia()` call failing with a `TypeError`. + > You cannot set `monitorTypeSurfaces: "exclude"` at the same time as [`displaySurface: "monitor"`](/en-US/docs/Web/API/MediaTrackConstraints/displaySurface) as the two settings are contradictory. + > Trying to do so will result in the `getDisplayMedia()` call failing with a `TypeError`. - `preferCurrentTab` {{non-standard_inline}} {{Experimental_Inline}} {{optional_inline}} - - : A boolean; a value of `true` instructs the browser to offer the current tab as the most prominent capture source, i.e., as a separate "This Tab" option in the "Choose what to share" options presented to the user. This is useful as many app types generally just want to share the current tab. For example, a slide deck app might want to let the user stream the current tab containing the presentation to a virtual conference. A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. + - : A boolean; a value of `true` instructs the browser to offer the current tab as the most prominent capture source, i.e., as a separate "This Tab" option in the "Choose what to share" options presented to the user. + This is useful as many app types generally just want to share the current tab. + For example, a slide deck app might want to let the user stream the current tab containing the presentation to a virtual conference. + A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. - `selfBrowserSurface` {{Experimental_Inline}} {{optional_inline}} - - : An enumerated value specifying whether the browser should allow the user to select the current tab for capture. This helps to avoid the "infinite hall of mirrors" effect experienced when a video conferencing app inadvertently shares its own display. Possible values are `include`, which hints that the browser should include the current tab in the choices offered for capture, and `exclude`, which hints that it should be excluded. A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. + - : An enumerated value specifying whether the browser should allow the user to select the current tab for capture. + This helps to avoid the "infinite hall of mirrors" effect experienced when a video conferencing app inadvertently shares its own display. + Possible values are `include`, which hints that the browser should include the current tab in the choices offered for capture, and `exclude`, which hints that it should be excluded. + A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. - `surfaceSwitching` {{Experimental_Inline}} {{optional_inline}} - - : An enumerated value specifying whether the browser should display a control to allow the user to dynamically switch the shared tab during screen-sharing. This is much more convenient than having to go through the whole sharing process again each time a user wants to switch the shared tab. Possible values are `include`, which hints that the browser should include the control, and `exclude`, which hints that it should not be shown. A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. + - : An enumerated value specifying whether the browser should display a control to allow the user to dynamically switch the shared tab during screen-sharing. + This is much more convenient than having to go through the whole sharing process again each time a user wants to switch the shared tab. + Possible values are `include`, which hints that the browser should include the control, and `exclude`, which hints that it should not be shown. + A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. - `systemAudio` {{Experimental_Inline}} {{optional_inline}} - - : An enumerated value specifying whether the browser should include the system audio among the possible audio sources offered to the user. Possible values are `include`, which hints that the browser should include the system audio in the list of choices, and `exclude`, which hints that it should be excluded. A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. + - : An enumerated value specifying whether the browser should include the system audio among the possible audio sources offered to the user. + Possible values are `include`, which hints that the browser should include the system audio in the list of choices, and `exclude`, which hints that it should be excluded. + A default value is not mandated by the spec; see the [Browser compatibility](#browser_compatibility) section for browser-specific defaults. > [!NOTE] > See the article [Capabilities, constraints, and settings](/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints) for a lot more detail on how these options work. ### Return value -A {{jsxref("Promise")}} that resolves to a {{domxref("MediaStream")}} containing a -video track whose contents come from a user-selected screen area, as well as an optional -audio track. +A {{jsxref("Promise")}} that resolves to a {{domxref("MediaStream")}} containing a video track whose contents come from a user-selected screen area, as well as an optional audio track. > [!NOTE] -> Browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the audio sources supported. Check the [compatibility table](#browser_compatibility) for details for each browser. +> Browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the audio sources supported. +> Check the [compatibility table](#browser_compatibility) for details for each browser. ### Exceptions - `AbortError` {{domxref("DOMException")}} - : Thrown if an error or failure does not match any of the other exceptions listed here. - `InvalidStateError` {{domxref("DOMException")}} - - : Thrown if the call to `getDisplayMedia()` was not made from code running due to a - {{glossary("transient activation")}}, such as an event handler. Or if the browser context is - not fully active or does not focused. Or if the `controller` options has been already used in creating - another {{domxref("MediaStream")}}. + - : Thrown if the call to `getDisplayMedia()` was not made from code running due to a {{glossary("transient activation")}}, such as an event handler. + Or if the browser context is not fully active or does not focused. + Or if the `controller` options has been already used in creating another {{domxref("MediaStream")}}. - `NotAllowedError` {{domxref("DOMException")}} - : Thrown if the permission to access a screen area was denied by the user, or the current browsing instance is not permitted access to screen sharing (for example by a [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy)). - `NotFoundError` {{domxref("DOMException")}} - : Thrown if no sources of screen video are available for capture. - `NotReadableError` {{domxref("DOMException")}} - - : Thrown if the user selected a screen, window, tab, or another source of screen data, but a - hardware or operating system level error or lockout occurred, preventing the sharing - of the selected source. + - : Thrown if the user selected a screen, window, tab, or another source of screen data, but a hardware or operating system level error or lockout occurred, preventing the sharing of the selected source. - `OverconstrainedError` {{domxref("DOMException")}} - - : Thrown if, after creating the stream, applying any specified constraints fails - because no compatible stream could be generated. + - : Thrown if, after creating the stream, applying any specified constraints fails because no compatible stream could be generated. - {{jsxref("TypeError")}} - - : Thrown if the specified `options` include values that are not permitted - when calling `getDisplayMedia()`, for example a `video` property set to false, or if any specified {{domxref("MediaTrackConstraints")}} are not permitted. `min` and `exact` values are not permitted in constraints used in `getDisplayMedia()` calls. + - : Thrown if the specified `options` include values that are not permitted when calling `getDisplayMedia()`, for example a `video` property set to false, or if any specified {{domxref("MediaTrackConstraints")}} are not permitted. + `min` and `exact` values are not permitted in constraints used in `getDisplayMedia()` calls. ## Security -Because `getDisplayMedia()` could be used in nefarious ways, it can be a -source of significant privacy and security concerns. For that reason, the specification -details measures browsers are required to take in order to fully support -`getDisplayMedia()`. - -- The specified options can't be used to limit the choices available - to the user. Instead, they must be applied after the user chooses a source, in order - to generate output that matches the options. -- The go-ahead permission to use `getDisplayMedia()` cannot be persisted - for reuse. The user must be prompted for permission every time. -- [Transient user activation](/en-US/docs/Web/Security/User_activation) is required. The user has to interact with the page or a UI element in order for this feature to work. -- Browsers are encouraged to provide a warning to users about sharing displays or - windows that contain browsers, and to keep a close eye on what other content might be - getting captured and shown to other users. +Because `getDisplayMedia()` could be used in nefarious ways, it can be a source of significant privacy and security concerns. +For that reason, the specification details measures browsers are required to take in order to fully support `getDisplayMedia()`. + +- The specified options can't be used to limit the choices available to the user. + Instead, they must be applied after the user chooses a source, in order to generate output that matches the options. +- The go-ahead permission to use `getDisplayMedia()` cannot be persisted for reuse. + The user must be prompted for permission every time. +- [Transient user activation](/en-US/docs/Web/Security/User_activation) is required. + The user has to interact with the page or a UI element in order for this feature to work. +- Browsers are encouraged to provide a warning to users about sharing displays or windows that contain browsers, and to keep a close eye on what other content might be getting captured and shown to other users. ## Examples -In the example below a `startCapture()` method is created, which initiates -screen capture given a set of options specified by the `displayMediaOptions` -parameter. +In the example below a `startCapture()` method is created, which initiates screen capture given a set of options specified by the `displayMediaOptions` parameter. ```js const displayMediaOptions = { @@ -135,11 +142,8 @@ async function startCapture(displayMediaOptions) { } ``` -This uses {{jsxref("Operators/await", "await")}} to asynchronously wait for `getDisplayMedia()` -to resolve with a {{domxref("MediaStream")}} which contains the display contents as -requested by the specified options. The stream is then returned to the caller for use, -perhaps for adding to a WebRTC call using {{domxref("RTCPeerConnection.addTrack()")}} to -add the video track from the stream. +This uses {{jsxref("Operators/await", "await")}} to asynchronously wait for `getDisplayMedia()` to resolve with a {{domxref("MediaStream")}} which contains the display contents as requested by the specified options. +The stream is then returned to the caller for use, perhaps for adding to a WebRTC call using {{domxref("RTCPeerConnection.addTrack()")}} to add the video track from the stream. > [!NOTE] > The [Screen sharing controls](https://chrome.dev/screen-sharing-controls/) demo provides a complete implementation that allows you to create a screen capture with your choice of `getDisplayMedia()` constraints and options. diff --git a/files/en-us/web/api/mediadevices/getusermedia/index.md b/files/en-us/web/api/mediadevices/getusermedia/index.md index 475a6d358b97f0c..946257803c7b961 100644 --- a/files/en-us/web/api/mediadevices/getusermedia/index.md +++ b/files/en-us/web/api/mediadevices/getusermedia/index.md @@ -27,122 +27,86 @@ getUserMedia(constraints) ### Parameters - `constraints` - - : An object specifying the types of media to - request, along with any requirements for each type. - - The `constraints` parameter is an object with two members: `video` and - `audio`, describing the media types requested. Either or both must be - specified. If the browser cannot find all media tracks with the specified types that - meet the constraints given, then the returned promise is rejected with - `NotFoundError` {{domxref("DOMException")}}. - - For both `video` and `audio`, its value is either a boolean or an object. The default value is `false`. - - If `true` is specified for a media type, the resulting stream is _required_ to have that type of track in it. If one cannot be included for any reason, the returned promise will reject. - - If `false` is specified for a media type, the resulting stream _must not_ have that type of track, or the returned promise will reject. Because both `video` and `audio` default to `false`, if the `constraints` object contains neither property or if it's not present at all, the returned promise will always reject. + - : An object specifying the types of media to request, along with any requirements for each type. + + The `constraints` parameter is an object with two members: `video` and `audio`, describing the media types requested. + Either or both must be specified. + If the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with `NotFoundError` {{domxref("DOMException")}}. + + For both `video` and `audio`, its value is either a boolean or an object. + The default value is `false`. + - If `true` is specified for a media type, the resulting stream is _required_ to have that type of track in it. + If one cannot be included for any reason, the returned promise will reject. + - If `false` is specified for a media type, the resulting stream _must not_ have that type of track, or the returned promise will reject. + Because both `video` and `audio` default to `false`, if the `constraints` object contains neither property or if it's not present at all, the returned promise will always reject. - If an object is specified for a media type, the object is read as a {{domxref("MediaTrackConstraints")}} dictionary. ### Return value -A {{jsxref("Promise")}} whose fulfillment handler receives a {{domxref("MediaStream")}} -object when the requested media has successfully been obtained. +A {{jsxref("Promise")}} whose fulfillment handler receives a {{domxref("MediaStream")}} object when the requested media has successfully been obtained. ### Exceptions - `AbortError` {{domxref("DOMException")}} - - : Although the user and operating system both granted access to the hardware device, - and no hardware issues occurred that would cause a `NotReadableError` {{domxref("DOMException")}}, throw if some - problem occurred which prevented the device from being used. + - : Although the user and operating system both granted access to the hardware device, and no hardware issues occurred that would cause a `NotReadableError` {{domxref("DOMException")}}, throw if some problem occurred which prevented the device from being used. - `InvalidStateError` {{domxref("DOMException")}} - : Thrown if current document is not fully active. - `NotAllowedError` {{domxref("DOMException")}} - - : Thrown if one or more of the requested source devices cannot be used at this time. This will - happen if the browsing context is insecure (that is, the page was loaded using HTTP - rather than HTTPS). It also happens if the user has specified that the current - browsing instance is not permitted access to the device, the user has denied access - for the current session, or the user has denied all access to user media devices - globally. On browsers that support managing media permissions with [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy), this error is - returned if Permissions Policy is not configured to allow access to the input source(s). + - : Thrown if one or more of the requested source devices cannot be used at this time. + This will happen if the browsing context is insecure (that is, the page was loaded using HTTP rather than HTTPS). + It also happens if the user has specified that the current browsing instance is not permitted access to the device, the user has denied access for the current session, or the user has denied all access to user media devices globally. + On browsers that support managing media permissions with [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy), this error is returned if Permissions Policy is not configured to allow access to the input source(s). > [!NOTE] - > Older versions of the specification used `SecurityError` - > for this instead; `SecurityError` has taken on a new meaning. + > Older versions of the specification used `SecurityError` for this instead; `SecurityError` has taken on a new meaning. - `NotFoundError` {{domxref("DOMException")}} - : Thrown if no media tracks of the type specified were found that satisfy the given constraints. - `NotReadableError` {{domxref("DOMException")}} - - : Thrown if, although the user granted permission to use the matching devices, a hardware error - occurred at the operating system, browser, or Web page level which prevented access to - the device. + - : Thrown if, although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device. - `OverconstrainedError` {{domxref("DOMException")}} - - : Thrown if the specified constraints resulted in no candidate devices which met the criteria - requested. The error is an object of type `OverconstrainedError`, and has a - `constraint` property whose string value is the name of a constraint which - was impossible to meet, and a `message` property containing a - human-readable string explaining the problem. + - : Thrown if the specified constraints resulted in no candidate devices which met the criteria requested. + The error is an object of type `OverconstrainedError`, and has a `constraint` property whose string value is the name of a constraint which was impossible to meet, and a `message` property containing a human-readable string explaining the problem. > [!NOTE] - > Because this error can occur even when the user has not yet granted - > permission to use the underlying device, it can potentially be used as a - > [fingerprinting](/en-US/docs/Glossary/Fingerprinting) surface. + > Because this error can occur even when the user has not yet granted permission to use the underlying device, it can potentially be used as a [fingerprinting](/en-US/docs/Glossary/Fingerprinting) surface. - `SecurityError` {{domxref("DOMException")}} - - : Thrown if user media support is disabled on the {{domxref("Document")}} on which - `getUserMedia()` was called. The mechanism by which user media support is - enabled and disabled is left up to the individual user agent. + - : Thrown if user media support is disabled on the {{domxref("Document")}} on which `getUserMedia()` was called. + The mechanism by which user media support is enabled and disabled is left up to the individual user agent. - {{jsxref("TypeError")}} - - : Thrown if the list of constraints specified is empty, or has all constraints set to - `false`. This can also happen if you try to call - `getUserMedia()` in an insecure context, since - {{domxref("navigator.mediaDevices")}} is `undefined` in an insecure - context. + - : Thrown if the list of constraints specified is empty, or has all constraints set to `false`. + This can also happen if you try to call `getUserMedia()` in an insecure context, since {{domxref("navigator.mediaDevices")}} is `undefined` in an insecure context. ## Privacy and security -As an API that may involve significant privacy concerns, `getUserMedia()`'s -specification lays out a wide array of privacy and security requirements that browsers -are obligated to meet. +As an API that may involve significant privacy concerns, `getUserMedia()`'s specification lays out a wide array of privacy and security requirements that browsers are obligated to meet. -`getUserMedia()` is a powerful feature that can only be used in [secure contexts](/en-US/docs/Web/Security/Secure_Contexts); in insecure -contexts, `navigator.mediaDevices` is `undefined`, preventing -access to `getUserMedia()`. A secure context is, in short, a page loaded -using HTTPS or the `file:///` URL scheme, or a page loaded from -`localhost`. +`getUserMedia()` is a powerful feature that can only be used in [secure contexts](/en-US/docs/Web/Security/Secure_Contexts); in insecure contexts, `navigator.mediaDevices` is `undefined`, preventing access to `getUserMedia()`. +A secure context is, in short, a page loaded using HTTPS or the `file:///` URL scheme, or a page loaded from `localhost`. -In addition, user permission is always required to access the user's audio and video -inputs. Only a window's top-level document context for a valid origin can even request -permission to use `getUserMedia()`, unless the top-level context expressly -grants permission for a given {{HTMLElement("iframe")}} to do so using [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy). Otherwise, the user -will never even be asked for permission to use the input devices. +In addition, user permission is always required to access the user's audio and video inputs. +Only a window's top-level document context for a valid origin can even request permission to use `getUserMedia()`, unless the top-level context expressly grants permission for a given {{HTMLElement("iframe")}} to do so using [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy). +Otherwise, the user will never even be asked for permission to use the input devices. -For additional details on these requirements and rules, how they are reflected in the -context in which your code is running, and about how browsers manage user privacy and -security issues, read on. +For additional details on these requirements and rules, how they are reflected in the context in which your code is running, and about how browsers manage user privacy and security issues, read on. ### User privacy -As an API that may involve significant privacy concerns, `getUserMedia()` is -held by the specification to very specific requirements for user notification and -permission management. First, `getUserMedia()` must always get user -permission before opening any media gathering input such as a webcam or microphone. -Browsers may offer a once-per-domain permission feature, but they must ask at least the -first time, and the user must specifically grant ongoing permission if they choose to do -so. - -Of equal importance are the rules around notification. Browsers are required to display -an indicator that shows that a camera or microphone is in use, above and beyond any -hardware indicator that may exist. They must also show an indicator that permission has -been granted to use a device for input, even if the device is not actively recording at -the moment. - -For example in Firefox, the URL bar displays a pulsing red icon to indicate that -recording is underway. The icon is gray if the permission is in place but recording is -not currently underway. The device's physical light is used to indicate whether or not -recording is currently active. If you've muted your camera (so-called "facemuting"), -your camera's activity light goes out to indicate that the camera is not actively -recording you, without discarding the permission to resume using the camera once muting -is over. +As an API that may involve significant privacy concerns, `getUserMedia()` is held by the specification to very specific requirements for user notification and permission management. +First, `getUserMedia()` must always get user permission before opening any media gathering input such as a webcam or microphone. +Browsers may offer a once-per-domain permission feature, but they must ask at least the first time, and the user must specifically grant ongoing permission if they choose to do so. + +Of equal importance are the rules around notification. +Browsers are required to display an indicator that shows that a camera or microphone is in use, above and beyond any hardware indicator that may exist. +They must also show an indicator that permission has been granted to use a device for input, even if the device is not actively recording at the moment. + +For example in Firefox, the URL bar displays a pulsing red icon to indicate that recording is underway. +The icon is gray if the permission is in place but recording is not currently underway. +The device's physical light is used to indicate whether or not recording is currently active. +If you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not actively recording you, without discarding the permission to resume using the camera once muting is over. ### Security @@ -150,28 +114,22 @@ There are a number of ways security management and controls in a {{Glossary("use #### Permissions Policy -The two [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy) directives that apply to `getUserMedia()` are `camera` -and `microphone`. +The two [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy) directives that apply to `getUserMedia()` are `camera` and `microphone`. -For example, this HTTP header will enable use of a camera by the document -and any embedded {{HTMLElement("iframe")}} elements that are loaded from the same -origin: +For example, this HTTP header will enable use of a camera by the document and any embedded {{HTMLElement("iframe")}} elements that are loaded from the same origin: ```http Permissions-Policy: camera=(self) ``` -This will request access to the microphone for the current origin and the specific -origin `https://developer.mozilla.org`: +This will request access to the microphone for the current origin and the specific origin `https://developer.mozilla.org`: ```http Permissions-Policy: microphone=(self "https://developer.mozilla.org") ``` -If you're using `getUserMedia()` within an `