Update CSS for mirroring local video (#691)

This helps to workaround a Safari CSS issue related to transforms
twilio · Jun 1, 2022 · 962ebec · 962ebec
1 parent 5060ac2
commit 962ebec
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/VideoTrack/VideoTrack.test.tsx b/src/components/VideoTrack/VideoTrack.test.tsx
@@ -61,7 +61,7 @@ describe('the VideoTrack component', () => {
 
   it('should flip the video horizontally if the track is local', () => {
     const { container } = render(<VideoTrack track={mockTrack} isLocal />);
-    expect(container.querySelector('video')!.style.transform).toEqual('rotateY(180deg)');
+    expect(container.querySelector('video')!.style.transform).toEqual('scaleX(-1)');
   });
 
   it('should not flip the video horizontally if the track is the local rear-facing camera', () => {

diff --git a/src/components/VideoTrack/VideoTrack.tsx b/src/components/VideoTrack/VideoTrack.tsx
@@ -46,7 +46,7 @@ export default function VideoTrack({ track, isLocal, priority }: VideoTrackProps
   // The local video track is mirrored if it is not facing the environment.
   const isFrontFacing = mediaStreamTrack?.getSettings().facingMode !== 'environment';
   const style = {
-    transform: isLocal && isFrontFacing ? 'rotateY(180deg)' : '',
+    transform: isLocal && isFrontFacing ? 'scaleX(-1)' : '',
     objectFit: isPortrait || track.name.includes('screen') ? ('contain' as const) : ('cover' as const),
   };