# How to use the SANA-Streaming API > Edit a live webcam or an uploaded clip with the SANA-Streaming API: one WebSocket for camera and video, an edit prompt, periodic re-anchoring and release. Source: https://windflow.online/guides/sana-streaming-api · Updated 2026-11-09 · Windflow Labs The **SANA-Streaming API** on Windflow runs [SANA-Streaming](https://windflow.online/models/sana-streaming) as a realtime session that edits a video you bring, instead of generating one from scratch. Point it at a live webcam or an uploaded clip, describe the change, and it restyles what the prompt names while the rest of the picture, and its motion, stays as it was. A new prompt lands at the next 24-frame chunk boundary, so you can change the edit while the stream runs. ## Start from something runnable The [public browser examples](https://github.com/windflow-labs/realtime-examples) provide a local Node server and a plain JavaScript client for LingBot, SANA-Streaming, Helios and LongLive. They keep the account key on the server, request a single-session token capped at 180 seconds, and include an explicit release action. The repository states its verification limits; approved beta access and billable model capacity are required for a live run. You need an approved Windflow account and an API key that begins with `wf_live_` ([request access](https://windflow.online/auth?mode=request)). Requests go to `https://api.windflow.online`. **1. Check the key (server).** The response lists this model's commands, messages and limitations. ```bash curl https://api.windflow.online/v1/models/sana-streaming \ -H "Authorization: Bearer $WINDFLOW_API_KEY" ``` **2. Mint a browser token (server).** The account key never reaches the browser. ```ts // For example app/api/windflow-token/route.ts. Authenticate your own user first. export async function POST() { const res = await fetch("https://api.windflow.online/v1/tokens", { method: "POST", headers: { Authorization: `Bearer ${process.env.WINDFLOW_API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: "sana-streaming", max_sessions: 1 }), }); return Response.json(await res.json(), { status: res.status }); } ``` The token is bound to this model (another model gets `403 model_mismatch`) and can create one session. Read `expires_at` from the response instead of assuming a lifetime. **3. Open the session and draw frames (browser).** Save this as `windflow-session.js`. It is the same file the [Helios guide](https://windflow.online/guides/helios-api) walks through line by line. ```js // windflow-session.js: plain fetch and WebSocket, no dependencies const API = "https://api.windflow.online"; export async function call(path, jwt, body) { const res = await fetch(API + path, { method: body ? "POST" : "GET", headers: { Authorization: `Bearer ${jwt}`, "Content-Type": "application/json" }, body: body && JSON.stringify(body), }); const data = await res.json(); if (!res.ok) throw Object.assign(new Error(data.error.message), data.error, { status: res.status }); return data; } export function openSession(model, canvas, onMessage = () => {}) { const ctx = canvas.getContext("2d"); let session, ws, closed = false, released = false; let painting = Promise.resolve(); const paint = async (bytes) => { const frame = await createImageBitmap(new Blob([bytes], { type: "image/jpeg" })); if (canvas.width !== frame.width) Object.assign(canvas, { width: frame.width, height: frame.height }); ctx.drawImage(frame, 0, 0); frame.close(); }; const release = () => { closed = true; ws?.close(); if (!session || released) return; released = true; fetch(`${API}/v1/sessions/${session.session_id}`, { method: "POST", keepalive: true, // still sent while the page unloads headers: { Authorization: `Bearer ${session.jwt}`, "Content-Type": "application/json" }, body: JSON.stringify({ action: "detach", connection_id: session.connection_id, release: true }), }); }; const ready = (async () => { const { jwt } = await (await fetch("/api/windflow-token", { method: "POST" })).json(); session = await call("/v1/sessions", jwt, { model, transport: "ws-h264" }); while (session.status === "queued" && !closed) { await new Promise((resolve) => setTimeout(resolve, 2000)); const poll = await call(`/v1/sessions/${session.session_id}`, session.jwt); onMessage({ type: "queued", position: poll.queue_position }); if (poll.status !== "queued") { session = await call("/v1/sessions", session.jwt, { model, session_id: session.session_id, transport: "ws-h264" }); } } const offer = session.transport.offers.find((o) => o.kind === "ws-h264"); if (closed || !offer) throw new Error(closed ? "released" : `no stream offer (status ${session.status})`); const url = new URL(offer.relay_path, API); url.protocol = "wss:"; ws = new WebSocket(url); ws.binaryType = "arraybuffer"; return new Promise((resolve, reject) => { ws.onopen = () => { ws.send(JSON.stringify({ type: "authenticate", token: offer.launch_token })); ws.send(JSON.stringify({ type: "client_hello", codecs: ["jpeg"] })); }; ws.onmessage = ({ data }) => { if (typeof data !== "string") { painting = painting.then(() => paint(data)).catch(console.warn); return; } const msg = JSON.parse(data); if (msg.type === "worker_ready") resolve(msg); if (msg.type === "failed") reject(new Error(msg.message ?? msg.error)); onMessage(msg); }; ws.onclose = (event) => { onMessage({ type: "socket_closed", code: event.code }); reject(new Error(`socket closed (${event.code})`)); }; }); })(); ready.catch(release); // a failed start must not leave a session running return { ready, release, get session() { return session; }, get socket() { return ws; }, command: (type, fields = {}) => call(`/v1/sessions/${session.session_id}/commands`, session.jwt, { command: { type, ...fields } }), upload: async (file) => { const intent = await call("/v1/uploads", session.jwt, { filename: file.name, mime: file.type, size: file.size, session_id: session.session_id, }); const put = await fetch(intent.upload_url, { method: "PUT", headers: intent.headers, body: file }); if (!put.ok) throw new Error(`upload failed (${put.status})`); return call(`/v1/uploads/${intent.file_id}/complete`, session.jwt, {}); }, }; } ``` `queued` and `socket_closed` are messages this file generates; every other message comes from the session. **4. Send the webcam and start editing.** In live mode, camera frames go up the same socket as JPEG binary messages. The worker's `worker_ready` says how fast (`cameraFps`) and how wide (`cameraMaxWidth`) it wants them; sending more only adds backlog. ```js import { openSession } from "./windflow-session.js"; let markSourceReady; const sourceReady = new Promise((resolve) => (markSourceReady = resolve)); const sana = openSession("sana-streaming", document.querySelector("canvas"), (msg) => { if (msg.type === "source_ready") markSourceReady(); // a camera frame reached the worker console.log(msg.type); }); const hello = await sana.ready; await sana.command("set_mode", { mode: "live" }); const stopCamera = await sendCamera(sana.socket, hello, document.querySelector("#preview")); await sana.command("set_prompt", { prompt: "Turn the background into a hand-painted watercolor; keep the person unchanged" }); await sourceReady; await sana.command("start"); // `video` is a visible