fix permission request & display photo center

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()
     }
   }
 )