Edit live video with a prompt.

// 1. Your server: create a session
// Your server (Node). The API key never goes to the browser.
app.post("/start-edit", async (req, res) => {
  const r = await fetch("https://babaganoush-production.up.railway.app/v1/sessions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.VIDEO_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ prompt: req.body.prompt }),
  });
  res.status(r.status).json(await r.json()); // livekit_url + client_livekit_token, no secrets
});

// 2. Your web page: join and send the camera
// Your web page.  npm install livekit-client
import { Room, RoomEvent, Track, createLocalVideoTrack } from "livekit-client";

const session = await (await fetch("/start-edit", { method: "POST", /* prompt */ })).json();
const room = new Room();

room.on(RoomEvent.TrackSubscribed, (track) => {
  if (track.kind === Track.Kind.Video) track.attach(document.querySelector("#edited"));
});
room.on(RoomEvent.DataReceived, (payload) => {
  const msg = JSON.parse(new TextDecoder().decode(payload));
  // {type: "status", state: "loading" | "streaming", ends_at}   GPU starting / live, and when time is up
  // {type: "error", message}                                       something went wrong
  // {type: "ended", reason}                                        session over
});

await room.connect(session.livekit_url, session.client_livekit_token);
const camera = await createLocalVideoTrack({ resolution: { width: 848, height: 480, frameRate: 24 } });
await room.localParticipant.publishTrack(camera, {
  source: Track.Source.Camera,
  videoEncoding: { maxBitrate: 1_000_000, maxFramerate: 24 },
});

// 3. Change the prompt any time
const send = (text) => room.localParticipant.publishData(
  new TextEncoder().encode(JSON.stringify({ prompt: text })), { reliable: true });

send("cyberpunk neon city");