@ocularsolution/vue

SDK oficial de Ocular Solution para integrar videollamadas en aplicaciones Vue 3 (Vite, Nuxt 3).

Provee composables (provideOcular, useOcularCall) que cargan el widget de Ocular en su página y lo controlan con estado reactivo.

Compatibilidad

| Componente | Versión | |---|---| | Vue | ≥ 3.4 | | Bundlers | Vite, Nuxt 3 | | TypeScript (opcional) | ≥ 5.0 — tipos .d.ts incluidos |

1. Antes de empezar

Solicite a Ocular Solution sus datos de aprovisionamiento:

1. widgetCode — código de organización de su widget. Configúrelo por variable de entorno; no lo incruste en el repositorio.
2. widgetUrl — URL https del script del widget para su entorno.
3. Autorización de su dominio — el origin desde el que su web usará el widget debe estar dado de alta por Ocular Solution. Sin este registro el widget no se inicializa (verá OCULAR_E_WIDGET_TIMEOUT).

2. Instalación

pnpm add @ocularsolution/vue
# o
npm install @ocularsolution/vue

3. Uso

<!-- App.vue (componente raíz) -->
<script setup>
import { provideOcular } from '@ocularsolution/vue';

provideOcular({
  widgetCode: import.meta.env.VITE_OCULAR_WIDGET_CODE,
  widgetUrl: import.meta.env.VITE_OCULAR_WIDGET_URL,
  appOrigin: import.meta.env.VITE_OCULAR_APP_ORIGIN,
});
</script>

<template>
  <RouterView />
</template>

<!-- Cualquier componente descendiente -->
<script setup>
import { useOcularCall } from '@ocularsolution/vue';

const { state, show, hide, toggle } = useOcularCall();
</script>

<template>
  <button @click="show(true)">Abrir videollamada</button>
  <button @click="hide()" :disabled="state !== 'visible'">Ocultar</button>
  <span>Estado: {{ state }}</span>
</template>

Nuxt 3

Monte provideOcular() dentro de un componente envuelto en <ClientOnly> (o un plugin .client.js): la carga del widget ocurre solo en el navegador. El SDK es SSR-safe.

4. API

provideOcular(config)

| Opción | Tipo | Req. | Descripción | |---|---|---|---| | widgetCode | string | Sí | Código de organización | | widgetUrl | string | Sí | URL https del script del widget | | appOrigin | string | No | Origin del iframe para validar mensajes | | widgetModule | string | No | Módulos del widget (default 'call') | | dataset | Record<string,string> | No | Atributos data-* extra | | nonce | string | No | Nonce CSP | | scriptIntegrity | string | No | Hash SRI del script |

useOcularCall()

const { state, load, show, hide, toggle, setLocale, setCustomer, showPopUp, align } = useOcularCall();
// state: Ref<'idle' | 'loading' | 'ready' | 'visible' | 'hidden' | 'error'>

useOcular()

Devuelve el cliente de bajo nivel (OcularClient) para suscribirse a eventos: state:changed, widget:ready, widget:message, error.

5. Errores comunes

| Código | Causa | Solución | |---|---|---| | OCULAR_E_WIDGET_TIMEOUT | Dominio no autorizado, widgetUrl/widgetCode incorrectos | Verifique el aprovisionamiento con Ocular Solution | | OCULAR_E_SCRIPT_LOAD | El navegador no pudo descargar el script (red/CSP) | Verifique la URL y su política CSP | | OCULAR_E_INVALID_CONFIG | Configuración incompleta | El mensaje indica el campo |

Protección de datos

setCustomer() permite asociar datos del usuario a la sesión. No envíe datos personales sin base legal y consentimiento. Las videollamadas pueden ser grabadas según la configuración de su organización: informe al usuario conforme a la normativa aplicable.

© Ocular Solution. Soporte: a través de su canal de cuenta. Incidentes de seguridad: [email protected]