# Virtual Background (/en/realtime-media/video/build/apply-video-effects/virtual-background/javascript)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

Virtual Background enables users to blur their background, or replace it with a solid color or an image. This feature is applicable to use-cases such as online conferences, online classes, and live streaming. It helps protect personal privacy and reduces audience distraction.

      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
    ## Understand the tech [#understand-the-tech-8]

    Virtual Background offers the following options:

    | Feature                                 | Example                                                                                                                                                                                                                                                                                                               |
    | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | Blurred background and image background | ![image](https://assets-docs.agora.io/images/extensions-marketplace/blurred-background.jpg)                                                                                                                                                                                                                           |
    | Video/Animated background               | <video src="https://assets-docs.agora.io/images/extensions-marketplace/virtual-background.mp4" poster="https://web-cdn.agora.io/docs-files/1654571689670" width="100%" height="auto">Your browser does not support the `video` element.</video>                                                                       |
    | Portrait-in-picture                     | ![portrait-in-picture](https://assets-docs.agora.io/images/extensions-marketplace/portrait-in-picture.jpg) Allows the presenter to use slides as the virtual background while superimposing their video. The effect is similar to a weather news cast on television, preventing interruptions during a layout toggle. |

    Want to test Virtual Background? Try the <a href="https://webdemo.agora.io/virtualBackground/index.html">online demo</a>.

    ## Prerequisites [#prerequisites-8]

    Ensure that you have implemented the [SDK quickstart](/en/realtime-media/video/get-started-sdk) in your project.

    ## Implement virtual background [#implement-virtual-background-8]

    This section shows you how to add a virtual background to the local video.

    ### Check device compatibility [#check-device-compatibility-6]

    To avoid performance degradation or unavailable features when enabling Virtual Background on low-end devices, check whether the device supports the feature.

    ```typescript
    const checkCompatibility = () => {
      if (!extension.current.checkCompatibility()) {
        console.error("Does not support virtual background!");
        return;
      }
    }
    ```

    ### Configure the virtual background extension [#configure-the-virtual-background-extension]

    Initializes and configures the virtual background processor, ensuring compatibility and handling initialization errors.

    ```typescript
    useEffect(() => {
      const initializeVirtualBackgroundProcessor = async () => {
        AgoraRTC.registerExtensions([extension.current]);
        checkCompatibility();
        console.log("Initializing virtual background processor...");
        try {
          processor.current = extension.current.createProcessor();
          await processor.current.init(wasm);
          localCameraTrack.pipe(processor.current).pipe(agoraContext.localCameraTrack.processorDestination);
          processor.current.setOptions({ type: "color", color: "#00ff00" });
          await processor.current.enable();
        } catch (error) {
          console.error("Error initializing virtual background:", error);
        }
      };

      void initializeVirtualBackgroundProcessor();

      return () => {
        const disableVirtualBackground = async () => {
          processor.current?.unpipe();
          localCameraTrack?.unpipe();
          await processor.current?.disable();
        };
        void disableVirtualBackground();
      };
    }, [localCameraTrack]);
    ```

    ### Set a blurred background [#set-a-blurred-background-7]

    To blur the video background, use the following code:

    ```typescript
    const blurBackground = () => {
      processor.current?.setOptions({ type: "blur", blurDegree: 2 });
    };
    ```

    ### Set a color background [#set-a-color-background-7]

    To apply a solid color as the virtual background, use the following code:

    ```typescript
    const colorBackground = () => {
      processor.current?.setOptions({ type: "color", color: "#00ff00" });
    };
    ```

    ### Set an image background [#set-an-image-background-7]

    To set a custom image as the virtual background, use the following code:

    ```typescript
    const imageBackground = () => {
      const image = new Image();
      image.onload = () => {
        processor.current?.setOptions({ type: "img", source: image });
      };
      image.src = demoImage;
    };
    ```

    ## Reference [#reference-8]

    This section contains content that completes the information in this page, or points you to documentation that explains other aspects to this product.