How to Disable Mirrored Publisher Preview When Using BackgroundReplacement Video Transformer.

Objective

When using the BackgroundReplacement video transformer with the front-facing camera, you may notice that your local publisher preview — including the background image and any text — appears horizontally flipped. This is expected behavior. By default, the local renderer mirrors the video to provide a natural self-view experience, similar to looking into a mirror.

Importantly, this only affects what you see in your own preview. Remote participants always see your video in the correct, non-mirrored orientation.

If your use case requires the local preview to display without mirroring — for example, when your background image contains text or logos — you can disable this behavior using the approaches below.

Applies To

• Vonage Video API

• Android SDK

• iOS SDK

• JavaScript (Web) SDK

• Video Transformers / Media Processor (BackgroundReplacement)

Procedure

Android

On Android, you can control the mirroring behavior by implementing a custom video renderer and applying the mirror correction at the matrix level. The key is to apply this only to the publisher's local renderer, leaving the subscriber view untouched.

In your custom renderer, update the scale matrix as follows:

Matrix.setIdentityM(scaleMatrix, 0);

// Aspect ratio scaling
float scaleX = 1.0f, scaleY = 1.0f;
float ratio = (float) currentFrame.getWidth() / currentFrame.getHeight();
float vratio = (float) viewportWidth / viewportHeight;

if (videoFitEnabled) {
    if (ratio > vratio) {
        scaleY = vratio / ratio;
    } else {
        scaleX = ratio / vratio;
    }
}

// Set mirrorX to 1.0 to render the publisher preview without mirroring
float mirrorX;
if (isPublisherRenderer) {
    mirrorX = 1.0f;
}

Matrix.scaleM(scaleMatrix, 0, scaleX * mirrorX, scaleY, 1.0f);

This ensures the local publisher preview is displayed in the correct orientation, while remote subscribers continue to see the video as expected.

For a full implementation reference, see the Android Custom Video Renderer sample.

iOS

On iOS, you can disable the mirrored preview by implementing a custom video renderer using OTPublisherKit and OTVideoRender, then applying a horizontal flip transform to the publisher's local preview layer.

Apply the transform to cancel out the default mirroring:

// Apply a horizontal flip to the publisher's local preview only
publisherRendererView.layer.transform = CATransform3DMakeScale(-1.0, 1.0, 1.0)

Then assign your custom renderer to the publisher:

let publisher = OTPublisherKit(delegate: self, settings: OTPublisherSettings())
let customRenderer = MirrorCorrectedRenderer(frame: publisherView.bounds)
publisher?.videoRender = customRenderer
publisherView.addSubview(customRenderer)

Important: Do not apply this transform to the subscriber renderer. The subscriber view is already rendered in the correct orientation by the SDK.

For guidance on building a custom renderer, see the iOS Custom Video Renderer Guide.

JavaScript (Web SDK)

On the web, no custom renderer is needed. Simply set the mirror option to false when initializing the publisher:

OT.initPublisher(targetElement, { mirror: false }, handleError);

This will display the local publisher preview in the correct, non-mirrored orientation.

Additional Information

• Android SDK Docs — Mirroring the Local Display

• Android Custom Video Renderer Sample

• iOS Custom Video Renderer Guide