Update background blur sample

image-capture/background-blur.js

@@ -1,8 +1,8 @@
 navigator.mediaDevices.getUserMedia({ video: true })
-.then((mediaStream) => {
-  document.querySelector("video").srcObject = mediaStream;
+.then((stream) => {
+  document.querySelector("video").srcObject = stream;
 
-  const [track] = mediaStream.getVideoTracks();
+  const [track] = stream.getVideoTracks();
   const capabilities = track.getCapabilities();
   const settings = track.getSettings();
 
@@ -11,27 +11,37 @@ navigator.mediaDevices.getUserMedia({ video: true })
   }
 
   // Listen to background blur changes.
-  track.onconfigurationchange = onconfigurationchange;
+  track.addEventListener("configurationchange", configurationChange);
 
-  // Check whether the user can toggle background blur or not.
+  // Check whether the user can toggle background blur in the web app.
   if (capabilities.backgroundBlur?.length !== 2) {
     throw Error(`Background blur toggle is not supported by ${track.label}`);
   }
 
-  const toggleButton = document.querySelector("button");
-  toggleButton.onclick = () => {
-    const settings = track.getSettings();
-    track.applyConstraints({
-      advanced: [{ backgroundBlur: !settings.backgroundBlur }],
-    });
-  };
-  toggleButton.disabled = false;
+  const button = document.querySelector("button");
+  button.addEventListener("click", buttonClick);
+  button.disabled = false;
 })
 .catch((error) => log("Argh!", `${error}`));
 
-function onconfigurationchange(event) {
+function buttonClick() {
+  const stream = document.querySelector("video").srcObject;
+  const [track] = stream.getVideoTracks();
+  const settings = track.getSettings();
+  const constraints = {
+    advanced: [{ backgroundBlur: !settings.backgroundBlur }],
+  };
+  track.applyConstraints(constraints)
+  .then(() => {
+    const settings = track.getSettings();
+    log(`Background blur is now ${settings.backgroundBlur ? "ON" : "OFF"}`);
+  })
+  .catch((error) => log("Argh!", `${error}`));
+}
+
+function configurationChange(event) {
   const settings = event.target.getSettings();
   if ("backgroundBlur" in settings) {
-    log(`Background blur is now ${settings.backgroundBlur ? "ON" : "OFF"}`);
+    log(`Background blur changed to ${settings.backgroundBlur ? "ON" : "OFF"}`);
   }
 }