feat(rt): add IVS transport to SDK

.gitignore

@@ -4,3 +4,4 @@ dist
 .DS_Store
 packages/sdk/tests/e2e-output
 .env
+package-lock.json

examples/react-vite/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "amazon-ivs-web-broadcast": "^1.14.0",
     "@decartai/sdk": "workspace:*",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

examples/react-vite/src/App.tsx

@@ -3,6 +3,7 @@ import { VideoStream } from "./components/VideoStream";
 
 function App() {
   const [prompt, setPrompt] = useState("anime style, vibrant colors");
+  const [transport, setTransport] = useState<"webrtc" | "ivs">("webrtc");
 
   return (
     <div style={{ padding: "2rem", fontFamily: "system-ui" }}>
@@ -20,7 +21,21 @@ function App() {
         </label>
       </div>
 
-      <VideoStream prompt={prompt} />
+      <div style={{ marginBottom: "1rem" }}>
+        <label>
+          Transport:
+          <select
+            value={transport}
+            onChange={(e) => setTransport(e.target.value as "webrtc" | "ivs")}
+            style={{ marginLeft: "0.5rem", padding: "0.5rem" }}
+          >
+            <option value="webrtc">WebRTC</option>
+            <option value="ivs">IVS</option>
+          </select>
+        </label>
+      </div>
+
+      <VideoStream key={transport} prompt={prompt} transport={transport} />
     </div>
   );
 }

examples/react-vite/src/components/VideoStream.tsx

@@ -3,9 +3,10 @@ import { useEffect, useRef, useState } from "react";
 
 interface VideoStreamProps {
   prompt: string;
+  transport?: "webrtc" | "ivs";
 }
 
-export function VideoStream({ prompt }: VideoStreamProps) {
+export function VideoStream({ prompt, transport = "webrtc" }: VideoStreamProps) {
   const inputRef = useRef<HTMLVideoElement>(null);
   const outputRef = useRef<HTMLVideoElement>(null);
   const realtimeClientRef = useRef<RealTimeClient | null>(null);
@@ -33,8 +34,6 @@ export function VideoStream({ prompt }: VideoStreamProps) {
           inputRef.current.srcObject = stream;
         }
 
-        setStatus("connecting...");
-
         const apiKey = import.meta.env.VITE_DECART_API_KEY;
         if (!apiKey) {
           throw new Error("DECART_API_KEY is not set");
@@ -44,8 +43,11 @@ export function VideoStream({ prompt }: VideoStreamProps) {
           apiKey,
         });
 
+        setStatus(`connecting via ${transport}...`);
+
         const realtimeClient = await client.realtime.connect(stream, {
           model,
+          transport,
           onRemoteStream: (transformedStream: MediaStream) => {
             if (outputRef.current) {
               outputRef.current.srcObject = transformedStream;

packages/sdk/index.html

@@ -241,6 +241,13 @@ <h3>Configuration</h3>
                 <option value="lucy_2_rt">Lucy 2 RT</option>
             </select>
         </div>
+        <div class="control-group">
+            <label for="transport-select">Transport:</label>
+            <select id="transport-select">
+                <option value="webrtc" selected>WebRTC</option>
+                <option value="ivs">IVS (Interactive Video Service)</option>
+            </select>
+        </div>
         <div class="control-group">
             <label for="initial-prompt">Initial Prompt (empty = passthrough):</label>
             <input type="text" id="initial-prompt" placeholder="e.g. Lego World">
@@ -377,6 +384,7 @@ <h3>Console Logs</h3>
         const elements = {
             apiKey: document.getElementById('api-key'),
             modelSelect: document.getElementById('model-select'),
+            transportSelect: document.getElementById('transport-select'),
             realtimeBaseUrl: document.getElementById('realtime-base-url'),
             initialPrompt: document.getElementById('initial-prompt'),
             startCamera: document.getElementById('start-camera'),
@@ -443,6 +451,27 @@ <h3>Console Logs</h3>
             elements.statusText.textContent = status.charAt(0).toUpperCase() + status.slice(1);
         }
 
+        // Transport selection handler — load IVS SDK from CDN when IVS is selected
+        let ivsScriptLoaded = false;
+        elements.transportSelect.addEventListener('change', (e) => {
+            const transport = e.target.value;
+            addLog(`Selected transport: ${transport}`, 'info');
+
+            if (transport === 'ivs' && !ivsScriptLoaded) {
+                addLog('Loading IVS Web Broadcast SDK from CDN...', 'info');
+                const script = document.createElement('script');
+                script.src = 'https://web-broadcast.live-video.net/1.14.0/amazon-ivs-web-broadcast.js';
+                script.onload = () => {
+                    ivsScriptLoaded = true;
+                    addLog('IVS Web Broadcast SDK loaded', 'success');
+                };
+                script.onerror = () => {
+                    addLog('Failed to load IVS SDK — IVS transport will not work', 'error');
+                };
+                document.head.appendChild(script);
+            }
+        });
+
         // Model selection handler
         elements.modelSelect.addEventListener('change', (e) => {
             const selectedModel = e.target.value;
@@ -527,8 +556,12 @@ <h3>Console Logs</h3>
                     initialImage = await initialImageResponse.blob();
                 }
 
+                const selectedTransport = elements.transportSelect.value;
+                addLog(`Connecting with transport: ${selectedTransport}`, 'info');
+
                 decartRealtime = await decartClient.realtime.connect(localStream, {
                     model,
+                    transport: selectedTransport,
                     onRemoteStream: (stream) => {
                         addLog('Received remote stream from Decart', 'success');
                         elements.remoteVideo.srcObject = stream;

packages/sdk/package.json

@@ -59,5 +59,13 @@
     "mitt": "^3.0.1",
     "p-retry": "^6.2.1",
     "zod": "^4.0.17"
+  },
+  "peerDependencies": {
+    "amazon-ivs-web-broadcast": ">=1.14.0"
+  },
+  "peerDependenciesMeta": {
+    "amazon-ivs-web-broadcast": {
+      "optional": true
+    }
   }
 }

packages/sdk/src/index.ts

@@ -24,6 +24,7 @@ export type {
   RealTimeClientConnectOptions,
   RealTimeClientInitialState,
 } from "./realtime/client";
+export type { CompositeLatencyEstimate } from "./realtime/composite-latency";
 export type {
   ConnectionPhase,
   DiagnosticEvent,
@@ -39,6 +40,13 @@ export type {
   VideoStallEvent,
 } from "./realtime/diagnostics";
 export type { SetInput } from "./realtime/methods";
+export type {
+  PixelLatencyEvent,
+  PixelLatencyMeasurement,
+  PixelLatencyReport,
+  PixelLatencyStats,
+  PixelLatencyStatus,
+} from "./realtime/pixel-latency";
 export type {
   RealTimeSubscribeClient,
   SubscribeEvents,