Subscribe to Media Tracks

The agent publishes its rendered output as two separate LiveKit media tracks: one video track for the avatar and one audio track for its voice. To play the agent, listen for TrackSubscribed and attach each track to a media sink.

Note: Attach the listener before calling room.connect() so you don't miss the initial subscription events.

Subscribing to tracks

   import { RoomEvent, Track } from "livekit-client";

   room.on(RoomEvent.TrackSubscribed, (track) => {
     if (track.kind === Track.Kind.Video) {
       track.attach(document.getElementById("agent-video") as HTMLVideoElement);
     } else if (track.kind === Track.Kind.Audio) {
       track.attach(document.getElementById("agent-audio") as HTMLAudioElement);
     }
   });

Your HTML needs a <video> and <audio> element for the tracks to attach to:

<video id="agent-video" autoplay playsinline></video>
<audio id="agent-audio" autoplay></audio>