FitType Property is not applying on webgl but working on canvas2D

[sameeworking2000]

I tried using the canvas2D pipeline, and it worked fine as the background was contained. However, it didn't work on Safari browser, so I switched to the WebGL pipeline. Now, the issue is that the background image is cropped instead of being contained, preventing me from seeing the full background. Is there a way to fix this?

 const initializeVirtualBackgroundProcessor = (
    videoTrack: LocalVideoTrack | RemoteVideoTrack,
    backgroundUrl: string
  ) => {
    const img = new Image();

    img.onload = () => {
      const newProcessor = new VirtualBackgroundProcessor({
        assetsPath: '/',
        backgroundImage: img,
        debounce: true,
        pipeline: Pipeline.WebGL2,
        fitType: ImageFit.Contain
      });

      newProcessor
        .loadModel()
        .then(() => {
          if (virtualBackgroundProcessor) {
            videoTrack.removeProcessor(virtualBackgroundProcessor);
          }
          videoTrack.addProcessor(newProcessor, {
            inputFrameBufferType: 'video',
            outputFrameBufferContextType: 'webgl2'
          });
          setVirtualBackgroundProcessor(newProcessor);
          setVirtualBackgroundApplied(true);
        })
        .catch((error) => {
          console.error(
            'Error initializing virtual background processor:',
            error
          );
        });
    };

    img.onerror = (error) => {
      console.error('Error loading background image:', error);
      // Handle error loading image, maybe fallback to default or show an error message
    };

    img.src = backgroundUrl;
    img.crossOrigin = 'anonymous';
    // img.style.objectFit = 'cover';
    // img.style.backgroundRepeat = 'no-repeat';
    // img.style.backgroundPosition = 'center';
    // img.style.backgroundSize = 'auto';
    // img.style.width = '100%';
    // img.style.height = '100%';
  };