Fix background-blur.js (#852)

* Simplify script
* Update constraint
* Fix bugs

image-capture/background-blur.js

@@ -26,24 +26,25 @@ navigator.mediaDevices.getUserMedia({ video: true })
 })
 .catch((error) => log("Argh!", `${error}`));
 
-function buttonClick() {
+async function buttonClick() {
   const stream = document.querySelector("video").srcObject;
   const [track] = stream.getVideoTracks();
   const settings = track.getSettings();
+  const newState = !settings.backgroundBlur;
   const constraints = {
-    advanced: [{ backgroundBlur: !settings.backgroundBlur }],
+    backgroundBlur: newState
   };
-  track.applyConstraints(constraints)
-  .then(() => {
-    const settings = track.getSettings();
-    log(`Background blur is now ${settings.backgroundBlur ? "ON" : "OFF"}`);
-  })
-  .catch((error) => log("Argh!", `${error}`));
+  try {
+    await track.applyConstraints(constraints);
+    log(`Background blur constraint was set to ${newState ? "ON" : "OFF"}`);
+  } catch (error) {
+    log("Argh!", `${error}`);
+  }
 }
 
 function configurationChange(event) {
   const settings = event.target.getSettings();
   if ("backgroundBlur" in settings) {
-    log(`Background blur changed to ${settings.backgroundBlur ? "ON" : "OFF"}`);
+    log(`Background blur setting changed to ${settings.backgroundBlur ? "ON" : "OFF"}`);
   }
 }