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

package/components/HidCameraCaptureDialog.vue

@@ -1,199 +0,0 @@
-<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>

package/composables/useSipWebPhone.ts

@@ -1,311 +0,0 @@
-import { computed, onScopeDispose, readonly, ref, shallowRef } from "vue";
-import type { SimpleUser, SimpleUserDelegate, SimpleUserOptions } from "sip.js/lib/platform/web";
-import type { SessionDescriptionHandlerOptions } from "sip.js/lib/platform/web/session-description-handler/session-description-handler-options";
-
-export type SipWebPhoneConfig = {
-  webSocketServer: string;
-  aor: string;
-  authorizationUsername: string;
-  authorizationPassword: string;
-  displayName?: string;
-  video?: boolean;
-};
-
-export type SipWebPhoneMedia = {
-  remoteAudio?: HTMLAudioElement | null;
-  remoteVideo?: HTMLVideoElement | null;
-};
-
-type ConnectionState = "disconnected" | "connecting" | "registered" | "error";
-type CallState = "idle" | "calling" | "incoming" | "active" | "ending";
-
-export default function useSipWebPhone() {
-  const simpleUser = shallowRef<SimpleUser>();
-  const connectionState = ref<ConnectionState>("disconnected");
-  const callState = ref<CallState>("idle");
-  const errorMessage = ref("");
-  const muted = ref(false);
-  const remoteVideoAvailable = ref(false);
-  const currentTarget = ref("");
-  const activeConfig = shallowRef<SipWebPhoneConfig>();
-
-  const isRegistered = computed(() => connectionState.value === "registered");
-  const hasCall = computed(() => callState.value !== "idle");
-
-  async function connect(config: SipWebPhoneConfig, media: SipWebPhoneMedia) {
-    validateConfig(config);
-    await disconnect();
-
-    connectionState.value = "connecting";
-    errorMessage.value = "";
-    activeConfig.value = { ...config };
-    let clearRegistrationTimer = () => {};
-
-    try {
-      const { SimpleUser: SimpleUserConstructor } = await import("sip.js/lib/platform/web");
-      let registrationSettled = false;
-      let resolveRegistration: (() => void) | undefined;
-      let rejectRegistration: ((error: Error) => void) | undefined;
-      const registrationPromise = new Promise<void>((resolve, reject) => {
-        resolveRegistration = resolve;
-        rejectRegistration = reject;
-      });
-      const registrationTimeout = globalThis.setTimeout(() => {
-        if (registrationSettled) return;
-        registrationSettled = true;
-        rejectRegistration?.(new Error("SIP registration timed out. Check the WebSocket server and account credentials."));
-      }, 15000);
-      clearRegistrationTimer = () => globalThis.clearTimeout(registrationTimeout);
-      const settleRegistration = (error?: Error) => {
-        if (registrationSettled) return;
-        registrationSettled = true;
-        clearRegistrationTimer();
-        if (error) rejectRegistration?.(error);
-        else resolveRegistration?.();
-      };
-      const delegate: SimpleUserDelegate = {
-        onCallCreated: () => {
-          if (callState.value !== "incoming") callState.value = "calling";
-        },
-        onCallReceived: () => {
-          callState.value = "incoming";
-          currentTarget.value = "Incoming call";
-        },
-        onCallAnswered: () => {
-          callState.value = "active";
-          syncVideoState();
-        },
-        onCallHangup: () => {
-          const previousState = callState.value;
-          resetCall();
-          if (previousState === "calling") {
-            errorMessage.value = "The call was not answered or was rejected by the destination.";
-          }
-        },
-        onRegistered: () => {
-          connectionState.value = "registered";
-          settleRegistration();
-        },
-        onUnregistered: () => {
-          if (connectionState.value === "connecting") {
-            settleRegistration(new Error("SIP registration was rejected. Check the username and password."));
-          }
-          connectionState.value = "disconnected";
-        },
-        onServerDisconnect: () => {
-          const error = new Error("The SIP WebSocket server disconnected during registration.");
-          connectionState.value = "error";
-          errorMessage.value = error.message;
-          settleRegistration(error);
-          resetCall();
-        },
-      };
-      const options: SimpleUserOptions = {
-        aor: normalizeSipUri(config.aor),
-        delegate,
-        media: {
-          constraints: { audio: true, video: false },
-          remote: {
-            audio: media.remoteAudio || undefined,
-            video: media.remoteVideo || undefined,
-          },
-        },
-        userAgentOptions: {
-          authorizationUsername: config.authorizationUsername,
-          authorizationPassword: config.authorizationPassword,
-          displayName: config.displayName || config.authorizationUsername,
-        },
-      };
-
-      const user = new SimpleUserConstructor(config.webSocketServer.trim(), options);
-      simpleUser.value = user;
-      await user.connect();
-      await user.register();
-      await registrationPromise;
-    } catch (error) {
-      clearRegistrationTimer();
-      await disconnect(false);
-      connectionState.value = "error";
-      errorMessage.value = getErrorMessage(error);
-      throw error;
-    }
-  }
-
-  async function disconnect(clearError = true) {
-    const user = simpleUser.value;
-    simpleUser.value = undefined;
-
-    if (user) {
-      try {
-        if (hasCall.value) await user.hangup();
-      } catch {
-        // The session may already have ended remotely.
-      }
-      try {
-        await user.unregister();
-      } catch {
-        // Registration may not have completed.
-      }
-      try {
-        await user.disconnect();
-      } catch {
-        // The WebSocket may already be closed.
-      }
-    }
-
-    connectionState.value = "disconnected";
-    activeConfig.value = undefined;
-    resetCall();
-    if (clearError) errorMessage.value = "";
-  }
-
-  async function call(target: string) {
-    const user = requireRegisteredUser();
-    const destination = normalizeDestination(target, activeConfig.value?.aor || "");
-    errorMessage.value = "";
-    currentTarget.value = destination;
-    callState.value = "calling";
-    try {
-      const sessionDescriptionHandlerOptions: SessionDescriptionHandlerOptions = {
-        constraints: { audio: true, video: false },
-        offerOptions: {
-          offerToReceiveAudio: true,
-          offerToReceiveVideo: Boolean(activeConfig.value?.video),
-        },
-      };
-      await user.call(destination, { sessionDescriptionHandlerOptions });
-    } catch (error) {
-      resetCall();
-      errorMessage.value = getErrorMessage(error);
-      throw error;
-    }
-  }
-
-  async function answer() {
-    const user = requireRegisteredUser();
-    const sessionDescriptionHandlerOptions: SessionDescriptionHandlerOptions = {
-      constraints: { audio: true, video: false },
-    };
-    await user.answer({ sessionDescriptionHandlerOptions });
-  }
-
-  async function decline() {
-    const user = requireUser();
-    callState.value = "ending";
-    await user.decline();
-    resetCall();
-  }
-
-  async function hangup() {
-    const user = requireUser();
-    callState.value = "ending";
-    await user.hangup();
-    resetCall();
-  }
-
-  function toggleMute() {
-    const user = requireUser();
-    const tracks = user.localMediaStream?.getAudioTracks() || [];
-    if (!tracks.length) throw new Error("No microphone track is available for this call.");
-    const enable = muted.value;
-    tracks.forEach((track) => {
-      track.enabled = enable;
-    });
-    muted.value = !enable;
-  }
-
-  function syncVideoState() {
-    const user = simpleUser.value;
-    const remoteStream = user?.remoteMediaStream;
-    const remoteTrack = remoteStream?.getVideoTracks()[0];
-
-    const updateState = () => {
-      const currentRemoteTrack = remoteStream?.getVideoTracks()[0];
-      remoteVideoAvailable.value = Boolean(currentRemoteTrack && currentRemoteTrack.readyState === "live");
-    };
-
-    updateState();
-    if (remoteStream) remoteStream.onaddtrack = updateState;
-
-    if (remoteTrack) {
-      remoteTrack.onended = () => {
-        remoteVideoAvailable.value = false;
-      };
-    }
-  }
-
-  function resetCall() {
-    callState.value = "idle";
-    currentTarget.value = "";
-    muted.value = false;
-    remoteVideoAvailable.value = false;
-  }
-
-  function requireRegisteredUser() {
-    const user = requireUser();
-    if (!isRegistered.value) throw new Error("Connect the web phone before making a call.");
-    return user;
-  }
-
-  function requireUser() {
-    if (!simpleUser.value) throw new Error("Web phone is not connected.");
-    return simpleUser.value;
-  }
-
-  onScopeDispose(() => {
-    void disconnect();
-  });
-
-  return {
-    connectionState: readonly(connectionState),
-    callState: readonly(callState),
-    errorMessage: readonly(errorMessage),
-    muted: readonly(muted),
-    remoteVideoAvailable: readonly(remoteVideoAvailable),
-    currentTarget: readonly(currentTarget),
-    isRegistered,
-    hasCall,
-    connect,
-    disconnect,
-    call,
-    answer,
-    decline,
-    hangup,
-    toggleMute,
-  };
-}
-
-function validateConfig(config: SipWebPhoneConfig) {
-  if (!/^wss:\/\//i.test(config.webSocketServer.trim())) {
-    throw new Error("SIP WebSocket URL must use WSS.");
-  }
-  if (!config.aor.trim() || !config.authorizationUsername.trim() || !config.authorizationPassword) {
-    throw new Error("SIP address, username, and password are required.");
-  }
-}
-
-function normalizeSipUri(value: string) {
-  const trimmed = value.trim();
-  return trimmed.toLowerCase().startsWith("sip:") ? trimmed : `sip:${trimmed}`;
-}
-
-function normalizeDestination(target: string, aor: string) {
-  const trimmed = target.trim();
-  if (!trimmed) throw new Error("Enter an extension or SIP address to call.");
-  if (trimmed.toLowerCase().startsWith("sip:")) return trimmed;
-  if (trimmed.includes("@")) return `sip:${trimmed}`;
-
-  const domain = normalizeSipUri(aor).split("@")[1];
-  if (!domain) throw new Error("Enter a full SIP address for the destination.");
-  return `sip:${trimmed}@${domain}`;
-}
-
-function getErrorMessage(error: unknown) {
-  if (error instanceof DOMException && error.name === "NotAllowedError") {
-    return "Microphone permission was denied. Allow microphone access in the browser and reconnect the web phone.";
-  }
-  if (error instanceof DOMException && error.name === "NotFoundError") {
-    return "No microphone was found for this call.";
-  }
-  return error instanceof Error ? error.message : "SIP connection failed.";
-}