@7365admin1/layer-common 3.2.1 → 3.2.2-staging.101

package/components/HidCameraCaptureDialog.vue

@@ -0,0 +1,199 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="520"
+    persistent
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-card class="camera-dialog" rounded="lg">
+      <v-card-title class="d-flex align-center justify-space-between pa-4">
+        <span class="text-subtitle-1 font-weight-bold">Take Facial Photo</span>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          aria-label="Close camera"
+          @click="close"
+        />
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-4">
+        <div class="camera-viewport">
+          <video
+            ref="videoElement"
+            class="camera-preview"
+            autoplay
+            muted
+            playsinline
+          />
+
+          <div v-if="starting" class="camera-state">
+            <v-progress-circular indeterminate color="primary" />
+            <span class="mt-3">Starting camera...</span>
+          </div>
+
+          <div v-else-if="cameraError" class="camera-state px-6 text-center">
+            <v-icon icon="mdi-camera-off-outline" size="42" color="error" />
+            <span class="mt-3 text-error">{{ cameraError }}</span>
+          </div>
+        </div>
+
+        <canvas ref="canvasElement" class="d-none" />
+
+        <div class="text-caption text-medium-emphasis mt-3 text-center">
+          Keep your face centered and make sure the area is well lit.
+        </div>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-4">
+        <v-btn variant="text" @click="close">Cancel</v-btn>
+        <v-spacer />
+        <v-btn
+          color="primary"
+          variant="flat"
+          prepend-icon="mdi-camera"
+          :disabled="starting || !!cameraError || !stream"
+          @click="capture"
+        >
+          Take Photo
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  capture: [dataUrl: string];
+}>();
+
+const videoElement = ref<HTMLVideoElement | null>(null);
+const canvasElement = ref<HTMLCanvasElement | null>(null);
+const stream = shallowRef<MediaStream | null>(null);
+const starting = ref(false);
+const cameraError = ref("");
+
+function stopCamera() {
+  stream.value?.getTracks().forEach((track) => track.stop());
+  stream.value = null;
+  if (videoElement.value) videoElement.value.srcObject = null;
+}
+
+function getCameraErrorMessage(caught: unknown) {
+  if (caught instanceof DOMException) {
+    if (caught.name === "NotAllowedError") {
+      return "Camera permission was denied. Allow camera access and try again.";
+    }
+    if (caught.name === "NotFoundError") {
+      return "No camera was found on this device.";
+    }
+    if (caught.name === "NotReadableError") {
+      return "The camera is currently being used by another application.";
+    }
+  }
+  return "Unable to open the camera. Use HTTPS or check the browser camera permission.";
+}
+
+async function startCamera() {
+  stopCamera();
+  cameraError.value = "";
+  starting.value = true;
+
+  try {
+    if (!navigator.mediaDevices?.getUserMedia) {
+      throw new Error("Camera API is unavailable");
+    }
+
+    stream.value = await navigator.mediaDevices.getUserMedia({
+      audio: false,
+      video: {
+        facingMode: "user",
+        width: { ideal: 1280 },
+        height: { ideal: 960 },
+      },
+    });
+
+    await nextTick();
+    if (!videoElement.value) throw new Error("Camera preview is unavailable");
+    videoElement.value.srcObject = stream.value;
+    await videoElement.value.play();
+  } catch (caught: unknown) {
+    stopCamera();
+    cameraError.value = getCameraErrorMessage(caught);
+  } finally {
+    starting.value = false;
+  }
+}
+
+function capture() {
+  const video = videoElement.value;
+  const canvas = canvasElement.value;
+  if (!video || !canvas || !video.videoWidth || !video.videoHeight) return;
+
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+
+  context.translate(canvas.width, 0);
+  context.scale(-1, 1);
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  emit("capture", canvas.toDataURL("image/jpeg", 0.9));
+  close();
+}
+
+function close() {
+  stopCamera();
+  emit("update:modelValue", false);
+}
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (isOpen) void startCamera();
+    else stopCamera();
+  }
+);
+
+onBeforeUnmount(stopCamera);
+</script>
+
+<style scoped>
+.camera-dialog {
+  overflow: hidden;
+}
+
+.camera-viewport {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  aspect-ratio: 3 / 4;
+  border-radius: 8px;
+  background: #111722;
+}
+
+.camera-preview {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+}
+
+.camera-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #111722;
+  color: #ffffff;
+}
+</style>