Einbettung mit dem Web SDK
Das Web SDK übernimmt Video-Rendering, Audio und den Session-Lebenszyklus. Es funktioniert mit React, Vue, Angular und Vanilla JavaScript.
1. SDK installieren
npm install @touchcastllc/napster-companion-api @reduxjs/toolkit
2. Session-Token abrufen (serverseitig)
Erstellen Sie zunächst Ihren Omniagenten über POST /public/agents, falls noch nicht geschehen. Rufen Sie anschließend POST /public/agents/{agentId}/connections mit Ihrer Agenten-ID auf, um eine Sitzung zu erstellen. Die Antwort enthält ein token. Geben Sie dieses sicher an den Client weiter. Generieren Sie Sitzungstoken niemals im clientseitigen Code.
3. Initialisierung in React
Importieren Sie NapsterCompanionApiSdk, erstellen Sie eine Container-Ref und rufen Sie NapsterCompanionApiSdk.init(token, { mountContainer: containerRef.current, position: "bottom-right" }) innerhalb eines useEffect auf. Rufen Sie bei der Bereinigung instance.destroy() auf.
Wichtig: Generieren Sie bei jedem Laden der Seite ein neues Token – Tokens sind einmalig verwendbar und kurzlebig. Die Wiederverwendung eines gespeicherten Tokens führt beim Neuladen zu WebSocket-Verbindungsfehlern.
Tipp: Beispiele für Vue, Angular und Vanilla JS finden Sie in der WebRTC-Dokumentation. Generieren Sie das Sitzungstoken stets auf Ihrem Backend – niemals im clientseitigen Code.