feat: add vbg type support

WebexSamples · May 31, 2024 · 4222c82 · 4222c82
1 parent 3dddea6
commit 4222c82
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,10 @@
     <link rel="stylesheet" href="styles.css" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>E-store</title>
+    <title>E-store Demo</title>
+    <script type="module" type="text/javascript" src="index.js"></script>
+    <script type="module" type="text/javascript" src="webex.js"></script>
+
   </head>
 
   <body class="body">
@@ -352,6 +355,7 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>
                       id="leave-meeting"
                       class="btn-danger"
                       style="display: none"
+                      title="Leave the meeting"
                     >
                       Leave
                     </button>
@@ -361,23 +365,19 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>
                     style="flex: 0.5; margin-top: 1.5rem"
                     class="custom-fieldset-vbg"
                   >
-                    <legend>VBG</legend>
+                    <legend>Virtual Background</legend>
                     <div style="display: flex">
-                      <input type="radio" name="vbg" id="" />
-                      <p style="margin-right: 2rem">Blur</p>
-                      <input type="radio" name="vbg" id="" checked />
-                      <p style="margin-right: 2rem">Image</p>
-                      <button id="toggle-vbg-btn">Toggle VBG</button>
+                      <input type="radio" name="vbg" id="vbg-none" />
+                      <p style="margin-right: 2rem"><label for="vbg-none">None</label></p>
+                      <input type="radio" name="vbg" id="vbg-blur" />
+                      <p style="margin-right: 2rem"><label for="vbg-blur">Blur</label></p>
+                      <input type="radio" name="vbg" id="vbg-image" checked />
+                      <p style="margin-right: 2rem"><label for="vbg-image">Image</label></p>
+                      <button id="toggle-vbg-btn" title="Save Virtual Background Settings">Save VBG</button>
                     </div>
                   </fieldset>
                 </div>
               </div>
-              <!-- <fieldset style="flex: 0.5" class="custom-fieldset">
-              <legend>Transcription</legend>
-              <aside id="transcription-description">
-
-              </aside>
-            </fieldset> -->
             </div>
           </section>
         </main>
@@ -387,7 +387,5 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>
       defer
       src="https://unpkg.com/[email protected]/umd/webex.min.js"
     ></script>
-    <script type="module" type="text/javascript" src="index.js"></script>
-    <script type="module" type="text/javascript" src="webex.js"></script>
   </body>
 </html>
diff --git a/webex.js b/webex.js
@@ -263,31 +263,37 @@ export async function joinMeeting() {
 
 /**
  * Toggle the Virtual Background
+ * https://github.com/webex/webex-js-sdk/wiki/Streams-and-Effects#apply-a-virtual-background-effect
  * 
  * @returns {Promise<void>}
  */
 async function toggleVBG() {
-  toggleVBGBtn.innerText = "Toggling...";
-
-  if (!vbgEffect) {
-    vbgEffect = await webex.meetings.createVirtualBackgroundEffect({
-      mode: "IMAGE", // options are 'BLUR', 'IMAGE', 'VIDEO'
-      bgImageUrl: vbgImageUrl,
-      // bgVideoUrl: blurVBGVideoUrl,
-    });
+  toggleVBGBtn.innerText = "Saving VBG...";
+  toggleVBGBtn.disabled = true;
+
+  // Remove VBG effect before adding a new one
+  if (vbgEffect) {
+    vbgEffect.disable();
   }
 
-  await localStream.camera.addEffect(vbgEffect);
-
-  if (isVBGEnabled) {
-    await vbgEffect.disable();
+  // Get the selected VBG option
+  let selectedVBG = document.querySelector('input[name="vbg"]:checked').id;
+  if (selectedVBG === "vbg-none") {
     isVBGEnabled = false;
   } else {
+    const mode = selectedVBG === "vbg-blur" ? "BLUR" : "IMAGE";
+    const bgImageUrl = selectedVBG === "vbg-blur" ? null : vbgImageUrl;
+    vbgEffect = await webex.meetings.createVirtualBackgroundEffect({
+      mode: mode, // options are 'BLUR', 'IMAGE', 'VIDEO'
+      bgImageUrl: bgImageUrl,
+    });
+    await localStream.camera.addEffect(vbgEffect);
     await vbgEffect.enable();
     isVBGEnabled = true;
   }
 
-  toggleVBGBtn.innerText = "Toggle VBG";
+  toggleVBGBtn.innerText = "Save VBG";
+  toggleVBGBtn.disabled = false;
 }
 
 /**