fix: changed camera package

mst-mkt · Sep 6, 2024 · d98d674 · d98d674
1 parent c32b9ff
commit d98d674
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 176 deletions.
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -14,8 +14,8 @@
     "@tanstack/router-devtools": "^1.52.5",
     "hono": "^4.5.11",
     "react": "^18.3.1",
-    "react-camera-pro": "^1.4.0",
     "react-dom": "^18.3.1",
+    "react-webcam": "^7.2.0",
     "tailwind-merge": "^2.5.2",
     "zod": "^3.23.8"
   },

diff --git a/apps/frontend/src/routes/_app/upload/.camera.tsx b/apps/frontend/src/routes/_app/upload/.camera.tsx
@@ -1,12 +1,11 @@
-import { IconCamera, IconCameraPlus, IconRotate, IconX } from '@tabler/icons-react'
+import { IconCamera, IconCameraPlus, IconX } from '@tabler/icons-react'
 import { type Dispatch, type FC, type SetStateAction, useCallback, useRef } from 'react'
-import { Camera, type CameraType } from 'react-camera-pro'
+import Webcam from 'react-webcam'
 import { twJoin } from 'tailwind-merge'
 import { IconButton } from '../../../components/common/IconButton'
 import { useModal } from '../../../hooks/useModal'
 import { apiClient } from '../../../lib/apiClient'
 import type { FoodImage } from '../../../types/FoodTypes'
-import { imageDataToFile } from '../../../utils/imageDataToFile'
 
 type CameraButtonProps = {
   setIsLoading: Dispatch<SetStateAction<boolean>>
@@ -20,10 +19,10 @@ export const CameraButton: FC<CameraButtonProps> = ({
   setSelectedFoods,
 }) => {
   const { Modal, open, close } = useModal()
-  const cameraRef = useRef<CameraType>(null)
+  const webcamRef = useRef<Webcam>(null)
 
   const handlerClick = useCallback(async () => {
-    await navigator.mediaDevices.getUserMedia({ video: true })
+    await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
     open()
   }, [open])
 
@@ -45,10 +44,13 @@ export const CameraButton: FC<CameraButtonProps> = ({
   )
 
   const handleTakePhoto = useCallback(async () => {
-    const imageData = cameraRef.current?.takePhoto('imgData')
-    if (typeof imageData === 'string' || imageData === undefined) return
+    const imageSrc = webcamRef.current?.getScreenshot()
+    if (!imageSrc) return
+
+    const imageFile = await fetch(imageSrc)
+      .then((res) => res.blob())
+      .then((blob) => new File([blob], 'screenshot.jpg', { type: 'image/jpeg' }))
 
-    const imageFile = imageDataToFile(imageData)
     uploadFiles(imageFile)
   }, [uploadFiles])
 
@@ -67,16 +69,18 @@ export const CameraButton: FC<CameraButtonProps> = ({
       </button>
       <Modal title="カメラ">
         <div className="relative overflow-hidden rounded-md">
-          <Camera ref={cameraRef} errorMessages={{}} aspectRatio={4 / 3} />
+          <Webcam
+            ref={webcamRef}
+            audio={false}
+            screenshotFormat="image/jpeg"
+            videoConstraints={{
+              facingMode: 'environment',
+              aspectRatio: 4 / 3,
+            }}
+          />
         </div>
         <div className="flex items-center justify-center gap-x-8">
           <IconButton icon={IconCamera} onClick={handleTakePhoto} size={24} className="order-2" />
-          <IconButton
-            icon={IconRotate}
-            onClick={() => cameraRef.current?.switchCamera()}
-            size={24}
-            className="order-1"
-          />
           <IconButton icon={IconX} onClick={() => close()} size={24} className="order-3" />
         </div>
       </Modal>