fixed camera error in ios 16.x

.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

.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.

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) {
+  void stopInlineCamera()
-    camera.value?.stop()
-    cameraIsOn.value = false
-  }
 
   if (nativePhotoInput.value) {
     nativePhotoInput.value.value = ''
@@ -426,8 +561,7 @@ function openNativePhotoCapture() {
 
 function enableNativePhotoCaptureFallback() {
   preferNativePhotoCapture.value = true
-  camera.value?.stop()
+  void stopInlineCamera()
-  cameraIsOn.value = false
   clearSelectedPhoto()
 }
 
@@ -614,8 +748,7 @@ async function openCamera() {
   }
 
   if (cameraIsOn.value) {
-    camera.value?.stop()
+    await stopInlineCamera()
-    cameraIsOn.value = false
     return
   }
 
@@ -645,26 +778,7 @@ async function openCamera() {
   }
 
   try {
-    currentCameraType.value = 'front'
+    await startInlineCamera()
-
-    // 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
   } 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) {
+  void stopInlineCamera()
-    camera.value.stop()
-    cameraIsOn.value = false
-  }
 }
 
 // เพิ่มฟังก์ชันสำหรับจัดการการปิดแอพในมือถือ
@@ -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,