init y arranque

OBVto.init(opts) → Promise<VtoEngine>

Carga los módulos solicitados, resuelve la licencia y devuelve el motor listo para arrancar.

Campos de InitOptions

Campo	Tipo	Obligatorio	Descripción
modules	string[]	Sí	Módulos a activar, p.ej. ['hair-color'].
container	string | HTMLElement	No	Selector CSS o elemento destino. Sin él, se crea un overlay de pantalla completa.
licenseKey	string	No	Clave de licencia (requerida en producción). En dev puede omitirse.
configEndpoint	string	No	URL del endpoint que devuelve la LicenseConfig (?key=…).
licenseProvider	LicenseProvider	No	Provider explícito (enchufable; tiene prioridad sobre configEndpoint). Útil en tests.
moduleConfig	Record<string, Record<string, unknown>>	No	Opciones por módulo pasadas a su factory (p.ej. modelUrl, wasmPaths).
experience	ExperienceConfig	No	Activa la pantalla de inicio. Requiere start. Ver 03-inicio-y-branding.md.
start	StartOptions	No	Opciones del visor para el arranque automático tras elegir modo en la pantalla de inicio. Requiere experience.

Tabla exhaustiva de tipos en 10-referencia-de-tipos.md.

Headless vs selector de inicio

Sin experience (modo headless): init devuelve el motor y no monta ninguna pantalla. El host decide cuándo y cómo llamar a vto.start():

const vto = await OBVto.init({
  modules: ['hair-color'],
  container: '#vto',
})
// El host llama start() cuando quiera (p.ej. al pulsar un botón)
await vto.start({ module: 'hair-color', colors: TONOS })

Con experience + start: init monta la pantalla de inicio (selector de modo: cámara / foto). Al elegir modo, el SDK arranca el visor automáticamente con las opciones de start. El host no llama vto.start() directamente:

const vto = await OBVto.init({
  modules: ['hair-color'],
  container: '#vto',
  experience: {
    branding: { name: 'AURA' },
  },
  start: {
    module: 'hair-color',
    colors: TONOS,
    ui: { branding: { name: 'AURA' } },
  },
})
// El SDK gestiona el flujo completo desde aquí

Si se pasa experience sin start, init lanza un error en tiempo de ejecución.

---

vto.start(opts)

Arranca la captura (cámara o foto) y aplica el módulo. Los campos principales de StartOptions:

Campo	Tipo	Default	Descripción
module	string	—	Id del módulo a activar (debe estar en modules del init).
source	'camera' | 'photo'	'camera'	Fuente de imagen. 'camera' abre getUserMedia; 'photo' usa una imagen fija.
image	HTMLImageElement	—	Requerido cuando source es 'photo'.
colors	Color[]	—	Lista de tonos de la paleta. El primero se aplica al arrancar.
defaultIntensity	number	0.7	Intensidad inicial del efecto (rango 0–1).
ui	ViewerUIConfig	—	Si se pasa, el SDK monta el chrome del visor (barra, card, favoritos). Sin él, el SDK es headless.

Ejemplo con UI mínima

const TONOS = [
  { id: 'cobrizo',   name: 'Cobrizo Rubí', h: 358, s: 82,  l: 46 },
  { id: 'neon-verde', name: 'Neón Verde',  h: 110, s: 100, l: 50 },
]

await vto.start({
  module: 'hair-color',
  source: 'camera',
  colors: TONOS,
  ui: { branding: { name: 'AURA' } },
})

Pasar ui monta la barra del visor con la marca AURA. Para configurar controles, producto y favoritos ver las páginas 04–06.

Modo foto

const img = new Image()
img.src = '/foto-cliente.jpg'
await img.decode()

await vto.start({
  module: 'hair-color',
  source: 'photo',
  image: img,
  colors: TONOS,
})

image es obligatorio cuando source es 'photo'. El loop renderiza sobre la imagen estática en lugar de video.