Don't mirror rear-facing cameras in the lobby

This commit is contained in:
Robin
2024-11-01 17:26:14 -04:00
parent c9cf7aa7db
commit 7b0bdd320a
2 changed files with 11 additions and 2 deletions

View File

@@ -19,10 +19,13 @@ Please see LICENSE in the repository root for full details.
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
background-color: black; background-color: black;
transform: scaleX(-1);
background-color: var(--cpd-color-bg-subtle-primary); background-color: var(--cpd-color-bg-subtle-primary);
} }
video.mirror {
transform: scaleX(-1);
}
.avatarContainer { .avatarContainer {
position: absolute; position: absolute;
top: 0; top: 0;

View File

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