← All demos

Stream tracking

Join a room and list every stream the SDK has seen, using getStreams(): its state, when it was first and last seen, and its peer UUID. Publish test streams and view them to watch the states change.

Connect to the room below.
Publish a canvas stream here, or open the share link in a second tab and publish there.
Click View on a stream from the other tab. Its state goes from pending to connected and a preview appears.

Room

Not connected

Room name

Auto-refresh every 2s

RoomNone

My UUIDNone

Streams0

Last updateNever

Streams in room

Previews

Streams you publish or view appear here.

Events

Key SDK calls in this demo

const vdo = new VDONinjaSDK({ room });
vdo.addEventListener('listing', refresh);            // room list arrives / changes
vdo.addEventListener('videoaddedtoroom', refresh);   // someone started publishing
vdo.addEventListener('track', (e) => {               // media from a stream we view
  const { streamID, streams, track } = e.detail;
  showPreview(streamID, streams[0] || new MediaStream([track]));
});
await vdo.connect();
await vdo.joinRoom({ room });

for (const s of vdo.getStreams()) {
  console.log(s.streamID, s.state, s.firstSeen, s.lastSeen, s.uuid);
}
await vdo.view(streamID);   // state: pending, then connected
vdo.stopViewing(streamID);