Merge pull request #159 from brychanrobot/background_blur

Add a section for the background blur field in VideoFrameMetadata

Author: guidou

index.html

@@ -1876,6 +1876,92 @@ <h3>Examples</h3>
       </pre>
     </section>
   </section>
+  <section>
+    <h2>Background Blur Effect Status</h2>
+    <p>The {{VideoFrameMetadata}} interface exposes the blur state as a property,
+      which allows apps to know the state for every frame. This can be helpful for
+      scenarios where the app wishes to help protect user privacy by never sending an
+      un-blurred frame off of the user's system.</p>
+    <section>
+      <h3>{{VideoFrameMetadata}}</h3>
+      <pre class="idl">
+partial dictionary VideoFrameMetadata {
+  BackgroundBlur backgroundBlur;
+};</pre>
+      <section class="notoc">
+        <h4>Members</h4>
+        <dl class="dictionary-members" data-link-for="VideoFrameMetadata" data-dfn-for="VideoFrameMetadata">
+          <dt><dfn><code>backgroundBlur</code></dfn> of type <code>{{BackgroundBlur}}</code></dt>
+          <dd>
+            <p>The state of the background blur effect for the current frame, if
+              [=map/exist|present=]. Absence might indicate that the frame is not
+              from a camera, or the user agent might not support reporting blur state.
+            </p>
+          </dd>
+        </dl>
+      </section>
+    </section>
+    <section>
+      <h3>{{BackgroundBlur}}</h3>
+      <pre class="idl">
+dictionary BackgroundBlur: MediaEffectInfo {};</pre>
+      <section class="notoc">
+      </section>
+    </section>
+    <section>
+      <h3>{{MediaEffectInfo}}</h3>
+      <pre class="idl">
+dictionary MediaEffectInfo {
+  required boolean enabled;
+};</pre>
+      <section class="notoc">
+        <h4>Dictionary {{MediaEffectInfo}} Members</h4>
+        <dl class="dictionary-members" data-dfn-for="MediaEffectInfo" data-link-for="MediaEffectInfo">
+          <dt><dfn><code>enabled</code></dfn> of type {{boolean}}</dt>
+          <dd>
+            <p>True if the effect is enabled, false otherwise. This isn't a strong guarantee, as user
+              agents likely can't detect all possible video manipulation software.
+            </p>
+          </dd>
+        </dl>
+      </section>
+    </section>
+    <section>
+      <h3>Example</h3>
+      <pre class="example">
+const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+const track = stream.getVideoTracks()[0];
+const worker = new Worker(`data:text/javascript,(${work.toString()})()`);
+worker.postMessage({track}, [track]);
+const {data} = await new Promise(r => worker.onmessage = r);
+video.srcObject = new MediaStream([data.track]);
+
+function work() {
+  onmessage = async ({data: {track}}) => {
+    const trackGenerator = new VideoTrackGenerator({ kind: "video" });
+    self.postMessage({track: trackGenerator.track}, [trackGenerator.track]);
+    const trackProcessor = new MediaStreamTrackProcessor({ track });
+
+    const transformer = new TransformStream({
+      async transform(videoFrame, controller) {
+        if ("backgroundBlur" in videoFrame.metadata()) {
+          console.log('backgroundBlur.enabled:', videoFrame.metadata().backgroundBlur.enabled);
+        } else {
+          console.log('backgroundBlur unsupported');
+        }
+
+        controller.enqueue(videoFrame);
+      },
+    });
+
+    trackProcessor.readable
+      .pipeThrough(transformer)
+      .pipeTo(trackGenerator.writable);
+  };
+}
+      </pre>
+    </section>
+  </section>
   <section>
     <h2>MediaStream in workers</h2>
     <div>