Update CSS for mirroring local video (#691)

This helps to workaround a Safari CSS issue related to transforms

Author: timmydoza

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', () => {

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),
   };