feat: camera switch button

src/views/HomeView.vue

@@ -187,6 +187,9 @@ const cameraIsOn = ref<boolean>(false)
 const img = ref<any>(undefined)
 const photoWidth = ref<number>(350)
 const photoHeight = ref<number>(350)
+const availableCameras = ref<any[]>([])
+const currentCameraIndex = ref<number>(0)
+const currentCameraType = ref<'front' | 'back' | 'unknown'>('unknown')
 
 const intervalId = ref<number | undefined>(undefined) // ต้องใช้ตัวแปรเก็บค่า interval
 
@@ -302,6 +305,16 @@ async function stopChecking() {
   }
 }
 
+function identifyCameraType(label: string): 'front' | 'back' | 'unknown' {
+  const lowerLabel = label.toLowerCase()
+  if (lowerLabel.includes('front') || lowerLabel.includes('user') || lowerLabel.includes('face')) {
+    return 'front'
+  } else if (lowerLabel.includes('back') || lowerLabel.includes('environment') || lowerLabel.includes('rear')) {
+    return 'back'
+  }
+  return 'unknown'
+}
+
 /** function เปิดกล้อง*/
 async function openCamera() {
   // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
@@ -315,7 +328,11 @@ async function openCamera() {
       await camera.value?.stop()
     } else {
       await camera.value?.start()
-      await changeCamera() // ต้องรอให้ start() เสร็จก่อน
+      const devices: any = await camera.value?.devices(['videoinput'])
+      if (devices) {
+        availableCameras.value = devices
+        await changeCamera()
+      }
     }
     cameraIsOn.value = !cameraIsOn.value
   } else {
@@ -329,10 +346,54 @@ async function openCamera() {
 }
 
 /** change camera device*/
-async function changeCamera() {
-  const devices: any = await camera.value?.devices(['videoinput'])
-  const device = await devices[0]
-  camera.value?.changeCamera(device.deviceId)
+async function changeCamera(targetCameraType?: 'front' | 'back') {
+  try {
+    const devices: any = await camera.value?.devices(['videoinput'])
+
+    if (!devices || devices.length === 0) {
+      console.warn('No cameras found')
+      return
+    }
+
+    availableCameras.value = devices
+
+    if (devices.length === 1 || !targetCameraType) {
+      const device = devices[0]
+      await camera.value?.changeCamera(device.deviceId)
+      currentCameraIndex.value = 0
+      currentCameraType.value = identifyCameraType(device.label || '')
+      return
+    }
+
+    const matchingCameras = devices.filter((device: any) =>
+      identifyCameraType(device.label || '') === targetCameraType
+    )
+
+    if (matchingCameras.length > 0) {
+      const targetDevice = matchingCameras[0]
+      await camera.value?.changeCamera(targetDevice.deviceId)
+      currentCameraIndex.value = devices.indexOf(targetDevice)
+      currentCameraType.value = 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 || '')
+    }
+  } catch (error) {
+    console.error('Error switching camera:', error)
+  }
+}
+
+/** switch camera device*/
+async function switchCamera() {
+  if (availableCameras.value.length <= 1) {
+    return
+  }
+
+  const targetType: 'front' | 'back' = currentCameraType.value === 'front' ? 'back' : 'front'
+  await changeCamera(targetType)
 }
 
 /** function ถ่ายรูป*/
@@ -759,6 +820,16 @@ watch(
                           v-if="$q.screen.gt.xs"
                           class="absolute-bottom-right q-ma-md"
                         >
+                          <q-btn
+                            v-if="availableCameras.length > 1 && img == null"
+                            round
+                            push
+                            icon="flip_camera_ios"
+                            size="sm"
+                            color="secondary"
+                            class="q-mr-sm"
+                            @click="switchCamera"
+                          />
                           <q-btn
                             v-if="img == null"
                             round
@@ -783,6 +854,16 @@ watch(
                             class="absolute-bottom text-subtitle2 text-center q-py-sm"
                             style="background: #00000021"
                           >
+                            <q-btn
+                              v-if="availableCameras.length > 1 && img == null"
+                              round
+                              icon="flip_camera_ios"
+                              size="16px"
+                              style="background: #424242; color: white"
+                              @click="switchCamera"
+                              unelevated
+                              class="q-mr-xs"
+                            />
                             <q-btn
                               round
                               v-if="img == null"
@@ -1283,4 +1364,4 @@ watch(
     rgba(2, 169, 152, 1) 100%
   );
 }
-</style>
+</style>