Skip to content

Commit

Permalink
Refine CameraButton component capture logic
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
mikepsinn committed Sep 16, 2024
1 parent 11c1b51 commit d622f90
Showing 1 changed file with 9 additions and 7 deletions.
16 changes: 9 additions & 7 deletions apps/nextjs/components/CameraButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
};

Expand Down

0 comments on commit d622f90

Please sign in to comment.