fix flipping video logic on mobile devices

beeracademy · Jul 28, 2024 · d55ac36 · d55ac36
1 parent a4a8c97
commit d55ac36
Showing 1 changed file with 26 additions and 18 deletions.
diff --git a/src/views/Game/components/GamFinishedDialog.tsx b/src/views/Game/components/GamFinishedDialog.tsx
@@ -164,10 +164,10 @@ const Camera: FunctionComponent = memo(() => {
 
   const { devices: cameraDevices, error: cameraError } = useVideoDevices();
 
-  const [selectedDevice, setSelectedDevice] = useState<MediaDeviceInfo | null>(
-    null,
-  );
-
+  const [selectedDeviceInfo, setSelectedDeviceInfo] =
+    useState<MediaDeviceInfo | null>(null);
+  const [selectedDeviceSettings, setSelectedDeviceSettings] =
+    useState<MediaTrackSettings | null>(null);
   const [selectedDeviceSize, setSelectedDeviceSize] = useState<{
     width: number;
     height: number;
@@ -193,22 +193,23 @@ const Camera: FunctionComponent = memo(() => {
       return;
     }
 
-    if (selectedDevice) {
+    if (selectedDeviceInfo) {
       return;
     }
 
     selectDevice(cameraDevices[0]);
   }, [cameraDevices]);
 
   const selectDevice = async (device: MediaDeviceInfo) => {
-    const meta = await getDeviceCapabilities(device.deviceId);
+    const meta = await getDeviceSettings(device.deviceId);
     const size = getScaledViewSize(meta.width, meta.height);
 
     setSelectedDeviceSize(size);
-    setSelectedDevice(device);
+    setSelectedDeviceSettings(meta);
+    setSelectedDeviceInfo(device);
   };
 
-  const getDeviceCapabilities = async (id: string) => {
+  const getDeviceSettings = async (id: string) => {
     const stream = await navigator.mediaDevices.getUserMedia({
       video: {
         deviceId: id,
@@ -222,7 +223,7 @@ const Camera: FunctionComponent = memo(() => {
 
   let countDownInterval: number;
   const takePicture = () => {
-    if (!selectedDevice || isCountingDown) {
+    if (!selectedDeviceInfo || isCountingDown) {
       return;
     }
 
@@ -279,7 +280,7 @@ const Camera: FunctionComponent = memo(() => {
     }
 
     const currentIndex = cameraDevices.findIndex(
-      (d) => d.deviceId === selectedDevice?.deviceId,
+      (d) => d.deviceId === selectedDeviceInfo?.deviceId,
     );
 
     const nextIndex = (currentIndex + 1) % cameraDevices.length;
@@ -355,9 +356,13 @@ const Camera: FunctionComponent = memo(() => {
           />
         )}
 
-        {selectedDevice && <Video device={selectedDevice} />}
+        {selectedDeviceSettings?.facingMode + ""}
 
-        {!selectedDevice && (
+        {selectedDeviceInfo && (
+          <Video info={selectedDeviceInfo} settings={selectedDeviceSettings} />
+        )}
+
+        {!selectedDeviceInfo && (
           <Box
             sx={{
               position: "absolute",
@@ -395,7 +400,7 @@ const Camera: FunctionComponent = memo(() => {
             onClick={image ? removePicture : takePicture}
             size="large"
             color={image ? "default" : "primary"}
-            disabled={!selectedDevice || isCountingDown}
+            disabled={!selectedDeviceInfo || isCountingDown}
           >
             {image ? <AiOutlineDelete size={32} /> : <BsCamera size={32} />}
           </Fab>
@@ -424,10 +429,13 @@ const Camera: FunctionComponent = memo(() => {
 });
 
 interface VideoProps {
-  device: MediaDeviceInfo | null;
+  info: MediaDeviceInfo | null;
+  settings: MediaTrackSettings | null;
 }
 
-const Video: FunctionComponent<VideoProps> = memo(({ device }) => {
+const Video: FunctionComponent<VideoProps> = memo(({ info, settings }) => {
+  const flip = !settings?.facingMode || settings.facingMode === "user";
+
   return (
     <video
       id="video"
@@ -436,14 +444,14 @@ const Video: FunctionComponent<VideoProps> = memo(({ device }) => {
       style={{
         width: "100%",
         height: "100%",
-        transform: "scaleX(-1)",
+        transform: flip ? "scaleX(-1)" : "none",
       }}
       ref={(video) => {
-        if (video && device) {
+        if (video && info) {
           navigator.mediaDevices
             .getUserMedia({
               video: {
-                deviceId: device.deviceId,
+                deviceId: info.deviceId,
               },
             })
             .then((stream) => {