Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 3x 3x | import { Box, IconButton } from "@mui/material";
import { palette } from "@palette";
import { TrashIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { useState } from "react";
import Webcam from "react-webcam";
export const CameraFlow = ({
data,
webcamRef,
retakePhoto,
}: {
data: string | null;
webcamRef: any;
retakePhoto?: () => void;
}) => {
const [isError, seIsError] = useState(false);
return (
<>
{data ? (
<Box>
<img
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
width: "100%",
height: "100%",
objectFit: "cover",
borderRadius: "8px",
}}
src={data}
onLoad={(e) => {
seIsError(false);
}}
onError={(e) => {
seIsError(true);
}}
/>
{isError && <GiveText>Failed to load the image</GiveText>}
{retakePhoto && (
<IconButton
sx={{
position: "absolute",
bottom: "8px",
right: "8px",
bgcolor: "#FFFFFF99",
border: "none",
boxShadow: "none",
borderRadius: "50%",
}}
onClick={retakePhoto}
>
<TrashIcon size={25} color={palette.filled.red} />
</IconButton>
)}
</Box>
) : (
<WebcamCapture webcamRef={webcamRef} />
)}
</>
);
};
export const WebcamCapture = ({ webcamRef }: any) => {
return (
<Webcam
ref={webcamRef}
autoFocus
audio={false}
videoConstraints={{
width: 3000,
height: 3000,
facingMode: "user",
}}
screenshotQuality={1}
screenshotFormat="image/jpeg"
style={{
borderRadius: "16px",
height: "364px",
width: "355px",
backgroundColor: "black",
objectFit: "cover",
maxWidth: "100%",
}}
/>
);
};
|