From 9efac056e93aa7e3ba358814e30570148cfbb6f9 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 7 May 2026 16:22:58 +0700
Subject: [PATCH 1/8] fix ios live mode

---
 src/views/HomeView.vue | 13 +++++++++++++
 src/views/MapView.vue  | 10 ++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ab7257f..8067899 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -890,6 +890,8 @@ watch(
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :autoplay="false"
+                        :playsinline="true"
+                        :facingMode="'user'"
                         :style="!img ? 'display: block' : 'display: none'"
                       />
 
@@ -1004,6 +1006,8 @@ watch(
                           }"
                           ref="camera"
                           :autoplay="false"
+                          :playsinline="true"
+                          :facingMode="'user'"
                           :style="!img ? 'display: block' : 'display: none'"
                         />
 
@@ -1513,6 +1517,15 @@ watch(
   height: 100%;
 }
 
+/* iOS-specific video fixes */
+.card-container video,
+.card-container-xs video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-object-fit: cover;
+}
+
 .bg-topOut {
   background: rgb(39, 50, 56);
   background: linear-gradient(
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index 340308b..1b4c40f 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -335,6 +335,8 @@ onMounted(async () => {
                       :resolution="{ width: photoWidth, height: photoHeight }"
                       ref="camera"
                       :autoplay="false"
+                      :playsinline="true"
+                      :facingMode="'user'"
                       :style="!img ? 'display: block' : 'display: none'"
                     />
 
@@ -569,4 +571,12 @@ onMounted(async () => {
   width: 100%;
   height: 100%;
 }
+
+/* iOS-specific video fixes */
+.card-container video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-object-fit: cover;
+}
 </style>

From b11e660bcf0435bde9414c7dd5b5ef3acb167474 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 7 May 2026 16:47:35 +0700
Subject: [PATCH 2/8] fix(checkin): improve camera functionality and fix iOS
 Live Mode issue

- Add playsinline prop to fix iOS Live Mode photo capture issue
- Change default camera to front camera (facingMode: 'user')
- Improve photo quality: change from PNG to JPEG with quality 0.8
- Fix memory leak: add URL.revokeObjectURL() cleanup
- Add error handling for camera operations (openCamera, capturePhoto, refreshPhoto)
- Add timestamp to photo filename for uniqueness

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/views/HomeView.vue | 94 ++++++++++++++++++++++++++++--------------
 src/views/MapView.vue  | 76 +++++++++++++++++++++++-----------
 2 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8067899..dc4e8da 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -347,18 +347,23 @@ async function openCamera() {
   }
 
   if (!isPermissionCameraDenied.value) {
-    // change camera device
-    if (cameraIsOn.value) {
-      camera.value?.stop()
-    } else {
-      await camera.value?.start()
-      const devices: any = await camera.value?.devices(['videoinput'])
-      if (devices) {
-        availableCameras.value = devices
-        await changeCamera()
+    try {
+      // change camera device
+      if (cameraIsOn.value) {
+        camera.value?.stop()
+      } else {
+        await camera.value?.start()
+        const devices: any = await camera.value?.devices(['videoinput'])
+        if (devices) {
+          availableCameras.value = devices
+          await changeCamera()
+        }
       }
+      cameraIsOn.value = !cameraIsOn.value
+    } catch (error) {
+      console.error('Error opening camera:', error)
+      messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
     }
-    cameraIsOn.value = !cameraIsOn.value
   } else {
     messageError(
       $q,
@@ -428,26 +433,49 @@ async function switchCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  const imageBlob: any = await camera.value?.snapshot(
-    { width: photoWidth.value, height: photoHeight.value },
-    'image/png',
-    0.5
-  )
-  if (!imageBlob) return
-  const fileName = 'photo.jpg'
-  //ไฟล์รูป
-  const file = new File([imageBlob], fileName, { type: 'image/png' })
-  fileImg.value = file
-  //แสดงรูป
-  camera.value?.stop()
-  const url = URL.createObjectURL(imageBlob)
-  img.value = url
+  try {
+    const imageBlob: any = await camera.value?.snapshot(
+      { width: photoWidth.value, height: photoHeight.value },
+      'image/jpeg',
+      0.8
+    )
+    if (!imageBlob) {
+      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+      return
+    }
+    const fileName = `photo_${Date.now()}.jpg`
+    //ไฟล์รูป
+    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
+    fileImg.value = file
+
+    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+    }
+
+    //แสดงรูป
+    camera.value?.stop()
+    const url = URL.createObjectURL(imageBlob)
+    img.value = url
+  } catch (error) {
+    console.error('Error capturing photo:', error)
+    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** function เปลี่ยนรูปภาพ*/
-function refreshPhoto() {
-  img.value = undefined
-  camera.value?.start()
+async function refreshPhoto() {
+  try {
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
+    await camera.value?.start()
+  } catch (error) {
+    console.error('Error refreshing photo:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** ref validate*/
@@ -627,7 +655,11 @@ async function onClickConfirm() {
   try {
     showLoader()
     cameraIsOn.value = false
-    img.value = undefined
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
     modalTime.value = false
     if (!statusCheckin.value) {
       statusCheckin.value = true
@@ -665,7 +697,9 @@ const inQueue = ref<boolean>(false)
 
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
+  // ยกเลิก URL เก่า (ป้องกัน memory leak)
   if (img.value) {
+    URL.revokeObjectURL(img.value)
     img.value = undefined
   }
   if (cameraIsOn.value && camera.value) {
@@ -885,14 +919,12 @@ watch(
                     </div>
                     <div class="col-12 row items-center">
                       <!-- แสดงกล้องตอนกดถ่ายภาพ -->
-
                       <Camera
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
-                        :style="!img ? 'display: block' : 'display: none'"
                       />
 
                       <!-- แสดงรูปเมื่อกด capture -->
@@ -998,7 +1030,6 @@ watch(
                       </div>
                       <div class="col-12 row items-center">
                         <!-- แสดงกล้องตอนกดถ่ายภาพ -->
-
                         <Camera
                           :resolution="{
                             width: photoWidth,
@@ -1008,7 +1039,6 @@ watch(
                           :autoplay="false"
                           :playsinline="true"
                           :facingMode="'user'"
-                          :style="!img ? 'display: block' : 'display: none'"
                         />
 
                         <!-- แสดงรูปเมื่อกด capture -->
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index 1b4c40f..5f7edc9 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -133,14 +133,19 @@ const photoHeight = ref<number>(350)
 
 /** function เปิดกล้อง */
 async function openCamera() {
-  // change camera device
-  if (cameraIsOn.value) {
-    camera.value?.stop()
-  } else {
-    await camera.value?.start()
-    changeCamera()
+  try {
+    // change camera device
+    if (cameraIsOn.value) {
+      camera.value?.stop()
+    } else {
+      await camera.value?.start()
+      changeCamera()
+    }
+    cameraIsOn.value = !cameraIsOn.value
+  } catch (error) {
+    console.error('Error opening camera:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
   }
-  cameraIsOn.value = !cameraIsOn.value
 }
 
 /** change camera device */
@@ -152,25 +157,49 @@ async function changeCamera() {
 
 /** function ถ่ายรูป*/
 async function capturePhoto() {
-  const imageBlob: any = await camera.value?.snapshot(
-    { width: photoWidth.value, height: photoHeight.value },
-    'image/png',
-    0.5
-  )
-  const fileName = 'photo.png'
-  //ไฟล์รูป
-  const file = new File([imageBlob], fileName, { type: 'image/png' })
-  fileImg.value = file
-  //แสดงรูป
-  camera.value?.stop()
-  const url = URL.createObjectURL(imageBlob)
-  img.value = url
+  try {
+    const imageBlob: any = await camera.value?.snapshot(
+      { width: photoWidth.value, height: photoHeight.value },
+      'image/jpeg',
+      0.8
+    )
+    if (!imageBlob) {
+      messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+      return
+    }
+    const fileName = `photo_${Date.now()}.jpg`
+    //ไฟล์รูป
+    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
+    fileImg.value = file
+
+    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+    }
+
+    //แสดงรูป
+    camera.value?.stop()
+    const url = URL.createObjectURL(imageBlob)
+    img.value = url
+  } catch (error) {
+    console.error('Error capturing photo:', error)
+    messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** function เปลี่ยนรูปภาพ*/
-function refreshPhoto() {
-  img.value = undefined
-  camera.value?.start()
+async function refreshPhoto() {
+  try {
+    // ยกเลิก URL เก่า (ป้องกัน memory leak)
+    if (img.value) {
+      URL.revokeObjectURL(img.value)
+      img.value = undefined
+    }
+    await camera.value?.start()
+  } catch (error) {
+    console.error('Error refreshing photo:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** ref validate*/
@@ -337,7 +366,6 @@ onMounted(async () => {
                       :autoplay="false"
                       :playsinline="true"
                       :facingMode="'user'"
-                      :style="!img ? 'display: block' : 'display: none'"
                     />
 
                     <!-- แสดงรูปเมื่อกด capture -->

From 9fde2b3984d84e8f58f491d6619a1ec2ea9ecdd2 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 11:13:39 +0700
Subject: [PATCH 3/8] Fix mobile photo capture fallbacks

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/views/HomeView.vue | 276 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 244 insertions(+), 32 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index dc4e8da..f5f3b52 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -89,7 +89,7 @@ const formattedM = ref()
 const formattedH = ref()
 const formattedHH = ref()
 const formattedA = ref()
-const clockInterval = ref<number | undefined>()
+const clockInterval = ref<ReturnType<typeof setInterval> | undefined>()
 
 /** function อัพเดทเวลา*/
 function updateClock() {
@@ -118,6 +118,7 @@ const useLocation = ref<string>('') //กรณีเลือกนอกสถ
 const fileImg = ref<any>() //รูปถ่ายสถานที่
 const remark = ref<string>('') //ข้อความหมายเหตุที่ต้องการระบุเพิ่ม
 const checkInId = ref<string>('') //Id ลงเวลา check-in ล่าสุดที่ยังไม่ลงเวลาออก
+const MIN_CAPTURE_FILE_SIZE_BYTES = 5 * 1024
 
 /**
  *  funciton เรียกพิกัดละติจูด พิกัดลองติจูด
@@ -219,7 +220,123 @@ const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
-const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
+/**
+ * Use the native still-photo picker only on real iOS/iPadOS devices.
+ * Desktop mobile emulation can spoof the iPhone user-agent, so rely on
+ * platform + touch capability instead of user-agent alone.
+ */
+const isIOSDevice: boolean = (() => {
+  const platform = navigator.platform || ''
+  const hasTouchPoints = navigator.maxTouchPoints > 1
+
+  return (
+    /iPhone|iPad|iPod/.test(platform) ||
+    (platform === 'MacIntel' && hasTouchPoints)
+  )
+})()
+
+const isAndroidDevice: boolean = /Android/i.test(navigator.userAgent)
+const preferNativePhotoCapture = ref<boolean>(false)
+const useNativePhotoCapture = computed(
+  () => isIOSDevice || preferNativePhotoCapture.value
+)
+const centeredPreviewImageStyle = Object.freeze({
+  objectFit: 'cover',
+  objectPosition: 'center center',
+})
+
+/** Ref for the hidden file input used as native camera fallback */
+const nativePhotoInput = ref<HTMLInputElement | null>(null)
+
+function clearSelectedPhoto() {
+  if (img.value) {
+    URL.revokeObjectURL(img.value)
+    img.value = undefined
+  }
+  fileImg.value = undefined
+}
+
+async function canDecodeImageBlob(blob: Blob) {
+  if (!blob.type.startsWith('image/')) {
+    return false
+  }
+
+  const imageUrl = URL.createObjectURL(blob)
+
+  try {
+    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const element = new Image()
+      element.onload = () => {
+        if (element.naturalWidth > 0 && element.naturalHeight > 0) {
+          resolve(element)
+        } else {
+          reject(new Error('Image has invalid dimensions'))
+        }
+      }
+      element.onerror = () => reject(new Error('Image decode failed'))
+      element.src = imageUrl
+    })
+
+    return image.naturalWidth > 0 && image.naturalHeight > 0
+  } catch (error) {
+    console.error('Error decoding captured image:', error)
+    return false
+  } finally {
+    URL.revokeObjectURL(imageUrl)
+  }
+}
+
+async function isValidCapturedImage(blob: Blob) {
+  if (blob.size < MIN_CAPTURE_FILE_SIZE_BYTES) {
+    return false
+  }
+
+  return canDecodeImageBlob(blob)
+}
+
+async function assignSelectedPhoto(file: File) {
+  clearSelectedPhoto()
+  fileImg.value = file
+  img.value = URL.createObjectURL(file)
+}
+
+function openNativePhotoCapture() {
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+    cameraIsOn.value = false
+  }
+
+  if (nativePhotoInput.value) {
+    nativePhotoInput.value.value = ''
+    nativePhotoInput.value.click()
+  }
+}
+
+/**
+ * Called when the user selects / captures a photo via the native file-input
+ * fallback. Mirrors the same `img` + `fileImg` state that capturePhoto()
+ * sets so the upload flow is identical.
+ */
+async function onNativePhotoSelected(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+
+  if (!(await isValidCapturedImage(file))) {
+    clearSelectedPhoto()
+    messageError(
+      $q,
+      '',
+      'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง'
+    )
+    return
+  }
+
+  await assignSelectedPhoto(file)
+}
+
+const intervalId = ref<ReturnType<typeof setInterval> | undefined>(undefined)
 
 /**
  * เริ่มจาก onMounted #1 เช็ค status คิว
@@ -346,17 +463,34 @@ async function openCamera() {
     return
   }
 
+  // iOS Safari fallback: getUserMedia can open native video-recording UI and
+  // canvas.drawImage may produce a blank blob.  Use the hidden file input
+  // with capture="user" instead — this opens the native camera in photo mode.
+  if (useNativePhotoCapture.value) {
+    openNativePhotoCapture()
+    return
+  }
+
   if (!isPermissionCameraDenied.value) {
     try {
-      // change camera device
       if (cameraIsOn.value) {
         camera.value?.stop()
       } else {
+        // Keep the initial stream aligned with the Camera component's front-camera constraint.
         await camera.value?.start()
         const devices: any = await camera.value?.devices(['videoinput'])
         if (devices) {
           availableCameras.value = devices
-          await changeCamera()
+
+          // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
+          const activeId = camera.value?.currentDeviceID()
+          const activeIdx = activeId
+            ? devices.findIndex((d: any) => d.deviceId === activeId)
+            : -1
+          currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+          currentCameraType.value = identifyCameraType(
+            devices[currentCameraIndex.value]?.label || ''
+          )
         }
       }
       cameraIsOn.value = !cameraIsOn.value
@@ -439,24 +573,30 @@ async function capturePhoto() {
       'image/jpeg',
       0.8
     )
-    if (!imageBlob) {
+    if (!imageBlob || !(await isValidCapturedImage(imageBlob))) {
+      if (isAndroidDevice) {
+        preferNativePhotoCapture.value = true
+        camera.value?.stop()
+        cameraIsOn.value = false
+        clearSelectedPhoto()
+        messageError(
+          $q,
+          '',
+          'ไม่สามารถอ่านรูปจากกล้องของอุปกรณ์ได้ กรุณาถ่ายใหม่อีกครั้ง ระบบจะเปลี่ยนไปใช้โหมดถ่ายภาพของอุปกรณ์'
+        )
+        return
+      }
+
       messageError($q, '', 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
       return
     }
     const fileName = `photo_${Date.now()}.jpg`
     //ไฟล์รูป
     const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
-    fileImg.value = file
-
-    // ยกเลิก URL เก่าก่อนสร้างใหม่ (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-    }
+    await assignSelectedPhoto(file)
 
     //แสดงรูป
     camera.value?.stop()
-    const url = URL.createObjectURL(imageBlob)
-    img.value = url
   } catch (error) {
     console.error('Error capturing photo:', error)
     messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
@@ -466,10 +606,11 @@ async function capturePhoto() {
 /** function เปลี่ยนรูปภาพ*/
 async function refreshPhoto() {
   try {
-    // ยกเลิก URL เก่า (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-      img.value = undefined
+    clearSelectedPhoto()
+
+    if (useNativePhotoCapture.value) {
+      openNativePhotoCapture()
+      return
     }
     await camera.value?.start()
   } catch (error) {
@@ -552,6 +693,22 @@ async function confirm() {
     return
   }
 
+  if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
+    if (isAndroidDevice) {
+      preferNativePhotoCapture.value = true
+      camera.value?.stop()
+      cameraIsOn.value = false
+    }
+    clearSelectedPhoto()
+    disabledBtn.value = false
+    messageError(
+      $q,
+      '',
+      'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา'
+    )
+    return
+  }
+
   showLoader()
   const isLocation = workplace.value === 'in-place' //*true คือ ณ สถานที่ตั้ง, false คือ นอกสถานที่ตั้ง
   const locationName = workplace.value === 'in-place' ? '' : useLocation.value
@@ -655,11 +812,7 @@ async function onClickConfirm() {
   try {
     showLoader()
     cameraIsOn.value = false
-    // ยกเลิก URL เก่า (ป้องกัน memory leak)
-    if (img.value) {
-      URL.revokeObjectURL(img.value)
-      img.value = undefined
-    }
+    clearSelectedPhoto()
     modalTime.value = false
     if (!statusCheckin.value) {
       statusCheckin.value = true
@@ -697,11 +850,7 @@ const inQueue = ref<boolean>(false)
 
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
-  // ยกเลิก URL เก่า (ป้องกัน memory leak)
-  if (img.value) {
-    URL.revokeObjectURL(img.value)
-    img.value = undefined
-  }
+  clearSelectedPhoto()
   if (cameraIsOn.value && camera.value) {
     camera.value.stop()
     cameraIsOn.value = false
@@ -735,7 +884,12 @@ const isPermissionCameraDenied = ref<boolean>(false) // ตัวแปรสำ
 
 async function requestCamera() {
   try {
-    await navigator.mediaDevices.getUserMedia({ video: true })
+    // Probe camera permission with the same front-camera constraint, then release the stream immediately.
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: 'user' },
+      audio: false,
+    })
+    stream.getTracks().forEach((track) => track.stop())
   } catch (err) {
     isPermissionCameraDenied.value = true
   }
@@ -760,7 +914,8 @@ onMounted(async () => {
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
-    requestCamera()
+    // iOS uses the file-input fallback and does not need a getUserMedia probe
+    if (!useNativePhotoCapture.value) requestCamera()
   }
 })
 
@@ -802,7 +957,8 @@ watch(
   (newVal) => {
     if (newVal) {
       mapRef.value?.requestLocationPermission()
-      requestCamera()
+      // iOS uses the file-input fallback and does not need a getUserMedia probe
+      if (!useNativePhotoCapture.value) requestCamera()
     }
   }
 )
@@ -929,7 +1085,26 @@ watch(
 
                       <!-- แสดงรูปเมื่อกด capture -->
                       <div v-if="img" class="image-container">
-                        <q-img :src="img" class="image-element"></q-img>
+                        <q-img
+                          :src="img"
+                          class="image-element"
+                          :img-style="centeredPreviewImageStyle"
+                        ></q-img>
+                        <!-- Native capture: cameraIsOn stays false so show retake here
+                             the refresh button here instead of inside v-if="cameraIsOn" -->
+                        <div
+                          v-if="useNativePhotoCapture"
+                          class="absolute-bottom-right q-ma-md"
+                        >
+                          <q-btn
+                            round
+                            push
+                            icon="refresh"
+                            size="md"
+                            color="negative"
+                            @click="refreshPhoto"
+                          />
+                        </div>
                       </div>
 
                       <div v-if="cameraIsOn">
@@ -1043,7 +1218,27 @@ watch(
 
                         <!-- แสดงรูปเมื่อกด capture -->
                         <div v-if="img" class="image-container">
-                          <q-img :src="img" class="image-element"></q-img>
+                          <q-img
+                            :src="img"
+                            class="image-element"
+                            :img-style="centeredPreviewImageStyle"
+                          ></q-img>
+                          <!-- Native capture: cameraIsOn stays false so show retake here
+                               the refresh button here instead of inside v-if="cameraIsOn" -->
+                          <div
+                            v-if="useNativePhotoCapture"
+                            class="absolute-bottom text-subtitle2 text-center q-py-sm"
+                            style="background: #00000021"
+                          >
+                            <q-btn
+                              round
+                              icon="refresh"
+                              size="18px"
+                              style="background: #263238; color: white"
+                              @click="refreshPhoto"
+                              unelevated
+                            />
+                          </div>
                         </div>
 
                         <div v-if="cameraIsOn">
@@ -1497,6 +1692,21 @@ watch(
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!--
+    Native still-image fallback: hidden file input.
+    Used for iOS by default and for Android only after the live snapshot path
+    produces an unreadable image, so the user can retake with the device camera.
+  -->
+  <input
+    v-if="useNativePhotoCapture"
+    ref="nativePhotoInput"
+    type="file"
+    accept="image/*"
+    capture="user"
+    style="display: none"
+    @change="onNativePhotoSelected"
+  />
 </template>
 
 <style scoped>
@@ -1533,6 +1743,8 @@ watch(
   left: 0;
   width: 100%;
   height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
 .image-element {

From 92f9137cbb3075ef1294884b9fa766f0eee8942e Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 11:27:03 +0700
Subject: [PATCH 4/8] memory agent

---
 .claude/agent-memory/hrms-checkin-expert/MEMORY.md    |  1 +
 .../project_active_camera_scope.md                    | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index 7897460..29df51c 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -7,3 +7,4 @@
 ## Project Issues & Fixes
 
 - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
+- [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue
diff --git a/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md
new file mode 100644
index 0000000..a10c142
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/project_active_camera_scope.md
@@ -0,0 +1,11 @@
+---
+name: Active camera investigation scope
+description: Current camera issue investigations should focus on HomeView.vue; the legacy Google Map MapView.vue flow is not in active use
+type: project
+---
+
+Current camera issue work should focus on `HomeView.vue`; do not investigate or modify the legacy Google Map `MapView.vue` flow for this issue.
+
+**Why:** The user clarified that `MapView.vue` is an older Google Map implementation from earlier work and is not the path currently used in production for this check-in flow.
+
+**How to apply:** For follow-up debugging or fixes related to the current camera/upload issue, scope analysis and implementation to `HomeView.vue` unless the user explicitly re-opens `MapView.vue`.

From 30a8f0144135702a27e6da6313a85e447c42ec2f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 11:30:41 +0700
Subject: [PATCH 5/8] fix permission request & display photo center

---
 src/composables/usePermissions.ts | 185 ++++++++++++++++++++++++------
 src/views/HomeView.vue            |  87 +++++++-------
 2 files changed, 191 insertions(+), 81 deletions(-)

diff --git a/src/composables/usePermissions.ts b/src/composables/usePermissions.ts
index ecf1ef3..b92ed29 100644
--- a/src/composables/usePermissions.ts
+++ b/src/composables/usePermissions.ts
@@ -1,52 +1,171 @@
-import { useQuasar } from 'quasar'
+import { onBeforeUnmount, ref } from 'vue'
 import { usePrivacyStore } from '@/stores/privacy'
 
+type BrowserPermissionState = PermissionState | 'unsupported'
+
+type PermissionQueryName = 'camera' | 'geolocation'
+
 export function usePermissions() {
-  const $q = useQuasar()
   const privacyStore = usePrivacyStore()
+  const cameraPermissionState = ref<BrowserPermissionState>('prompt')
+  const locationPermissionState = ref<BrowserPermissionState>('prompt')
 
-  // const checkCameraPermission = (): boolean => {
-  //   if (!privacyStore.isAccepted) {
-  //     privacyStore.modalPrivacy = true
-  //     $q.notify({
-  //       type: 'warning',
-  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานกล้อง',
-  //       position: 'top',
-  //     })
-  //     return false
-  //   }
-  //   return true
-  // }
+  let cameraPermissionStatus: PermissionStatus | null = null
+  let locationPermissionStatus: PermissionStatus | null = null
 
-  // const checkLocationPermission = (): boolean => {
-  //   if (!privacyStore.isAccepted) {
-  //     privacyStore.modalPrivacy = true
-  //     $q.notify({
-  //       type: 'warning',
-  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
-  //       position: 'top',
-  //     })
-  //     return false
-  //   }
-  //   return true
-  // }
+  const isPermissionsApiSupported = () =>
+    typeof navigator !== 'undefined' && 'permissions' in navigator
+
+  const setPermissionState = (
+    target: typeof cameraPermissionState | typeof locationPermissionState,
+    state: BrowserPermissionState
+  ) => {
+    target.value = state
+  }
+
+  const setPermissionChangeListener = (
+    name: PermissionQueryName,
+    status: PermissionStatus
+  ) => {
+    status.onchange = () => {
+      const target =
+        name === 'camera' ? cameraPermissionState : locationPermissionState
+      setPermissionState(target, status.state)
+    }
+  }
+
+  async function queryPermissionState(name: PermissionQueryName) {
+    if (!isPermissionsApiSupported()) {
+      return null
+    }
+
+    try {
+      return await navigator.permissions.query({ name } as PermissionDescriptor)
+    } catch (error) {
+      return null
+    }
+  }
+
+  async function syncPermissionState(name: PermissionQueryName) {
+    const target =
+      name === 'camera' ? cameraPermissionState : locationPermissionState
+    const previousStatus =
+      name === 'camera' ? cameraPermissionStatus : locationPermissionStatus
+
+    if (previousStatus) {
+      previousStatus.onchange = null
+    }
+
+    const status = await queryPermissionState(name)
+    if (!status) {
+      if (target.value === 'prompt') {
+        setPermissionState(target, 'unsupported')
+      }
+      return
+    }
+
+    if (name === 'camera') {
+      cameraPermissionStatus = status
+    } else {
+      locationPermissionStatus = status
+    }
+
+    setPermissionState(target, status.state)
+    setPermissionChangeListener(name, status)
+  }
+
+  async function syncPermissionStates() {
+    await Promise.all([
+      syncPermissionState('camera'),
+      syncPermissionState('geolocation'),
+    ])
+  }
 
   const checkPrivacyAccepted = (): boolean => {
     if (!privacyStore.isAccepted) {
       privacyStore.modalPrivacy = true
-      // $q.notify({
-      //   type: 'warning',
-      //   message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งาน',
-      //   position: 'center',
-      // })
       return false
     }
     return true
   }
 
+  async function requestCameraPermission() {
+    if (!checkPrivacyAccepted()) {
+      return false
+    }
+
+    if (cameraPermissionState.value === 'granted') {
+      return true
+    }
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setPermissionState(cameraPermissionState, 'unsupported')
+      return false
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: 'user' },
+        audio: false,
+      })
+
+      stream.getTracks().forEach((track) => track.stop())
+      setPermissionState(cameraPermissionState, 'granted')
+      return true
+    } catch (error) {
+      setPermissionState(cameraPermissionState, 'denied')
+      return false
+    } finally {
+      await syncPermissionState('camera')
+    }
+  }
+
+  async function requestLocationPermission() {
+    if (!checkPrivacyAccepted()) {
+      return false
+    }
+
+    if (locationPermissionState.value === 'granted') {
+      return true
+    }
+
+    if (!navigator.geolocation) {
+      setPermissionState(locationPermissionState, 'unsupported')
+      return false
+    }
+
+    return new Promise<boolean>((resolve) => {
+      navigator.geolocation.getCurrentPosition(
+        async () => {
+          setPermissionState(locationPermissionState, 'granted')
+          await syncPermissionState('geolocation')
+          resolve(true)
+        },
+        async () => {
+          setPermissionState(locationPermissionState, 'denied')
+          await syncPermissionState('geolocation')
+          resolve(false)
+        }
+      )
+    })
+  }
+
+  onBeforeUnmount(() => {
+    if (cameraPermissionStatus) {
+      cameraPermissionStatus.onchange = null
+    }
+
+    if (locationPermissionStatus) {
+      locationPermissionStatus.onchange = null
+    }
+  })
+
   return {
-    // checkCameraPermission,
-    // checkLocationPermission,
+    cameraPermissionState,
+    locationPermissionState,
     checkPrivacyAccepted,
+    syncPermissionStates,
+    requestCameraPermission,
+    requestLocationPermission,
   }
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f5f3b52..023778e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -18,7 +18,11 @@ import MapCheck from '@/components/AscGISMap.vue'
 const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
-const { checkPrivacyAccepted } = usePermissions()
+const {
+  checkPrivacyAccepted,
+  syncPermissionStates,
+  requestCameraPermission,
+} = usePermissions()
 const privacyStore = usePrivacyStore()
 const positionKeycloakStore = usePositionKeycloakStore()
 const MOCK_CHECK_DELAY_MS = 800
@@ -471,34 +475,14 @@ async function openCamera() {
     return
   }
 
-  if (!isPermissionCameraDenied.value) {
-    try {
-      if (cameraIsOn.value) {
-        camera.value?.stop()
-      } else {
-        // Keep the initial stream aligned with the Camera component's front-camera constraint.
-        await camera.value?.start()
-        const devices: any = await camera.value?.devices(['videoinput'])
-        if (devices) {
-          availableCameras.value = devices
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+    cameraIsOn.value = false
+    return
+  }
 
-          // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
-          const activeId = camera.value?.currentDeviceID()
-          const activeIdx = activeId
-            ? devices.findIndex((d: any) => d.deviceId === activeId)
-            : -1
-          currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-          currentCameraType.value = identifyCameraType(
-            devices[currentCameraIndex.value]?.label || ''
-          )
-        }
-      }
-      cameraIsOn.value = !cameraIsOn.value
-    } catch (error) {
-      console.error('Error opening camera:', error)
-      messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
-    }
-  } else {
+  const hasCameraPermission = await requestCameraPermission()
+  if (!hasCameraPermission) {
     messageError(
       $q,
       '',
@@ -506,6 +490,29 @@ async function openCamera() {
     )
     return
   }
+
+  try {
+    // Keep the initial stream aligned with the Camera component's front-camera constraint.
+    await camera.value?.start()
+    const devices: any = await camera.value?.devices(['videoinput'])
+    if (devices) {
+      availableCameras.value = devices
+
+      // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
+      const activeId = camera.value?.currentDeviceID()
+      const activeIdx = activeId
+        ? devices.findIndex((d: any) => d.deviceId === activeId)
+        : -1
+      currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+      currentCameraType.value = identifyCameraType(
+        devices[currentCameraIndex.value]?.label || ''
+      )
+    }
+    cameraIsOn.value = true
+  } catch (error) {
+    console.error('Error opening camera:', error)
+    messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
+  }
 }
 
 /** change camera device*/
@@ -880,21 +887,6 @@ function handleVisibilityChange() {
   }
 }
 
-const isPermissionCameraDenied = ref<boolean>(false) // ตัวแปรสำหรับตรวจสอบการปฏิเสธสิทธิ์กล้อง
-
-async function requestCamera() {
-  try {
-    // Probe camera permission with the same front-camera constraint, then release the stream immediately.
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: { facingMode: 'user' },
-      audio: false,
-    })
-    stream.getTracks().forEach((track) => track.stop())
-  } catch (err) {
-    isPermissionCameraDenied.value = true
-  }
-}
-
 /** Hook*/
 onMounted(async () => {
   // เริ่มต้น clock เสมอ
@@ -911,11 +903,11 @@ onMounted(async () => {
     startChecking()
   }
 
+  await syncPermissionStates()
+
   // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
   if (privacyStore.isAccepted) {
     mapRef.value?.requestLocationPermission()
-    // iOS uses the file-input fallback and does not need a getUserMedia probe
-    if (!useNativePhotoCapture.value) requestCamera()
   }
 })
 
@@ -954,11 +946,10 @@ onBeforeUnmount(() => {
 
 watch(
   () => privacyStore.isAccepted,
-  (newVal) => {
+  async (newVal) => {
     if (newVal) {
+      await syncPermissionStates()
       mapRef.value?.requestLocationPermission()
-      // iOS uses the file-input fallback and does not need a getUserMedia probe
-      if (!useNativePhotoCapture.value) requestCamera()
     }
   }
 )

From 9e69d3396345411a4f49d83f9b651b0bd1ecb973 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 17:24:36 +0700
Subject: [PATCH 6/8] fix camera ios 18.x check inline page camera

---
 .../hrms-checkin-expert/MEMORY.md             |   3 +
 .../issue_front_camera_preview_alignment.md   |  11 +
 .../issue_ios_native_camera_popup_control.md  |  11 +
 .../issue_ios_native_photo_mirroring.md       |  11 +
 src/views/HomeView.vue                        | 248 +++++++++++++++---
 5 files changed, 243 insertions(+), 41 deletions(-)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index 29df51c..cc99e8f 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -8,3 +8,6 @@
 
 - [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
 - [Active Camera Scope](project_active_camera_scope.md) - Current camera issue work should stay in HomeView.vue, not legacy MapView.vue
+- [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos
+- [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization
+- [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted)
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
new file mode 100644
index 0000000..f78b23d
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_front_camera_preview_alignment.md
@@ -0,0 +1,11 @@
+---
+name: front_camera_preview_alignment
+description: HomeView inline camera flow should show a non-mirrored preview and keep the saved/uploaded image in the same orientation the user saw while shooting
+type: project
+---
+
+When fixing front-camera capture issues in `HomeView.vue`, keep the in-page preview and the final saved/uploaded image in the same non-mirrored orientation.
+
+**Why:** Users rejected flows where the live in-page preview looked mirrored or differed from the final image. The expected behavior is “what I see while shooting is what gets used.”
+
+**How to apply:** In the inline `simple-vue-camera` flow, avoid extra front-camera mirroring in either preview styling or snapshot normalization. Treat the in-page preview as the canonical orientation for `img`/`fileImg`.
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
new file mode 100644
index 0000000..22792d0
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_camera_popup_control.md
@@ -0,0 +1,11 @@
+---
+name: ios_native_camera_popup_control
+description: iOS uses inline camera first (same as Android); native fallback triggers only after inline fails. The prior "native-first on iOS" approach was reverted per product requirement.
+type: project
+---
+
+In `HomeView.vue`, the inline camera is **always attempted first** on iOS (and every other platform).  The hidden `<input type="file" capture="user">` is only activated by `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` after inline capture is proven to fail.
+
+**Why:** The product requirement is "use inline camera whenever the device supports inline capture; use native device capture only when inline is not supported or fails."  iOS Safari supports `getUserMedia` since iOS 14.3, so inline-first is viable.  A prior session hard-coded `useNativePhotoCapture = computed(() => isIOSDevice || preferNativePhotoCapture.value)`, bypassing inline on iOS entirely — that line was reverted.
+
+**How to apply:** `preferNativePhotoCapture` must start `false` on all devices.  Never seed it with `isIOSDevice`.  All failure paths (`openCamera` permission denied, `camera.start()` throw, invalid snapshot blob, invalid image on submit) already call `switchToNativePhotoCapture()` which sets `preferNativePhotoCapture = true` so subsequent taps go directly to native — covering the first-tap fallback automatically.
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md
new file mode 100644
index 0000000..77f33ef
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios_native_photo_mirroring.md
@@ -0,0 +1,11 @@
+---
+name: ios_native_photo_mirroring
+description: Native photo capture on iOS in HomeView should not be horizontally mirrored during normalization
+type: project
+---
+
+For `HomeView.vue`, native photo capture on iOS should not apply horizontal mirroring during image normalization.
+
+**Why:** The iOS fallback uses the native still-photo picker, and the returned photo can already be in the correct orientation. Applying the same mirror correction used for other front-camera paths flips the image incorrectly on iOS.
+
+**How to apply:** Keep platform-specific normalization for native capture. Do not assume the iOS file-input photo path behaves the same as `simple-vue-camera` snapshots or Android fallback capture.
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 023778e..23f9483 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
+import {
+  ref,
+  reactive,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  computed,
+} from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -19,6 +26,7 @@ const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
 const {
+  cameraPermissionState,
   checkPrivacyAccepted,
   syncPermissionStates,
   requestCameraPermission,
@@ -225,9 +233,8 @@ const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
 /**
- * Use the native still-photo picker only on real iOS/iPadOS devices.
- * Desktop mobile emulation can spoof the iPhone user-agent, so rely on
- * platform + touch capability instead of user-agent alone.
+ * Detect real iOS/iPadOS devices. Desktop mobile emulation can spoof the
+ * iPhone user-agent, so rely on platform + touch capability instead.
  */
 const isIOSDevice: boolean = (() => {
   const platform = navigator.platform || ''
@@ -240,10 +247,16 @@ const isIOSDevice: boolean = (() => {
 })()
 
 const isAndroidDevice: boolean = /Android/i.test(navigator.userAgent)
+/**
+ * `preferNativePhotoCapture` starts false on every device — inline camera is
+ * always attempted first.  It is set to true only by
+ * `switchToNativePhotoCapture()` / `enableNativePhotoCaptureFallback()` when
+ * inline capture is proven to be unsupported or has failed.  This covers iOS
+ * Safari too: getUserMedia is supported there since iOS 14.3, so we try
+ * inline first and fall back gracefully on first failure.
+ */
 const preferNativePhotoCapture = ref<boolean>(false)
-const useNativePhotoCapture = computed(
-  () => isIOSDevice || preferNativePhotoCapture.value
-)
+const useNativePhotoCapture = computed(() => preferNativePhotoCapture.value)
 const centeredPreviewImageStyle = Object.freeze({
   objectFit: 'cover',
   objectPosition: 'center center',
@@ -251,6 +264,13 @@ const centeredPreviewImageStyle = Object.freeze({
 
 /** Ref for the hidden file input used as native camera fallback */
 const nativePhotoInput = ref<HTMLInputElement | null>(null)
+const DEFAULT_NORMALIZED_IMAGE_QUALITY = 0.92
+
+interface NormalizePhotoOptions {
+  fileName?: string
+  mirrorHorizontally?: boolean
+  quality?: number
+}
 
 function clearSelectedPhoto() {
   if (img.value) {
@@ -298,6 +318,70 @@ async function isValidCapturedImage(blob: Blob) {
   return canDecodeImageBlob(blob)
 }
 
+async function loadImageFromBlob(blob: Blob) {
+  const imageUrl = URL.createObjectURL(blob)
+
+  try {
+    return await new Promise<HTMLImageElement>((resolve, reject) => {
+      const image = new Image()
+      image.onload = () => resolve(image)
+      image.onerror = () => reject(new Error('Image load failed'))
+      image.src = imageUrl
+    })
+  } finally {
+    URL.revokeObjectURL(imageUrl)
+  }
+}
+
+async function normalizePhotoFile(
+  source: Blob,
+  options: NormalizePhotoOptions = {}
+) {
+  const fileName =
+    options.fileName ??
+    (source instanceof File && source.name
+      ? source.name
+      : `photo_${Date.now()}.jpg`)
+  const imageType =
+    source.type && source.type.startsWith('image/') ? source.type : 'image/jpeg'
+
+  if (!options.mirrorHorizontally) {
+    if (source instanceof File && source.name === fileName) {
+      return source
+    }
+
+    return new File([source], fileName, { type: imageType })
+  }
+
+  const image = await loadImageFromBlob(source)
+  const canvas = document.createElement('canvas')
+  canvas.width = image.naturalWidth
+  canvas.height = image.naturalHeight
+
+  const context = canvas.getContext('2d')
+  if (!context) {
+    throw new Error('Canvas context unavailable')
+  }
+
+  context.translate(canvas.width, 0)
+  context.scale(-1, 1)
+  context.drawImage(image, 0, 0, canvas.width, canvas.height)
+
+  const normalizedBlob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(
+      resolve,
+      imageType,
+      options.quality ?? DEFAULT_NORMALIZED_IMAGE_QUALITY
+    )
+  })
+
+  if (!normalizedBlob) {
+    throw new Error('Failed to normalize image')
+  }
+
+  return new File([normalizedBlob], fileName, { type: imageType })
+}
+
 async function assignSelectedPhoto(file: File) {
   clearSelectedPhoto()
   fileImg.value = file
@@ -316,9 +400,21 @@ function openNativePhotoCapture() {
   }
 }
 
+function enableNativePhotoCaptureFallback() {
+  preferNativePhotoCapture.value = true
+  camera.value?.stop()
+  cameraIsOn.value = false
+  clearSelectedPhoto()
+}
+
+function switchToNativePhotoCapture() {
+  enableNativePhotoCaptureFallback()
+  openNativePhotoCapture()
+}
+
 /**
  * Called when the user selects / captures a photo via the native file-input
- * fallback. Mirrors the same `img` + `fileImg` state that capturePhoto()
+ * fallback. Keeps the same `img` + `fileImg` state that capturePhoto()
  * sets so the upload flow is identical.
  */
 async function onNativePhotoSelected(event: Event) {
@@ -337,7 +433,22 @@ async function onNativePhotoSelected(event: Event) {
     return
   }
 
-  await assignSelectedPhoto(file)
+  try {
+    const normalizedFile = await normalizePhotoFile(file, {
+      fileName: file.name,
+      mirrorHorizontally: !isIOSDevice,
+    })
+
+    if (!(await isValidCapturedImage(normalizedFile))) {
+      throw new Error('Normalized image is invalid')
+    }
+
+    await assignSelectedPhoto(normalizedFile)
+  } catch (error) {
+    console.error('Error normalizing native photo:', error)
+    clearSelectedPhoto()
+    messageError($q, error, 'ไม่สามารถเตรียมรูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง')
+  }
 }
 
 const intervalId = ref<ReturnType<typeof setInterval> | undefined>(undefined)
@@ -460,6 +571,14 @@ function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
   return 'unknown'
 }
 
+function resolveCameraType(
+  label: string,
+  fallbackType: 'front' | 'back'
+): 'front' | 'back' {
+  const detectedType = identifyCameraType(label)
+  return detectedType === 'unknown' ? fallbackType : detectedType
+}
+
 /** function เปิดกล้อง*/
 async function openCamera() {
   // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -467,9 +586,8 @@ async function openCamera() {
     return
   }
 
-  // iOS Safari fallback: getUserMedia can open native video-recording UI and
-  // canvas.drawImage may produce a blank blob.  Use the hidden file input
-  // with capture="user" instead — this opens the native camera in photo mode.
+  // If inline capture previously failed on this device, fall back to the
+  // native still-photo picker instead of reopening the live camera.
   if (useNativePhotoCapture.value) {
     openNativePhotoCapture()
     return
@@ -481,8 +599,23 @@ async function openCamera() {
     return
   }
 
+  if (
+    (isIOSDevice || isAndroidDevice) &&
+    !useNativePhotoCapture.value &&
+    (cameraPermissionState.value === 'denied' ||
+      cameraPermissionState.value === 'unsupported')
+  ) {
+    switchToNativePhotoCapture()
+    return
+  }
+
   const hasCameraPermission = await requestCameraPermission()
   if (!hasCameraPermission) {
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      switchToNativePhotoCapture()
+      return
+    }
+
     messageError(
       $q,
       '',
@@ -492,6 +625,8 @@ async function openCamera() {
   }
 
   try {
+    currentCameraType.value = 'front'
+
     // Keep the initial stream aligned with the Camera component's front-camera constraint.
     await camera.value?.start()
     const devices: any = await camera.value?.devices(['videoinput'])
@@ -504,13 +639,20 @@ async function openCamera() {
         ? devices.findIndex((d: any) => d.deviceId === activeId)
         : -1
       currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-      currentCameraType.value = identifyCameraType(
-        devices[currentCameraIndex.value]?.label || ''
+      currentCameraType.value = resolveCameraType(
+        devices[currentCameraIndex.value]?.label || '',
+        'front'
       )
     }
     cameraIsOn.value = true
   } catch (error) {
     console.error('Error opening camera:', error)
+
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      switchToNativePhotoCapture()
+      return
+    }
+
     messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
   }
 }
@@ -529,9 +671,15 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
 
     if (devices.length === 1 || !targetCameraType) {
       const device = devices[0]
+      const fallbackType =
+        targetCameraType ??
+        (currentCameraType.value === 'back' ? 'back' : 'front')
       await camera.value?.changeCamera(device.deviceId)
       currentCameraIndex.value = 0
-      currentCameraType.value = identifyCameraType(device.label || '')
+      currentCameraType.value = resolveCameraType(
+        device.label || '',
+        fallbackType
+      )
       return
     }
 
@@ -544,13 +692,19 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
       const targetDevice = matchingCameras[0]
       await camera.value?.changeCamera(targetDevice.deviceId)
       currentCameraIndex.value = devices.indexOf(targetDevice)
-      currentCameraType.value = targetCameraType
+      currentCameraType.value = resolveCameraType(
+        targetDevice.label || '',
+        targetCameraType
+      )
     } else {
       const nextIndex = (currentCameraIndex.value + 1) % devices.length
       const nextDevice = devices[nextIndex]
       await camera.value?.changeCamera(nextDevice.deviceId)
       currentCameraIndex.value = nextIndex
-      currentCameraType.value = identifyCameraType(nextDevice.label || '')
+      currentCameraType.value = resolveCameraType(
+        nextDevice.label || '',
+        targetCameraType
+      )
     }
   } catch (error) {
     console.error('Error switching camera:', error)
@@ -566,10 +720,14 @@ async function switchCamera() {
   // สลับแค่ระหว่างกล้อง 2 ตัวแรก (กล้องหน้าและหลังหลัก)
   const targetIndex = currentCameraIndex.value === 0 ? 1 : 0
   const targetDevice = availableCameras.value[targetIndex]
+  const fallbackType = currentCameraType.value === 'back' ? 'front' : 'back'
 
   await camera.value?.changeCamera(targetDevice.deviceId)
   currentCameraIndex.value = targetIndex
-  currentCameraType.value = identifyCameraType(targetDevice.label || '')
+  currentCameraType.value = resolveCameraType(
+    targetDevice.label || '',
+    fallbackType
+  )
 }
 
 /** function ถ่ายรูป*/
@@ -581,16 +739,8 @@ async function capturePhoto() {
       0.8
     )
     if (!imageBlob || !(await isValidCapturedImage(imageBlob))) {
-      if (isAndroidDevice) {
-        preferNativePhotoCapture.value = true
-        camera.value?.stop()
-        cameraIsOn.value = false
-        clearSelectedPhoto()
-        messageError(
-          $q,
-          '',
-          'ไม่สามารถอ่านรูปจากกล้องของอุปกรณ์ได้ กรุณาถ่ายใหม่อีกครั้ง ระบบจะเปลี่ยนไปใช้โหมดถ่ายภาพของอุปกรณ์'
-        )
+      if (isIOSDevice || isAndroidDevice) {
+        switchToNativePhotoCapture()
         return
       }
 
@@ -598,14 +748,28 @@ async function capturePhoto() {
       return
     }
     const fileName = `photo_${Date.now()}.jpg`
-    //ไฟล์รูป
-    const file = new File([imageBlob], fileName, { type: 'image/jpeg' })
-    await assignSelectedPhoto(file)
+    const normalizedFile = await normalizePhotoFile(imageBlob, {
+      fileName,
+      mirrorHorizontally: false,
+      quality: 0.8,
+    })
+
+    if (!(await isValidCapturedImage(normalizedFile))) {
+      throw new Error('Normalized image is invalid')
+    }
+
+    await assignSelectedPhoto(normalizedFile)
 
     //แสดงรูป
     camera.value?.stop()
   } catch (error) {
     console.error('Error capturing photo:', error)
+
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      switchToNativePhotoCapture()
+      return
+    }
+
     messageError($q, error, 'ไม่สามารถถ่ายรูปได้ กรุณาลองใหม่อีกครั้ง')
   }
 }
@@ -701,10 +865,8 @@ async function confirm() {
   }
 
   if (!fileImg.value || !(await isValidCapturedImage(fileImg.value))) {
-    if (isAndroidDevice) {
-      preferNativePhotoCapture.value = true
-      camera.value?.stop()
-      cameraIsOn.value = false
+    if ((isIOSDevice || isAndroidDevice) && !useNativePhotoCapture.value) {
+      enableNativePhotoCaptureFallback()
     }
     clearSelectedPhoto()
     disabledBtn.value = false
@@ -1069,6 +1231,9 @@ watch(
                       <Camera
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
+                        :class="[
+                          'camera-preview',
+                        ]"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
@@ -1202,6 +1367,9 @@ watch(
                             height: photoHeight,
                           }"
                           ref="camera"
+                          :class="[
+                            'camera-preview',
+                          ]"
                           :autoplay="false"
                           :playsinline="true"
                           :facingMode="'user'"
@@ -1686,11 +1854,10 @@ watch(
 
   <!--
     Native still-image fallback: hidden file input.
-    Used for iOS by default and for Android only after the live snapshot path
-    produces an unreadable image, so the user can retake with the device camera.
+    Activated only after inline camera is proven unsupported or fails — on any
+    platform including iOS.  Never used as the first-choice path.
   -->
   <input
-    v-if="useNativePhotoCapture"
     ref="nativePhotoInput"
     type="file"
     accept="image/*"
@@ -1750,9 +1917,8 @@ watch(
   height: 100%;
 }
 
-/* iOS-specific video fixes */
-.card-container video,
-.card-container-xs video {
+/* Keep the live camera preview visually aligned with the normalized saved photo. */
+.camera-preview :deep(video) {
   width: 100%;
   height: 100%;
   object-fit: cover;

From 58c1dfb5cc140abde51b662454cc19eca4cfdd5c Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Fri, 8 May 2026 18:15:54 +0700
Subject: [PATCH 7/8] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=E0=B9=81=E0=B8=88=E0=B9=89=E0=B8=87=E0=B9=80=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=A3=E0=B8=93=E0=B8=B5=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=A1=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=AD=E0=B8=AD=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/HomeView.vue | 79 +++++++++++++++++++++++++++++-------------
 1 file changed, 54 insertions(+), 25 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 23f9483..1d296c2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  ref,
-  reactive,
-  onMounted,
-  watch,
-  onBeforeUnmount,
-  computed,
-} from 'vue'
+import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -62,10 +55,40 @@ const msgCheckTime = ref<string>('') // ข้อความแจ้งเต
 const isDisabledCheckTime = ref<boolean>(true) // ข้อความแจ้งเตือน
 const isErr = ref<boolean | null>(null) // ข้อความแจ้งเตือน
 const endTimeAfternoon = ref<string>('12:00:00') //เวลาเช็คเอาท์ตามรอบ
+const crossDayCheckoutWarning = ref<string>('')
 
 const isLoadingCheckTime = ref<boolean>(false) // ตัวแปรสำหรับการโหลด
 const disabledBtn = ref<boolean>(false)
 
+function parseApiDateTime(value?: string | null) {
+  if (!value) return null
+
+  const normalizedValue = value.includes('T') ? value : value.replace(' ', 'T')
+  const parsedDate = new Date(normalizedValue)
+  return Number.isNaN(parsedDate.getTime()) ? null : parsedDate
+}
+
+function isSameCalendarDay(firstDate: Date, secondDate: Date) {
+  return (
+    firstDate.getFullYear() === secondDate.getFullYear() &&
+    firstDate.getMonth() === secondDate.getMonth() &&
+    firstDate.getDate() === secondDate.getDate()
+  )
+}
+
+function updateCrossDayCheckoutWarning(checkInTime?: string | null) {
+  crossDayCheckoutWarning.value = ''
+
+  const checkInDate = parseApiDateTime(checkInTime)
+  if (!checkInDate) return
+
+  if (!isSameCalendarDay(checkInDate, new Date())) {
+    crossDayCheckoutWarning.value = `คุณยังไม่ได้ลงเวลาออกของวันที่ ${date2Thai(
+      checkInDate
+    )} กรุณาลงเวลาออกก่อน จึงจะลงเวลาเข้าของวันนี้ได้`
+  }
+}
+
 /**
  * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
@@ -78,6 +101,7 @@ async function fetchCheckTime(load: any = true) {
 
       statusCheckin.value = data.checkInId ? false : true
       checkInId.value = data.checkInId ? data.checkInId : ''
+      updateCrossDayCheckoutWarning(data.checkInTime)
       endTimeAfternoon.value = data.endTimeAfternoon
       isDisabledCheckTime.value = isDisabledCheckTime.value ? true : false
     })
@@ -425,11 +449,7 @@ async function onNativePhotoSelected(event: Event) {
 
   if (!(await isValidCapturedImage(file))) {
     clearSelectedPhoto()
-    messageError(
-      $q,
-      '',
-      'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง'
-    )
+    messageError($q, '', 'ไม่สามารถอ่านไฟล์รูปภาพได้ กรุณาถ่ายรูปใหม่อีกครั้ง')
     return
   }
 
@@ -849,6 +869,7 @@ const mapRef = computed(() =>
 )
 
 const timeChickin = ref<string>('') //เวลาเข้างาน,เวลาออกงาน
+const displayedCheckDate = ref<Date>(new Date())
 
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
@@ -870,11 +891,7 @@ async function confirm() {
     }
     clearSelectedPhoto()
     disabledBtn.value = false
-    messageError(
-      $q,
-      '',
-      'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา'
-    )
+    messageError($q, '', 'รูปภาพไม่สมบูรณ์ กรุณาถ่ายรูปใหม่อีกครั้งก่อนลงเวลา')
     return
   }
 
@@ -895,6 +912,7 @@ async function confirm() {
     .then(async (res) => {
       const data = await res.data.result
       const dateObject = new Date(data.date)
+      displayedCheckDate.value = dateObject
       checkDate.value = data.date ? true : false
       const options: Intl.DateTimeFormatOptions = {
         hour12: false,
@@ -1197,6 +1215,16 @@ watch(
                 class="col-xs-12 col-md-11 q-pa-md q-col-gutter-md row q-pt-lg"
                 v-if="!isDisabledCheckTime"
               >
+                <div v-if="crossDayCheckoutWarning" class="col-12">
+                  <q-banner
+                    rounded
+                    class="bg-white text-orange-10 warning-banner"
+                  >
+                    <q-icon name="warning" color="warning" size="20px" />
+
+                    {{ crossDayCheckoutWarning }}
+                  </q-banner>
+                </div>
                 <div class="col-xs-12 col-sm-8 gt-xs">
                   <div class="col-12">
                     <MapCheck
@@ -1231,9 +1259,7 @@ watch(
                       <Camera
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
-                        :class="[
-                          'camera-preview',
-                        ]"
+                        :class="['camera-preview']"
                         :autoplay="false"
                         :playsinline="true"
                         :facingMode="'user'"
@@ -1367,9 +1393,7 @@ watch(
                             height: photoHeight,
                           }"
                           ref="camera"
-                          :class="[
-                            'camera-preview',
-                          ]"
+                          :class="['camera-preview']"
                           :autoplay="false"
                           :playsinline="true"
                           :facingMode="'user'"
@@ -1817,7 +1841,7 @@ watch(
           <div
             class="col-12 text-subtitle1 text-center text-white text-weight-medium"
           >
-            {{ date2Thai(Thai) }}
+            {{ date2Thai(displayedCheckDate) }}
           </div>
           <div class="row col-12 justify-center q-pt-sm">
             <!-- <div class="text-h3 text-white text-weight-bold"></div> -->
@@ -1947,6 +1971,11 @@ watch(
   animation: bounce 2s infinite;
 }
 
+.warning-banner {
+  border: 1px solid #ffcc80;
+  border-left: 4px solid #fb8c00;
+}
+
 @keyframes bounce {
   0%,
   100% {

From 526567c599fda5dcca31eaa017b6af3b25ed0bd1 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 11 May 2026 14:22:18 +0700
Subject: [PATCH 8/8] fixed camera error in ios 16.x

---
 .../hrms-checkin-expert/MEMORY.md             |   1 +
 ...issue_ios16_inline_camera_white_preview.md |  11 +
 src/views/HomeView.vue                        | 189 ++++++++++++++----
 3 files changed, 165 insertions(+), 36 deletions(-)
 create mode 100644 .claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md

diff --git a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
index cc99e8f..bb4f782 100644
--- a/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
+++ b/.claude/agent-memory/hrms-checkin-expert/MEMORY.md
@@ -11,3 +11,4 @@
 - [Front Camera Preview Alignment](issue_front_camera_preview_alignment.md) - Keep popup preview orientation aligned with normalized saved photos
 - [iOS Native Photo Mirroring](issue_ios_native_photo_mirroring.md) - Do not flip iOS native-capture photos during normalization
 - [iOS Native Camera Popup](issue_ios_native_camera_popup_control.md) - Inline-first on iOS; native activates only after inline fails (prior native-first seed was reverted)
+- [iOS 16 Inline White Preview](issue_ios16_inline_camera_white_preview.md) - Safari iOS 16 white preview needs single mount plus explicit video readiness
diff --git a/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md
new file mode 100644
index 0000000..791f98e
--- /dev/null
+++ b/.claude/agent-memory/hrms-checkin-expert/issue_ios16_inline_camera_white_preview.md
@@ -0,0 +1,11 @@
+---
+name: ios16-inline-camera-white-preview
+description: Safari iOS 16 inline preview can stay white when multiple simple-vue-camera instances mount and playback readiness is assumed too early
+type: project
+---
+
+In `HomeView.vue`, Safari on iOS 16.x can show a white in-page camera preview when more than one `simple-vue-camera` instance is mounted for responsive layouts and the app treats `camera.start()` as sufficient proof that the preview is rendering.
+
+**Why:** `simple-vue-camera` uses a hard-coded `id="video"` internally and does not explicitly call `video.play()` during `start()`. On mobile/xs, mounting both desktop and mobile camera components at once creates a fragile setup for Safari, where the active preview can remain white even though permission and stream startup succeeded.
+
+**How to apply:** Keep only the active responsive camera instance mounted in `HomeView.vue`, and after `camera.start()` explicitly prepare/check the underlying video element (`playsinline`, `muted`, `play()`, non-zero dimensions, ready state). If the preview still does not become render-ready, remount once and then fall back to native capture.
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1d296c2..9b76ae3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch, onBeforeUnmount, computed } from 'vue'
+import {
+  ref,
+  reactive,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  computed,
+  nextTick,
+} from 'vue'
 import { useQuasar } from 'quasar'
 import { format } from 'date-fns'
 import Camera from 'simple-vue-camera'
@@ -187,6 +195,131 @@ function wait(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
+function getCameraVideoElement() {
+  return camera.value?.video
+}
+
+function prepareInlineCameraVideo(videoElement: HTMLVideoElement) {
+  videoElement.autoplay = true
+  videoElement.muted = true
+  videoElement.setAttribute('autoplay', '')
+  videoElement.setAttribute('muted', '')
+  videoElement.setAttribute('playsinline', '')
+  videoElement.setAttribute('webkit-playsinline', 'true')
+}
+
+function isInlineCameraPreviewReady(videoElement: HTMLVideoElement) {
+  return (
+    Boolean(videoElement.srcObject) &&
+    videoElement.videoWidth > 0 &&
+    videoElement.videoHeight > 0 &&
+    videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
+  )
+}
+
+async function waitForCameraInstance() {
+  for (let attempt = 0; attempt < 10; attempt += 1) {
+    await nextTick()
+
+    if (camera.value) {
+      return camera.value
+    }
+
+    await wait(50)
+  }
+
+  return null
+}
+
+async function stopInlineCamera() {
+  camera.value?.stop()
+  cameraIsOn.value = false
+}
+
+async function remountInlineCameraComponent() {
+  await stopInlineCamera()
+  cameraMountKey.value += 1
+  await nextTick()
+  await wait(INLINE_CAMERA_REMOUNT_DELAY_MS)
+}
+
+async function ensureInlineCameraPreviewReady() {
+  const deadline = Date.now() + INLINE_CAMERA_PREVIEW_TIMEOUT_MS
+  let lastPlaybackError: unknown = null
+
+  while (Date.now() < deadline) {
+    const videoElement = getCameraVideoElement()
+
+    if (videoElement) {
+      prepareInlineCameraVideo(videoElement)
+
+      if (isInlineCameraPreviewReady(videoElement)) {
+        return
+      }
+
+      if (videoElement.srcObject) {
+        try {
+          await videoElement.play()
+        } catch (error) {
+          lastPlaybackError = error
+        }
+      }
+    }
+
+    await wait(INLINE_CAMERA_PREVIEW_POLL_MS)
+  }
+
+  if (lastPlaybackError instanceof Error) {
+    throw lastPlaybackError
+  }
+
+  throw new Error('Inline camera preview did not become ready in time')
+}
+
+async function syncActiveCameraDevices() {
+  const devices: any = await camera.value?.devices(['videoinput'])
+  if (!devices) {
+    return
+  }
+
+  availableCameras.value = devices
+
+  const activeId = camera.value?.currentDeviceID()
+  const activeIdx = activeId
+    ? devices.findIndex((device: any) => device.deviceId === activeId)
+    : -1
+  currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
+  currentCameraType.value = resolveCameraType(
+    devices[currentCameraIndex.value]?.label || '',
+    'front'
+  )
+}
+
+async function startInlineCamera(recoveryAttempt = 0): Promise<void> {
+  const cameraInstance = await waitForCameraInstance()
+
+  if (!cameraInstance) {
+    throw new Error('Camera component is unavailable')
+  }
+
+  try {
+    currentCameraType.value = 'front'
+    await cameraInstance.start()
+    await ensureInlineCameraPreviewReady()
+    await syncActiveCameraDevices()
+    cameraIsOn.value = true
+  } catch (error) {
+    await stopInlineCamera()
+
+    if (recoveryAttempt < MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS) {
+      await remountInlineCameraComponent()
+      return startInlineCamera(recoveryAttempt + 1)
+    }
+
+    throw error
+  }
+}
+
 async function getDelayedFreshPosition() {
   const firstPosition = await getCurrentPositionAsync({
     enableHighAccuracy: true,
@@ -252,6 +385,7 @@ const cameraIsOn = ref<boolean>(false)
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
+const cameraMountKey = ref<number>(0)
 const availableCameras = ref<any[]>([])
 const currentCameraIndex = ref<number>(0)
 const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
@@ -285,6 +419,10 @@ const centeredPreviewImageStyle = Object.freeze({
   objectFit: 'cover',
   objectPosition: 'center center',
 })
+const INLINE_CAMERA_PREVIEW_TIMEOUT_MS = isIOSDevice ? 2500 : 1800
+const INLINE_CAMERA_PREVIEW_POLL_MS = 120
+const INLINE_CAMERA_REMOUNT_DELAY_MS = 120
+const MAX_INLINE_CAMERA_RECOVERY_ATTEMPTS = 1
 
 /** Ref for the hidden file input used as native camera fallback */
 const nativePhotoInput = ref<HTMLInputElement | null>(null)
@@ -413,10 +551,7 @@ async function assignSelectedPhoto(file: File) {
 }
 
 function openNativePhotoCapture() {
-  if (cameraIsOn.value) {
-    camera.value?.stop()
-    cameraIsOn.value = false
-  }
+  void stopInlineCamera()
 
   if (nativePhotoInput.value) {
     nativePhotoInput.value.value = ''
@@ -426,8 +561,7 @@ function openNativePhotoCapture() {
 
 function enableNativePhotoCaptureFallback() {
   preferNativePhotoCapture.value = true
-  camera.value?.stop()
-  cameraIsOn.value = false
+  void stopInlineCamera()
   clearSelectedPhoto()
 }
 
@@ -614,8 +748,7 @@ async function openCamera() {
   }
 
   if (cameraIsOn.value) {
-    camera.value?.stop()
-    cameraIsOn.value = false
+    await stopInlineCamera()
     return
   }
 
@@ -645,26 +778,7 @@ async function openCamera() {
   }
 
   try {
-    currentCameraType.value = 'front'
-
-    // Keep the initial stream aligned with the Camera component's front-camera constraint.
-    await camera.value?.start()
-    const devices: any = await camera.value?.devices(['videoinput'])
-    if (devices) {
-      availableCameras.value = devices
-
-      // Avoid an extra stop/start cycle here; on iOS it can override the initial camera selection.
-      const activeId = camera.value?.currentDeviceID()
-      const activeIdx = activeId
-        ? devices.findIndex((d: any) => d.deviceId === activeId)
-        : -1
-      currentCameraIndex.value = activeIdx >= 0 ? activeIdx : 0
-      currentCameraType.value = resolveCameraType(
-        devices[currentCameraIndex.value]?.label || '',
-        'front'
-      )
-    }
-    cameraIsOn.value = true
+    await startInlineCamera()
   } catch (error) {
     console.error('Error opening camera:', error)
 
@@ -695,6 +809,7 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
         targetCameraType ??
         (currentCameraType.value === 'back' ? 'back' : 'front')
       await camera.value?.changeCamera(device.deviceId)
+      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = 0
       currentCameraType.value = resolveCameraType(
         device.label || '',
@@ -711,6 +826,7 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
     if (matchingCameras.length > 0) {
       const targetDevice = matchingCameras[0]
       await camera.value?.changeCamera(targetDevice.deviceId)
+      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = devices.indexOf(targetDevice)
       currentCameraType.value = resolveCameraType(
         targetDevice.label || '',
@@ -720,6 +836,7 @@ async function changeCamera(targetCameraType?: 'front' | 'back') {
       const nextIndex = (currentCameraIndex.value + 1) % devices.length
       const nextDevice = devices[nextIndex]
       await camera.value?.changeCamera(nextDevice.deviceId)
+      await ensureInlineCameraPreviewReady()
       currentCameraIndex.value = nextIndex
       currentCameraType.value = resolveCameraType(
         nextDevice.label || '',
@@ -743,6 +860,7 @@ async function switchCamera() {
   const fallbackType = currentCameraType.value === 'back' ? 'front' : 'back'
 
   await camera.value?.changeCamera(targetDevice.deviceId)
+  await ensureInlineCameraPreviewReady()
   currentCameraIndex.value = targetIndex
   currentCameraType.value = resolveCameraType(
     targetDevice.label || '',
@@ -781,7 +899,7 @@ async function capturePhoto() {
     await assignSelectedPhoto(normalizedFile)
 
     //แสดงรูป
-    camera.value?.stop()
+    await stopInlineCamera()
   } catch (error) {
     console.error('Error capturing photo:', error)
 
@@ -803,7 +921,7 @@ async function refreshPhoto() {
       openNativePhotoCapture()
       return
     }
-    await camera.value?.start()
+    await startInlineCamera()
   } catch (error) {
     console.error('Error refreshing photo:', error)
     messageError($q, error, 'ไม่สามารถเปิดกล้องได้ กรุณาลองใหม่อีกครั้ง')
@@ -1038,10 +1156,7 @@ const inQueue = ref<boolean>(false)
 // ฟังก์ชันสำหรับรีเซ็ตรูปและหยุดกล้อง
 function resetCameraAndImage() {
   clearSelectedPhoto()
-  if (cameraIsOn.value && camera.value) {
-    camera.value.stop()
-    cameraIsOn.value = false
-  }
+  void stopInlineCamera()
 }
 
 // เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -1234,7 +1349,7 @@ watch(
                     />
                   </div>
                 </div>
-                <div class="col-xs-12 col-sm-4 gt-xs">
+                <div v-if="$q.screen.gt.xs" class="col-xs-12 col-sm-4">
                   <q-card
                     :class="
                       $q.screen.xs ? 'card-container-xs' : 'card-container'
@@ -1257,6 +1372,7 @@ watch(
                     <div class="col-12 row items-center">
                       <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                       <Camera
+                        :key="`desktop-${cameraMountKey}`"
                         :resolution="{ width: photoWidth, height: photoHeight }"
                         ref="camera"
                         :class="['camera-preview']"
@@ -1388,6 +1504,7 @@ watch(
                       <div class="col-12 row items-center">
                         <!-- แสดงกล้องตอนกดถ่ายภาพ -->
                         <Camera
+                          :key="`mobile-${cameraMountKey}`"
                           :resolution="{
                             width: photoWidth,
                             height: photoHeight,