Quickstart

import { StreamVideoClient, User } from "@stream-io/video-client";

const apiKey = "your-api-key";
const token = "authentication-token";
const user: User = { id: "user-id" };

const client = new StreamVideoClient({ apiKey, token, user });
const call = client.call("default", "call-id");
call.join({ create: true });

await call.join({ create: true });

await call.camera.enable();
await call.microphone.enable();

await call.microphone.disable();
await call.camera.disable();

await call.join({ create: true });

import { renderParticipant, cleanupParticipant } from "./participant";

const parentContainer = document.getElementById("participants")!;

// This will enable visibility tracking in the client
call.setViewport(parentContainer);

// Whenever the participants change, we update the UI
call.state.participants$.subscribe((participants) => {
  // render / update existing participants
  participants.forEach((participant) => {
    renderParticipant(call, participant, parentContainer);
  });

  // If you're using a web framework, this part is handled by the framework
  // Remove stale elements for stale participants
  parentContainer
    .querySelectorAll<HTMLMediaElement>("video, audio")
    .forEach((el) => {
      const sessionId = el.dataset.sessionId!;
      const participant = participants.find((p) => p.sessionId === sessionId);
      if (!participant) {
        cleanupParticipant(sessionId);
        el.remove();
      }
    });
});

import { Call, StreamVideoParticipant } from "@stream-io/video-client";

// The quickstart uses fixed video dimensions for simplification
const videoDimension = {
  width: 333,
  height: 250,
};

const videoBindingsCache = new Map<string, Function | undefined>();
const videoTrackingCache = new Map<string, Function | undefined>();
const audioBindingsCache = new Map<string, Function | undefined>();

const renderVideo = (
  call: Call,
  participant: StreamVideoParticipant,
  parentContainer: HTMLElement,
) => {
  const id = `video-${participant.sessionId}`;
  let videoEl = document.getElementById(id) as HTMLVideoElement | null;
  if (!videoEl) {
    videoEl = document.createElement("video");
    videoEl.style.setProperty("object-fit", "contain");
    videoEl.id = `video-${participant.sessionId}`;
    videoEl.width = videoDimension.width;
    videoEl.height = videoDimension.height;
    videoEl.dataset.sessionId = participant.sessionId;

    parentContainer.appendChild(videoEl);

    const untrack = call.trackElementVisibility(
      videoEl,
      participant.sessionId,
      "videoTrack",
    );

    // keep reference to untrack function to call it later
    videoTrackingCache.set(id, untrack);

    // registers subscription updates and stream changes
    const unbind = call.bindVideoElement(
      videoEl,
      participant.sessionId,
      "videoTrack",
    );

    // keep reference to unbind function to call it later
    videoBindingsCache.set(id, unbind);
  }
};

const renderAudio = (
  call: Call,
  participant: StreamVideoParticipant,
  parentContainer: HTMLElement,
) => {
  // We don't render audio for local participant
  if (participant.isLocalParticipant) return;

  const id = `audio-${participant.sessionId}`;
  let audioEl = document.getElementById(id) as HTMLAudioElement | null;
  if (!audioEl) {
    audioEl = document.createElement("audio");
    audioEl.id = id;
    audioEl.dataset.sessionId = participant.sessionId;

    parentContainer.appendChild(audioEl);

    // registers subscription updates and stream changes for audio
    const unbind = call.bindAudioElement(audioEl, participant.sessionId);

    // keep reference to unbind function to call it later
    audioBindingsCache.set(id, unbind);
  }
};

export const renderParticipant = (
  call: Call,
  participant: StreamVideoParticipant,
  parentContainer: HTMLElement,
) => {
  renderAudio(call, participant, parentContainer);
  renderVideo(call, participant, parentContainer);
};

// If you're using a web framework, unbinding is usually handled with a component lifecycle event
export const cleanupParticipant = (sessionId: string) => {
  const unbindVideo = videoBindingsCache.get(`video-${sessionId}`);
  if (unbindVideo) {
    unbindVideo();
    videoBindingsCache.delete(`video-${sessionId}`);
  }

  const untrackVideo = videoTrackingCache.get(`video-${sessionId}`);
  if (untrackVideo) {
    untrackVideo();
    videoTrackingCache.delete(`video-${sessionId}`);
  }

  const unbindAudio = audioBindingsCache.get(`audio-${sessionId}`);
  if (unbindAudio) {
    unbindAudio();
    audioBindingsCache.delete(`audio-${sessionId}`);
  }
};

import { Call } from "@stream-io/video-client";

const renderAudioButton = (call: Call) => {
  const audioButton = document.createElement("button");

  audioButton.addEventListener("click", async () => {
    await call.microphone.toggle();
  });

  call.microphone.state.status$.subscribe((status) => {
    audioButton.innerText =
      status === "enabled" ? "Turn off mic" : "Turn on mic";
  });

  return audioButton;
};

const renderVideoButton = (call: Call) => {
  const videoButton = document.createElement("button");

  videoButton.addEventListener("click", async () => {
    await call.camera.toggle();
  });

  call.camera.state.status$.subscribe((status) => {
    videoButton.innerText =
      status === "enabled" ? "Turn off camera" : "Turn on camera";
  });

  return videoButton;
};

export const renderControls = (call: Call) => {
  return {
    audioButton: renderAudioButton(call),
    videoButton: renderVideoButton(call),
  };
};