From d622f9016070ab5c602b86c6539bb032225aaaf6 Mon Sep 17 00:00:00 2001
From: "Mike P. Sinn" <m@crowdsourcingcures.org>
Date: Sun, 15 Sep 2024 21:05:06 -0500
Subject: [PATCH] Refine CameraButton component capture logic

Ensure the CameraButton component always returns a valid Blob. Added a null check for Blob instances to avoid passing null values to the onCapture callback. Enhanced the overall robustness of the image capture process.
---
 apps/nextjs/components/CameraButton.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/nextjs/components/CameraButton.tsx b/apps/nextjs/components/CameraButton.tsx
index d62ce400d..97dbd2488 100644
--- a/apps/nextjs/components/CameraButton.tsx
+++ b/apps/nextjs/components/CameraButton.tsx
@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
 
 // CameraButton component to capture images from webcam or mobile camera
-export const CameraButton = ({ onCapture }: { onCapture: (blob: Blob | null) => void }) => {
+export const CameraButton = ({ onCapture }: { onCapture: (blob: Blob) => void }) => {
   const [capturing, setCapturing] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [videoStream, setVideoStream] = useState<MediaStream | null>(null);
@@ -39,13 +39,15 @@ export const CameraButton = ({ onCapture }: { onCapture: (blob: Blob | null) =>
       const ctx = canvas.getContext('2d');
       if (ctx) {
         ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
-        canvas.toBlob(blob => onCapture(blob));
-      }
-      if (videoStream) {
-        videoStream.getTracks().forEach((track: { stop: () => any; }) => track.stop());
+        canvas.toBlob(blob => {
+          if (blob) onCapture(blob);
+        });
+        if (videoStream) {
+          videoStream.getTracks().forEach((track: { stop: () => any; }) => track.stop());
+        }
+        setShowModal(false);
+        setCapturing(false);
       }
-      setShowModal(false);
-      setCapturing(false);
     }
   };