# updateVirtualBackgroundList does not immediately work

**URL:** <https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133>\
**Category:** Web\
**Created:** [October 3, 2023, 4:19am UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133 "2023-10-03T04:19:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cuongle-hdwebsoft](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/cuongle-hdwebsoft/32/52592_2.png) [@cuongle-hdwebsoft](https://devforum.zoom.us/u/cuongle-hdwebsoft)\
**Post date:** [October 3, 2023, 4:19am UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/1 "2023-10-03T04:19:04Z")

</div>

* * *

**Description**  
When I call `updateVirtualBackgroundList([])` for the first time, Zoom seems does not work, and then when I call the second time, it works.

**Browser Console Error**  
No Error

**Which Web Meeting SDK version?**  
2.17.0

**Meeting SDK Code Snippets**  
The code snippets that are causing the error / issue so we can reproduce.

App.tsx

```auto
import { ChangeEvent, useRef, useState } from "react";
import ZoomMtgEmbedded, { EmbeddedClient, SuspensionViewType } from "@zoomus/websdk/embedded";
import { generateSignature } from "./utils";

enum ROLE {
  HOST = 1,
  PARTICIPANT = 0,
}

interface Form {
  userName: string;
  meetingNumber: string;
  password: string;
}

function App() {
  const meetingSDKElement = useRef<HTMLDivElement | null>(null);
  const HEIGHT = 500;
  const meetingNumber = "";
  const password = "";
  const [value, setValue] = useState<Form>({
    userName: "Le Minh Cuong",
    meetingNumber,
    password,
  });
  const [isMod, setIsMod] = useState(true);
  const [isEmptyVirtualBackground, setIsEmptyVirtualBackground] = useState(false);
  const clientRef = useRef<typeof EmbeddedClient>();
  const [, setZoomClient] = useState<typeof EmbeddedClient>();

  const loadZoom = async () => {
    const client = ZoomMtgEmbedded.createClient();

    clientRef.current = client;

    // expose zoom client to window
    window.zoomClient = client;

    await client.init({
      debug: true,
      maximumVideosInGalleryView: 5,
      zoomAppRoot: meetingSDKElement.current as unknown as HTMLElement,
      language: "en-US",
      customize: {
        meetingInfo: ["topic", "host", "mn", "pwd", "telPwd", "invite", "participant", "dc", "enctype"],
        video: {
          viewSizes: {
            default: {
              height: HEIGHT,
              width: Math.min(800, window.document.documentElement.clientWidth),
            },
          },
          isResizable: false,
          defaultViewType: "gallery" as SuspensionViewType,
        },
        toolbar: {
          buttons: [],
        },
        meeting: {
          popper: {
            modifiers: {
              class: "dasd",
            },
          },
        },
      },
    });

    await client.join({
      sdkKey: import.meta.env.VITE_ZOOM_SDK_KEY,
      signature: generateSignature(
        import.meta.env.VITE_ZOOM_SDK_KEY,
        import.meta.env.VITE_ZOOM_CLIENT_SECRET,
        value.meetingNumber,
        isMod ? ROLE.HOST : ROLE.PARTICIPANT,
      ),
      meetingNumber: value.meetingNumber,
      password: value.password,
      userName: value.userName,
    });

    setZoomClient(client);
  };

  const handleChangeValue = (e: ChangeEvent<HTMLInputElement>) => {
    setValue({
      ...value,
      [e.target.name]: e.target.value,
    });
  };

  const updateVideoOptions = () => {
    clientRef.current?.updateVirtualBackgroundList([]).then(() => {
      alert("Done");
    });
  };

  return (
    <>
      <div id="zoom-app" className="zoom-app" ref={meetingSDKElement}></div>
      <pre>{JSON.stringify(value, null, 4)}</pre>
      <form action="">
        <div className="form-item">
          <label htmlFor="meetingNumber">Meeting number</label>
          <input
            name="meetingNumber"
            id="meetingNumber"
            placeholder="Meeting number"
            type="text"
            value={value.meetingNumber}
            onChange={handleChangeValue}
          />
        </div>
        <div className="form-item">
          <label htmlFor="password">Password</label>
          <input
            name="password"
            id="password"
            placeholder="Password"
            type="text"
            value={value.password}
            onChange={handleChangeValue}
          />
        </div>
        <div className="form-item">
          <label htmlFor="userName">Username</label>
          <input
            name="userName"
            id="userName"
            placeholder="Username"
            type="text"
            value={value.userName}
            onChange={handleChangeValue}
          />
        </div>
        <div className="form-item">
          <label htmlFor="userName">Is Moderator</label>
          <input checked={isMod} onChange={() => setIsMod((pre) => !pre)} type="checkbox" />
        </div>
        <div className="form-item">
          <label htmlFor="userName">Only allow blur/none virtual background</label>
          <input
            checked={isEmptyVirtualBackground}
            onChange={() => setIsEmptyVirtualBackground((pre) => !pre)}
            type="checkbox"
          />
        </div>
        <button type="button" onClick={loadZoom}>
          load zoom
          <a href="#"></a>
        </button>

        <button type="button" onClick={updateVideoOptions}>
          updateVideoOptions
          <a href="#"></a>
        </button>
      </form>

      <div className="controls"></div>
    </>
  );
}

export default App;

```

generateSignature.ts

```auto
import { KJUR } from "jsrsasign";

export const generateSignature = (key: string, secret: string, meetingNumber: string, role: number) => {
  const iat = Math.round(new Date().getTime() / 1000) - 30;
  const exp = iat + 60 * 60 * 2;
  const oHeader = { alg: "HS256", typ: "JWT" };

  const oPayload = {
    sdkKey: key,
    appKey: key,
    mn: meetingNumber,
    role: role,
    iat: iat,
    exp: exp,
    tokenExp: exp,
  };

  const sHeader = JSON.stringify(oHeader);
  const sPayload = JSON.stringify(oPayload);
  const sdkJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, secret);
  return sdkJWT;
};

```

**To Reproduce(If applicable)**  
Here is the layout

 ![CleanShot 2023-10-03 at 11.09.45@2x](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/3/13a0441bde6730dff5be6226cd6ebdbafe6380e8.png)

- Fill out the meeting number
- Fill out Password
- Click on a load zoom button
- Click on `updateVideoOptions` button and wait until it alerts done
- Click on Settings \> Background
- Confirm that Zoom still shows the full list of virtual background
- Close Settings
- Click on `updateVideoOptions` button and wait until it alerts done (Retry)
- Click on Settings \> Background
- Confirm that Zoom only shows None and Blur options

**Screenshots**

 ![CleanShot 2023-10-03 at 11.16.15@2x](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/0/50857b6f2aaaa7ed01943c8992a1f895ec1024c1.jpeg)

**Troubleshooting Routes**  
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on [Zoom · GitHub](https://github.com/zoom)).

**Device (please complete the following information):**

- Device: Macbook Pro
- OS: macOS Ventura 13.4
- Browser: ‘Mozilla/5.0 (Macintosh; Intel Mac OS X 10\_15\_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36’
- Browser Version: 117.0.5938.62 (Official Build) (arm64)

**Additional context**  
NONE

---

<div class="post-metadata">

**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\
**Post date:** [October 9, 2023, 4:00pm UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/2 "2023-10-09T16:00:05Z")

</div>

Hi @cuongle-hdwebsoft  
Thanks for reaching out to us!  
Are you still experiencing this behavior?

---

<div class="post-metadata">

**Author:** ![cuongle-hdwebsoft](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/cuongle-hdwebsoft/32/52592_2.png) [@cuongle-hdwebsoft](https://devforum.zoom.us/u/cuongle-hdwebsoft)\
**Post date:** [October 9, 2023, 4:15pm UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/3 "2023-10-09T16:15:20Z")

</div>

Yep, I’ve tried it and still got that issue

---

<div class="post-metadata">

**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\
**Post date:** [October 11, 2023, 9:40pm UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/4 "2023-10-11T21:40:36Z")

</div>

Thanks for confirming this with me @cuongle-hdwebsoft  
Let me try and replicate this on my end and will get back to you with an update  
Just to confirm, are you using the Component view?

---

<div class="post-metadata">

**Author:** ![cuongle-hdwebsoft](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/cuongle-hdwebsoft/32/52592_2.png) [@cuongle-hdwebsoft](https://devforum.zoom.us/u/cuongle-hdwebsoft)\
**Post date:** [October 12, 2023, 1:38am UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/5 "2023-10-12T01:38:57Z")

</div>

Yes exactly @elisa.zoom

---

<div class="post-metadata">

**Author:** ![elisa.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/elisa.zoom/32/47836_2.png) [@elisa.zoom](https://devforum.zoom.us/u/elisa.zoom)\
**Post date:** [October 17, 2023, 7:28pm UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/6 "2023-10-17T19:28:02Z")

</div>

Hi @cuongle-hdwebsoft  
I am not able to replicate this on my end with the sample app  
Could you try adding your logic into the sample app and confirm if this happens as well?

---

<div class="post-metadata">

**Author:** ![cuongle-hdwebsoft](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/cuongle-hdwebsoft/32/52592_2.png) [@cuongle-hdwebsoft](https://devforum.zoom.us/u/cuongle-hdwebsoft)\
**Post date:** [October 18, 2023, 2:47am UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/7 "2023-10-18T02:47:19Z")

</div>

Hi @elisa.zoom, I’ve tested your Sample again and there is no issue. This could be really weird because I actually just call `updateVirtualBackgroundList`. I published my demonstration and you can check it on this link

[https://meet-zoom-r3rhmqshw-leminhcuong2988.vercel.app/meeting](https://meet-zoom-r3rhmqshw-leminhcuong2988.vercel.app/meeting)

Step:

- Wait for Zoom to load
- Click settings and confirm that it is full of virtual background
- Click on the `Update virtual background` button
- Confirm that it still shows full list of virtual background

Here is my code and you can check the full source.

> <https://github.com/Ram4GB/ZoomMeetApp/pull/16/files#diff-6e6367f8e3191c5a396cc54e0b045c55721aca8260050ed2ffae7aeac6e918e7R8-R21>

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [November 17, 2023, 12:48pm UTC](https://devforum.zoom.us/t/updatevirtualbackgroundlist-does-not-immediately-work/96133/8 "2023-11-17T12:48:13Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.