Skip to content

Update configuration change section #89

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Mar 16, 2023
Merged

Update configuration change section #89

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc56629
Update configuration change section
beaufortfrancois Jan 24, 2023
e59cce5
Address feedback
beaufortfrancois Mar 3, 2023
3e48bd2
Fix indentation
beaufortfrancois Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 32 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -778,15 +778,23 @@ <h4>Processing considerations</h4>
<section>
<h2>Exposing change of MediaStreamTrack configuration</h2>
<div>
<p>The configuration (capabilities, constraints or settings) of a {{MediaStreamTrack}} may be changed dynamically
<p>The configuration (capabilities and settings) of a {{MediaStreamTrack}} may be changed dynamically
outside the control of web applications. One example is when a user decides to switch on background blur through
the operating system. Web applications might want to know that the configuration
of a particular {{MediaStreamTrack}} has changed. For that purpose, a new event is defined below.
</p>
<pre class="idl">
</p>
</div>
<h3>MediaStreamTrack Interface Extensions</h3>
<div>
<pre class="idl">
partial interface MediaStreamTrack {
attribute EventHandler onconfigurationchange;
};</pre>
<p>The <dfn data-dfn-for="MediaStreamTrack">onconfigurationchange</dfn> attribute
is an [=event handler IDL attribute=] for the `onconfigurationchange`
[=event handler=], whose [=event handler event type=] is
<dfn event for=MediaStreamTrack>configurationchange</dfn>.
</p>
<p>
<p>When the [=User Agent=] detects <dfn data-export id="change-track-configuration">a change of configuration</dfn>
in a <var>track</var>'s underlying source, the [=User Agent=] MUST run the following steps:</p>
Expand All @@ -803,13 +811,13 @@ <h2>Exposing change of MediaStreamTrack configuration</h2>
</p>
<ol>
<li><p>If <var>track</var>.{{MediaStreamTrack/readyState}} is "ended", abort these steps.</p></li>
<li><p>If <var>track</var>'s capabilities, constraints and settings are matching <var>source</var> configuration, abort these steps.
<li><p>If <var>track</var>'s capabilities and settings are matching <var>source</var> configuration, abort these steps.
<li>
<!-- FIXME: Export capabilities, constraints and settings so that we can use them here. -->
<p>Update <var>track</var>'s capabilities, constraints and settings according <var>track</var>'s underlying source.</p>
<!-- FIXME: Export capabilities and settings so that we can use them here. -->
<p>Update <var>track</var>'s capabilities and settings according <var>track</var>'s underlying source.</p>
</li>
<li>
<p>[=Fire an event=] named <var>configurationchange</var> on <var>track</var>.</p>
<p>[=Fire an event=] named {{configurationchange}} on <var>track</var>.</p>
</li>
</ol>
</li>
Expand All @@ -822,6 +830,23 @@ <h2>Exposing change of MediaStreamTrack configuration</h2>
</div>
</p>
</div>
<h3>Example</h3>
<div>
<p>This example shows how to monitor external background blur changes.</p>
<pre class="example">
const stream = await navigator.mediaDevices.getUserMedia({video: true});
const [track] = stream.getVideoTracks();
let {backgroundBlur} = track.getSettings();
applyBlurInSoftwareInstead(!backgroundBlur);

track.addEventListener("configurationchange", () => {
if (backgroundBlur != track.getSettings().backgroundBlur) {
backgroundBlur = track.getSettings().backgroundBlur;
applyBlurInSoftwareInstead(!backgroundBlur);
}
});
</pre>
</div>
Copy link
Member

Choose a reason for hiding this comment

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

nit: It's weird to see the </pre> as less indented than the </div>. The following indentation seems preferrable imho:

    <h3>Example</h3>
    <div>
      <p>This example shows how to monitor external background blur changes.</p>
      <pre class="example">
       const stream = await navigator.mediaDevices.getUserMedia({video: true});
       const [track] = stream.getVideoTracks();
       let {backgroundBlur} = track.getSettings();
       applyBlurInSoftwareInstead(!backgroundBlur);

       track.addEventListener("configurationchange", () => {
         if (backgroundBlur != track.getSettings().backgroundBlur) {
           backgroundBlur = track.getSettings().backgroundBlur;
           applyBlurInSoftwareInstead(!backgroundBlur);
         }
       });
      </pre>
    </div>
  </section>

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed in 3e48bd2

</section>
</body>
</html>