How do i work with virtual backgrounds and mirrore...
# ask-aiw
wide-shoe-67933
02/26/2026, 9:27 AMHow do i work with virtual backgrounds and mirrored images? The user should have its own video tile mirrored so its a normal experience. Everyone else should not be mirrored. However, when i add a virtual background image with text, they should never be mirrored. But if i flip the image the user experience the background mirrored, and if i dont, the other participants are experiencing it wrong.
t
tall-airline-16756
02/26/2026, 9:27 AMThanks for reaching out, Marcus. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
tall-airline-16756
02/26/2026, 9:28 AMThanks — this is a great question and a common source of confusion. I’ll walk through the cause and a clear approach so the local user sees a mirrored self-view, everyone else sees a correctly oriented video, and virtual backgrounds with readable text never appear reversed.
Summary of the issue you described
• You want the local user’s preview (their own tile) mirrored for a natural “mirror” experience.
• Remote participants should see the non-mirrored (true) video.
• Background images containing text must appear readable to everyone (never mirrored for viewers).
What’s happening and why
• Mirroring is a UI/display transformation applied locally — it does not need to be part of the outgoing video stream.
• If you mirror the published/composited stream, remote viewers receive a mirrored image (text reversed).
• If you don’t mirror at all, the local user’s preview feels unnatural (they expect a mirror).
• Virtual backgrounds that contain text introduce an extra twist: if the background is composited after a mirrored camera feed, text can end up reversed for others unless handled correctly.
Recommended approach (what to implement)
1. Mirror only the local preview UI
◦ Enable mirror mode on the local renderer used for the user’s own preview (e.g.,
LocalVideoTrackVideoTextureViewRendererSurfaceViewRendererw
wide-shoe-67933
02/26/2026, 10:11 AMright now i mirror the video tile with tailwind "scale-x-[-1]" which in turn mirrors both the user and the background. is there a different way in livekit to only mirror the actual video track?
t
tall-airline-16756
02/26/2026, 10:11 AMThanks — that makes sense. You’re right to avoid using Tailwind’s
scale-x-[-1]scale-x-[-1]mirrormirrorvideoRenderer.mirror = trueVideoTextureViewRendererVideoViewvideoRenderer.mirror = trueVideoTextureViewRendererSurfaceViewRenderermirrorMode: trueVideoRendererw
wide-shoe-67933
02/26/2026, 10:14 AMso this is what i use in the videocall "<VideoTrack
key={track?.publication?.trackSid || uuidv4()}
className={videoClass}
trackRef={track}
/>" how do i mirror that track/component without tailwind styling?
t
tall-airline-16756
02/26/2026, 10:14 AMThanks — I see you’re rendering the LiveKit
VideoTrackscale-x-[-1]mirrorVideoTrack Copy code
<VideoTrack
key={track?.publication?.trackSid || uuidv4()}
className={videoClass}
trackRef={track}
mirror={track?.publication?.isLocal} // mirror only local track
/>mirror={true}isLocal@livekit/components-reactw
wide-shoe-67933
02/26/2026, 10:16 AMi am using this: "(alias) const VideoTrack: (props: VideoTrackProps & React.RefAttributes<HTMLVideoElement>) => React.ReactNode
import VideoTrack
The
VideoTrackcamerascreen_shareParticipantt
tall-airline-16756
02/26/2026, 10:16 AMThanks — that error is exactly the clue we need. You’re using the low-level
VideoTrackVideoTrackmirrorParticipantTilemirrorVideoTrackVideoTrackVideoTrackParticipantTilemirror={true} Copy code
import { ParticipantTile } from "@livekit/components-react";
<ParticipantTile
participant={localParticipant} // or pass participant via context
mirror={true} // mirrors only the video renderer
className={videoClass}
/>mirrorVideoTrackParticipantTiletransform: scaleX(-1) Copy code
/* target the video element rendered by VideoTrack */
.my-video .lk-video-element {
transform: scaleX(-1);
}ParticipantTileVideoTrack@livekit/components-reactw
wide-shoe-67933
02/26/2026, 10:21 AMshow me how to use this
Copy code
.my-video .lk-video-element {
transform: scaleX(-1);
}t
tall-airline-16756
02/26/2026, 10:21 AMThanks — I’ll show exactly how to mirror only the underlying <video> element inside your
VideoTrackVideoTracklk-video-elementtransform: scaleX(-1) Copy code
import { VideoTrack } from "@livekit/components-react";
function ParticipantView({ track }) {
return (
<VideoTrack
trackRef={track}
className="my-video" // parent container class
key={track?.publication?.trackSid}
/>
);
} Copy code
/* scope to your container so only this video is mirrored */
.my-video .lk-video-element {
transform: scaleX(-1);
/* keep transform origin and smoothing if needed */
transform-origin: center;
backface-visibility: hidden;
}.lk-video-element.my-videoParticipantTilemirrormy-videow
wide-shoe-67933
02/26/2026, 10:30 AMcan you do the css styling in-line instead of a different file?
t
tall-airline-16756
02/26/2026, 10:30 AMYes — you can mirror only the underlying <video> element inline, so overlays and virtual backgrounds aren’t affected. Below are two safe options depending on how you render
VideoTrack Copy code
import React, { useRef, useEffect } from "react";
import { VideoTrack } from "@livekit/components-react";
function LocalVideo({ track }) {
const videoRef = useRef<HTMLVideoElement | null>(null);
useEffect(() => {
const el = videoRef.current;
if (!el) return;
// apply inline mirroring to only the video element
el.style.transform = "scaleX(-1)";
el.style.transformOrigin = "center";
el.style.backfaceVisibility = "hidden";
// cleanup if the element is removed/replaced
return () => {
if (el) el.style.transform = "";
};
}, [track]);
return (
<VideoTrack
trackRef={track}
key={track?.publication?.trackSid}
// pass the ref to the actual DOM video element via `ref`
ref={videoRef as any}
/>
);
}VideoTrackonRenderElement Copy code
function LocalVideo({ track }) {
const onRenderElement = (el: Element | null) => {
if (el instanceof HTMLVideoElement) {
el.style.transform = "scaleX(-1)";
el.style.transformOrigin = "center";
el.style.backfaceVisibility = "hidden";
}
};
return (
<VideoTrack
trackRef={track}
key={track?.publication?.trackSid}
// hypothetical prop name; if your version supports it, use it
onRenderElement={onRenderElement as any}
/>
);
}VideoTrackref.lk-video-element@livekit/components-reactVideoTrackref2 Views