diff --git a/src/components/Common/AvatarEditModal.tsx b/src/components/Common/AvatarEditModal.tsx index 3c278ea80b0..7ef393d0fa8 100644 --- a/src/components/Common/AvatarEditModal.tsx +++ b/src/components/Common/AvatarEditModal.tsx @@ -62,8 +62,8 @@ const AvatarEditModal = ({ const [selectedFile, setSelectedFile] = useState(); const [preview, setPreview] = useState(); const [isCameraOpen, setIsCameraOpen] = useState(false); - const webRef = useRef(null); - const [previewImage, setPreviewImage] = useState(null); + const webRef = useRef(null); + const [previewImage, setPreviewImage] = useState(null); const [isCaptureImgBeingUploaded, setIsCaptureImgBeingUploaded] = useState(false); const [constraint, setConstraint] = useState( @@ -81,16 +81,35 @@ const AvatarEditModal = ({ }, []); const captureImage = () => { - setPreviewImage(webRef.current.getScreenshot()); - const canvas = webRef.current.getCanvas(); - canvas?.toBlob((blob: Blob) => { - const myFile = new File([blob], "image.png", { - type: blob.type, - }); - setSelectedFile(myFile); + if (webRef.current) { + setPreviewImage(webRef.current.getScreenshot()); + } + const canvas = webRef.current?.getCanvas(); + canvas?.toBlob((blob) => { + if (blob) { + const myFile = new File([blob], "image.png", { + type: blob.type, + }); + setSelectedFile(myFile); + } else { + toast.error(t("failed_to_capture_image")); + } }); }; - + const stopCamera = useCallback(() => { + try { + if (webRef.current) { + const openCamera = webRef.current?.video?.srcObject as MediaStream; + if (openCamera) { + openCamera.getTracks().forEach((track) => track.stop()); + } + } + } catch { + toast.error("Failed to stop camera"); + } finally { + setIsCameraOpen(false); + } + }, []); const closeModal = () => { setPreview(undefined); setIsProcessing(false); @@ -410,7 +429,7 @@ const AvatarEditModal = ({ onClick={() => { setPreviewImage(null); setIsCameraOpen(false); - webRef.current.stopCamera(); + stopCamera(); }} disabled={isProcessing} >