Saltar al contenido principal

Subir un Lens a Snapchat (Camera Kit)

Cómo publicar un Lens en Snapchat​

Esta guía describe el flujo completo para llevar un filtro (Lens) desde Lens Studio hasta una aplicación web con Camera Kit. El proceso tiene dos grandes etapas:

  1. Pruebas: subir el Lens en modo prueba, agregarlo a un grupo y consumirlo desde la app con el token de staging.
  2. Producción: publicar la app definitiva desde el Developer Portal de Snap con el token de production.

Páginas oficiales de referencia:

Acceso a las plataformas​

Para entrar al portal de Snap necesitas las credenciales de la cuenta de la organización:

  • Las credenciales (usuario y contraseña) están guardadas en Dashlane.
  • Al iniciar sesión, Snap envía un código de verificación por SMS. Ese código llega al teléfono de Angel Isai, así que coordina con él para completar el inicio de sesión.

Nota de seguridad: los API Tokens reales no se incluyen en esta documentación. Se obtienen directamente desde el Developer Portal (ver Paso 3) y se guardan en Dashlane. No los subas al repositorio ni los compartas en texto plano.

Paso 1: Subir el Lens a pruebas​

Antes de poder usar un Lens en Camera Kit, debe estar publicado en modo prueba desde Lens Studio:

  1. Abre tu proyecto en Lens Studio.
  2. Publica el Lens en modo prueba (no producción todavía).
  3. Snap te pedirá vincularlo con un número de teléfono para la verificación. Recuerda que el código de confirmación llega a Angel Isai.
  4. Espera a que el Lens termine de subirse. Solo cuando ya está disponible en tu cuenta podrás buscarlo en el siguiente paso.

Paso 2: Agregar el Lens a un grupo (Lens Source)​

Camera Kit no consume Lenses sueltos, sino grupos de Lenses. Una vez que el Lens ya está subido:

  1. Entra al Developer Portal y ve a la sección de Lens Source.
  2. Busca el Lens que acabas de subir.
  3. Agrégalo a un grupo (Lens Group). Si no tienes un grupo creado, crea uno.
  4. Anota dos identificadores que necesitarás en la app:
    • El ID del Lens (id del filtro).
    • El ID del grupo (lens group id).

El grupo es el que se referencia desde la app. Puedes tener varios Lenses dentro del mismo grupo.

Paso 3: Obtener el API Token​

El apiToken autentica a tu app contra Camera Kit y se obtiene desde el Developer Portal. Existen dos tokens distintos según el entorno:

EntornoCuándo se usa
StagingDurante el desarrollo y las pruebas del Lens.
ProductionCuando la app ya está lista para publicarse.

Copia el token correspondiente desde el portal. Para no exponerlo en el código, guárdalo en una variable de entorno (por ejemplo en un archivo .env):

# .env
VITE_CAMERA_KIT_TOKEN="<TU_API_TOKEN_AQUI>"

Paso 4: Cargar el Lens en la app​

Con el token y los IDs del paso anterior, inicializa el SDK y carga el Lens. Usa el token de staging mientras pruebas y cámbialo por el de production al publicar.

import { bootstrapCameraKit } from '@snap/camera-kit';

// Inicializa el SDK con el apiToken (léelo desde una variable de entorno)
const cameraKit = await bootstrapCameraKit({
  apiToken: import.meta.env.VITE_CAMERA_KIT_TOKEN, // staging mientras pruebas
});

// Carga el Lens usando el ID del filtro y el ID del grupo
const lens = await cameraKit.lensRepository.loadLens(
  '<ID_DEL_LENS>',   // id del Lens
  '<ID_DEL_GRUPO>',  // id del grupo (lens group)
);

// Aplica el Lens en la sesión activa
await session.applyLens(lens);

El detalle de cómo crear la sesión, asignar la cámara, tomar foto y grabar video está en la guía de Camera Kit JS.

Paso 5: Publicar en producción​

Cuando la app y el Lens ya funcionan correctamente en pruebas:

  1. Cambia el apiToken de la app por el token de production.
  2. Asegúrate de que el Lens esté publicado en modo producción (no prueba).
  3. Entra al Developer Portal (developers.snap.com → Developer Portal) y completa la publicación de la app en producción.

A partir de ahí la app queda lista para usarse públicamente.

Resumen del flujo​

Lens Studio (publicar en prueba, verificar con teléfono)
        │
        ▼
Lens Studio → Lens Source (buscar Lens → agregar a un grupo)
        │  obtienes: ID del Lens + ID del grupo
        ▼
Lens Studio → API Token (staging para pruebas, production para publicar)
        │
        ▼
App web con Camera Kit (bootstrapCameraKit + loadLens(idLens, idGrupo))
        │
        ▼
Producción: token production + publicar la app en el Developer Portal