import React from 'react'; import './palm-camera-modal.css'; import ModalOverlay, { ModalOverlayType } from '../modal-overlay/modal-overlay'; import Modal from '../modal/modal'; type Props = { onClose: () => void; onTakePhoto: (photo: string) => void; }; export default function PalmCameraModal(props: Props) { const videoEl = React.useRef(null); const [mediaStream, setMediaStream] = React.useState(null); const onClickOverlay = (e: React.MouseEvent) => { if (e.target === e.currentTarget) { props.onClose(); } }; const activateCamera = async () => { if (!videoEl.current) return; try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } }, }) setMediaStream(stream); videoEl.current.srcObject = stream; videoEl.current.addEventListener('loadedmetadata', videoEl.current.play); } catch(error) { console.error('Camera is not available', error); } }; const deactivateCamera = React.useCallback(() => { mediaStream?.getTracks().forEach(track => track.stop()); }, [mediaStream]); React.useEffect(() => { activateCamera(); return deactivateCamera; }, []); const takePhoto = () => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); if (!context || !videoEl.current) return null; const width = videoEl.current.videoWidth; const height = videoEl.current.videoHeight; canvas.width = width; canvas.height = height; context.drawImage(videoEl.current, 0, 0, width, height); const data = canvas.toDataURL('image/png'); return data; }; const onClickTakePhoto = () => { const photo = takePhoto(); deactivateCamera(); if (!photo) return; props.onTakePhoto(photo); }; return (