Image blurring and set a custom image as the publisher's background

[ankitbishtapollo]

Could you please provide instructions on how to utilize the setVideoTransformers method with example? Specifically, I aim to implement image blurring and set a custom image as the publisher's background

[beHaze]

Hello @ankitbishtapollo, I see that you are woking with support but here are some docs for blur https://tokbox.com/developer/guides/audio-video/react-native/#video-filters

[ankitbishtapollo]

Hi @beHaze . I've already tried that but its not working.

Code versions used -
opentok-react-native: 2.27.4
react-native: 0.68.0
react: 17.0.2

Device info -
Real iPhone device - 11 and OS version 17.0.3

Code used -

const otPublisherRef = useRef<any>(null);
# For image blurring
<OTPublisher
      ref={(ref) => (otPublisherRef.current = ref)}
      eventHandlers={{
        streamCreated: (event) => {
          otPublisherRef.current.setVideoTransformers([
            {
              name: 'BackgroundBlur',
              properties: JSON.stringify({
                radius: 'low',
              }),
            }
          ]);
        },
      }}
    />

# For image replacement
<OTPublisher
      ref={(ref) => (otPublisherRef.current = ref)}
      eventHandlers={{
        streamCreated: (event) => {
          otPublisherRef.current.setVideoTransformers([
            {
              name: 'BackgroundReplacement',
              properties: JSON.stringify({
                image_file_path: "https://img.freepik.com/free-vector/abstract-digital-grid-vector-black-background_53876-111550.jpg"
              }),
            }
          ]);
        },
      }}
    />

[beHaze]

We have discovered an issue and are investigating internally (VIDCS-2280).