Don't mirror rear-facing cameras in the lobby

element-hq · Nov 1, 2024 · 7b0bdd3 · 7b0bdd3
1 parent c9cf7aa
commit 7b0bdd3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/room/VideoPreview.module.css b/src/room/VideoPreview.module.css
@@ -19,10 +19,13 @@ Please see LICENSE in the repository root for full details.
   height: 100%;
   object-fit: cover;
   background-color: black;
-  transform: scaleX(-1);
   background-color: var(--cpd-color-bg-subtle-primary);
 }
 
+video.mirror {
+  transform: scaleX(-1);
+}
+
 .avatarContainer {
   position: absolute;
   top: 0;

diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { useEffect, useRef, FC, ReactNode } from "react";
 import useMeasure from "react-use-measure";
-import { LocalVideoTrack } from "livekit-client";
+import { facingModeFromLocalTrack, LocalVideoTrack } from "livekit-client";
 import classNames from "classnames";
 
 import { Avatar } from "../Avatar";
@@ -56,6 +56,12 @@ export const VideoPreview: FC<Props> = ({
   return (
     <div className={classNames(styles.preview)} ref={previewRef}>
       <video
+        className={
+          videoTrack &&
+          facingModeFromLocalTrack(videoTrack).facingMode === "user"
+            ? styles.mirror
+            : undefined
+        }
         ref={videoEl}
         muted
         playsInline