Camera Kit Integration - Remote API

Overview

Holostep uses Snapchat Camera Kit to provide Virtual Try-On (VTO) experiences. Our integration uses the Remote API feature to dynamically load 3D product models (GLB files) into lenses at runtime.

Purpose

Allow users to virtually try on products (shoes, accessories, etc.) by loading the appropriate 3D model based on the Holostep scene they're viewing.

Data Flow

┌──────────────┐      ┌──────────────┐      ┌──────────────┐      ┌──────────────┐
│   User's     │      │   Camera Kit │      │   Onsite     │      │   Holostep   │
│   Browser    │      │   Host (JS)  │      │   Backend    │      │   CDN        │
└──────┬───────┘      └──────┬───────┘      └──────┬───────┘      └──────┬───────┘
       │                     │                     │                     │
       │  1. User opens VTO  │                     │                     │
       │  ?sceneId=abc123    │                     │                     │
       │─────────────────────>                     │                     │
       │                     │                     │                     │
       │  2. Lens requests   │                     │                     │
       │     scene data      │                     │                     │
       │<────────────────────│                     │                     │
       │                     │                     │                     │
       │  3. JS calls        │                     │                     │
       │     backend API     │                     │                     │
       │                     │─────────────────────>                     │
       │                     │  /vto/scene?sceneId │                     │
       │                     │                     │                     │
       │  4. Backend returns │                     │                     │
       │     CDN URL         │                     │                     │
       │                     │<─────────────────────                     │
       │                     │                     │                     │
       │  5. JS responds     │                     │                     │
       │     to lens         │                     │                     │
       │─────────────────────>                     │                     │
       │                     │                     │                     │
       │  6. Lens fetches GLB│                     │                     │
       │─────────────────────────────────────────────────────────────────>
       │                     │                     │                     │
       │  7. 3D model in AR  │                     │                     │
       │<─────────────────────────────────────────────────────────────────
       │                     │                     │                     │

Backend API Endpoint

Setting	Value
Service	onsite-backend
Endpoint	GET /api/v1/vto/scene?sceneId=xxx
Auth	None (public)

Request

GET https://onsite-backend.holostep.local/api/v1/vto/scene?sceneId=abc123

Response

{
  "sceneId": "abc123",
  "modelUrl": "https://storage.googleapis.com/holo-api-stage-cdn/12345/model.glb",
  "settings": {
    "enabled": true,
    "lensId": "4abddb73-8871-4813-9430-e4e62a4238ad"
  }
}

Error Responses

Status	Description
400	Scene ID is required
404	Scene not found or VTO not enabled

Snap Remote API Configuration

Setting	Value
API Spec Name	holostep-vto-models
Target Platform	CAMERA_KIT
Endpoint	get_scene
Parameter	sceneId (string, optional - can also be passed via URL)

Request (Lens → JS Host)

{
  "endpoint": "get_scene",
  "parameters": {
    "sceneId": "abc123"
  }
}

Response (JS Host → Lens)

{
  "url": "https://storage.googleapis.com/holo-api-stage-cdn/12345/model.glb"
}

URL Parameters

The Camera Kit page accepts these URL parameters:

Parameter	Description
sceneId	Holostep scene ID - fetches model URL from backend
modelUrl	Direct URL to GLB file (fallback for testing)
vtoId	Custom lens ID to use (optional)
snapToken	Snap Login Kit token for Push-to-Web (optional)

Example URLs:

# Production: Load scene from backend
camera-kit.html?sceneId=abc123

# Development: Direct model URL
camera-kit.html?modelUrl=https://example.com/model.glb

# With Push-to-Web enabled
camera-kit.html?sceneId=abc123&snapToken=YOUR_TOKEN

Data Transmitted

Data	Direction	Description
sceneId	Lens → App	Holostep scene identifier (non-PII)
url	App → Lens	Public CDN URL to GLB file

Privacy & Security

No Personal Data Collected

• No PII transmitted: Only scene IDs are exchanged
• No user tracking: The Remote API does not collect or transmit user data
• No authentication tokens: GLB files are served from public CDN URLs

Data Storage

• No user data is stored through the Remote API integration
• Scene IDs are ephemeral request parameters only

Network Security

• All communication uses HTTPS
• GLB files served from secure CDN (Google Cloud Storage)
• No sensitive data in URLs or responses

Lens Behavior

1. Lens initializes and receives sceneId from URL parameters or launch params
2. Lens sends Remote API request to host app with endpoint get_scene
3. Host app calls backend /vto/scene?sceneId=xxx to get model URL
4. Host app responds with { url: modelUrl }
5. Lens downloads GLB from CDN URL using InternetModule.makeResourceFromUrl()
6. Lens loads the model using RemoteMediaModule.loadResourceAsGltfAsset()
7. Lens renders 3D model in AR view

Lens Studio Implementation

// In your lens TypeScript:
const response = await remoteServiceModule.performRequest(request);
const data = JSON.parse(response.body);
const resource = InternetModule.makeResourceFromUrl(data.url);
const gltfAsset = await RemoteMediaModule.loadResourceAsGltfAsset(resource);
gltfAsset.tryInstantiateWithSetting(sceneObject, settings);

Push-to-Web Support

The Camera Kit integration supports Push-to-Web for testing lenses directly from Lens Studio.

Setup

1. Set VITE_SNAP_LOGIN_TOKEN in .env or pass ?snapToken=xxx in the URL
2. Add your Snapchat account to Demo Users in Snap Developer Portal
3. In Lens Studio, use "Push to Device" and select your web target

Environment Variables

# .env file
VITE_SNAP_MODEL_API_SPEC_ID=your-api-spec-id
VITE_SNAP_LOGIN_TOKEN=your-staging-oauth-token
VITE_SCRIPTER_BACKEND_URL=https://onsite-backend.holostep.local

Contact

Company: Holostep Website: https://holostep.comTechnical Contact: dev@holostep.com