added unsupported view for camera UI

src/website/packages/fakeyou.com/src/components/common/Camera/Camera.scss

@@ -0,0 +1,14 @@
+.fy-webcam-not-supported {
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: rgba(#fff, 0.66);
+
+	svg {
+		color: rgba(#fff, 0.33);
+		height: 15%;
+		margin-bottom: 1rem;
+	}
+}

src/website/packages/fakeyou.com/src/components/common/Camera/Camera.tsx

@@ -0,0 +1,44 @@
+import React, { RefObject } from "react";
+import Webcam from "react-webcam";
+import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome";
+import { faCameraSlash } from "@fortawesome/pro-solid-svg-icons";
+import "./Camera.scss";
+
+interface Props {
+  cameraPosition?: string;
+  cameraRef: RefObject<Webcam>;
+  className?: string;
+  onUserMedia?: () => void;
+}
+
+export default function Camera({
+  cameraPosition,
+  cameraRef,
+  className,
+  onUserMedia,
+}: Props) {
+  return MediaRecorder.isTypeSupported("video/mp4") ? (
+    <Webcam
+      audio
+      {...{
+        className,
+        muted: true,
+        onUserMedia,
+        ref: cameraRef,
+        videoConstraints: {
+          width: 512,
+          height: 512,
+          facingMode:
+            cameraPosition === "user"
+              ? cameraPosition
+              : { exact: cameraPosition },
+        },
+      }}
+    />
+  ) : (
+    <div {...{ className: "fy-webcam-not-supported" }}>
+      <Icon {...{ icon: faCameraSlash }} />
+      Sorry, we currently do not support webcam recording in your browser.
+    </div>
+  );
+}

src/website/packages/fakeyou.com/src/components/common/Camera/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Camera";

src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.scss

@@ -12,6 +12,10 @@
 	overflow: hidden;
 	cursor: pointer;
 
+	&.fy-camera-input-unsuported {
+		cursor: not-allowed;
+	}
+
 	.fy-camera-input-preview {
 		// background: red;
 		position: absolute;

src/website/packages/fakeyou.com/src/components/common/CameraInput/CameraInput.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import Webcam from "react-webcam";
 import { a, TransitionFn, useTransition } from "@react-spring/web";
 import { useCameraState, useMedia, useModal } from "hooks";
 import { CameraCapture } from "components/modals";
-import { Button, RecordToggle } from "components/common";
+import { Camera, Button, RecordToggle } from "components/common";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCameraSlash } from "@fortawesome/pro-solid-svg-icons";
 import "./CameraInput.scss";
 
 export interface CameraInputEvent {
@@ -27,6 +28,7 @@ export default function CameraInput({
   const camera = useCameraState(true);
   const [token, tokenSet] = useState("");
   const { bucketUrl } = useMedia({ mediaToken: token });
+  const cameraSupported = MediaRecorder.isTypeSupported("video/mp4");
 
   const cameraClick = () =>
     open({
@@ -62,7 +64,14 @@ export default function CameraInput({
   };
 
   return (
-    <div {...{ className: "fy-camera-input", onClick: cameraClick }}>
+    <div
+      {...{
+        className: `fy-camera-input${
+          cameraSupported ? "" : " fy-camera-input-unsuported"
+        }`,
+        ...(cameraSupported ? { onClick: cameraClick } : {}),
+      }}
+    >
       {transitions((style: any, hasToken: boolean) =>
         hasToken ? (
           <a.div
@@ -93,35 +102,35 @@ export default function CameraInput({
               style,
             }}
           >
-            <Webcam
-              audio
-              {...{
-                muted: true,
-                // onUserMedia: () => cameraStartedSet(true),
-                ref: camera.ref,
-                videoConstraints: {
-                  width: 512,
-                  height: 512,
-                  facingMode: "user",
-                  // facingMode:
-                  //   cameraPosition === "user"
-                  //     ? cameraPosition
-                  //     : { exact: cameraPosition },
-                },
-              }}
-            />
-            <div
-              {...{
-                className: "fy-camera-input-toggle-container",
-              }}
-            >
-              <RecordToggle
-                {...{
-                  className: "fy-camera-input-toggle",
-                  value: false,
-                }}
-              />
-            </div>
+            {MediaRecorder.isTypeSupported("video/mp4") ? (
+              <>
+                <Camera
+                  {...{
+                    cameraPosition: "user",
+                    muted: true,
+                    cameraRef: camera.ref,
+                  }}
+                />
+                <div
+                  {...{
+                    className: "fy-camera-input-toggle-container",
+                  }}
+                >
+                  <RecordToggle
+                    {...{
+                      className: "fy-camera-input-toggle",
+                      value: false,
+                    }}
+                  />
+                </div>
+              </>
+            ) : (
+              <div {...{ className: "fy-webcam-not-supported" }}>
+                <FontAwesomeIcon {...{ icon: faCameraSlash }} />
+                Sorry, we currently do not support webcam recording in your
+                browser.
+              </div>
+            )}
           </a.div>
         )
       )}

src/website/packages/fakeyou.com/src/components/common/index.tsx

@@ -7,6 +7,7 @@ import BasicTabs from "./BasicTabs";
 import BookmarkButton from "./BookmarkButton";
 import Button from "./Button";
 import ButtonRevertToDefault from "./ButtonRevertToDefault";
+import Camera from "./Camera";
 import CameraInput, { CameraInputEvent } from "./CameraInput";
 import Checkbox from "./Checkbox";
 import { MediaCards, SkeletonCard, WeightsCards } from "./Card";
@@ -78,6 +79,7 @@ export {
   BasicTabs,
   BookmarkButton,
   Button,
+  Camera,
   CameraInput,
   //Cards
   DeviceNotSupported,

src/website/packages/fakeyou.com/src/components/modals/CameraCapture/CameraCapture.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from "react";
-import Webcam from "react-webcam";
 import { a, TransitionFn, useTransition } from "@react-spring/web";
 import { WorkIndicator } from "components/svg";
 import { CameraState, useCameraState, useMediaUploader } from "hooks";
 import { UploaderResponse } from "components/entities/EntityTypes";
 import {
+  Camera,
   Button,
   ModalUtilities,
   RecordToggle,
@@ -102,21 +102,13 @@ export default function CameraCapture({
       {transitions((style: any, i: number) => {
         return [
           <a.div {...{ className: "fy-camera-capture-slide", style }}>
-            <Webcam
-              audio
+            <Camera
               {...{
-                muted: true,
+                // muted: true,
                 className: "fy-camera-capture-display",
                 onUserMedia: () => camera.startedSet(true),
-                ref: camera.ref,
-                videoConstraints: {
-                  width: 512,
-                  height: 512,
-                  facingMode:
-                    cameraPosition === "user"
-                      ? cameraPosition
-                      : { exact: cameraPosition },
-                },
+                cameraPosition,
+                cameraRef: camera.ref,
               }}
             />
             {camera.started ? (