ParticipantTile

useTrack

trackRef={…}

useTracks

const trackReferences: TrackReference[] = useTracks([Track.Source.Camera]);

Track.Source.Camera

Uncaught Error: No participant provided, make sure you are inside a participant context or pass the participant explicitly

<ParticipantTile {...trackReference} />

<ParticipantTile {...tracks[0]} />

Uncaught Error: No participant provided, make sure you are inside a participant context or pass the participant explicitly

video={true}

audio={true}

LiveKitRoom

div

id

video={true}

audio={true}

LiveKitRoom

MyVideoConference

"use client";

import "@livekit/components-styles";

import {
  LiveKitRoom,
  RoomAudioRenderer,
  ControlBar,
  GridLayout,
  ParticipantTile,
  useTracks,
  TrackLoop,
} from "@livekit/components-react";

import { Track } from "livekit-client";

import { useEffect, useState } from "react";

export default function Page() {
  // TODO: get user input for room and name
  const room = "quickstart-room";
  const name = "quickstart-user";
  const [token, setToken] = useState("");

  useEffect(() => {
    (async () => {
      try {
        const resp = await fetch(`/api/get-participant-token?room=${room}&username=${name}`);
        const data = await resp.json();
        setToken(data.token);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  if (token === "") {
    return <div>Getting token...</div>;
  }

  return (
    <LiveKitRoom
      token={token}
      connectOptions={{ autoSubscribe: false }}
      serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
      // Use the default LiveKit theme for nice styles.
      data-lk-theme="default"
      style={{ height: "100dvh" }}
    >
      {/* Your custom component with basic video conferencing functionality. */}
      {/* <MyVideoConference /> */}
      <OnlyOneParticipant />
      {/* The RoomAudioRenderer takes care of room-wide audio for you. */}
      <RoomAudioRenderer />
      {/* Controls for the user to start/stop audio, video, and screen 
      share tracks and to leave the room. */}
      <ControlBar />
    </LiveKitRoom>
  );
}

function OnlyOneParticipant() {
  const tracks = useTracks([{ source: Track.Source.Camera, withPlaceholder: true }], {
    onlySubscribed: false,
  });

  // this works too, but should be identical if there's only one track:
  // return (
  //   <TrackLoop tracks={tracks} style={{ height: "calc(100vh - var(--lk-control-bar-height))" }}>
  //     <ParticipantTile />
  //   </TrackLoop>
  // );

  return <ParticipantTile {...tracks[0]} />;
}

tracks

console.log("tracks =", tracks);

[]

VideoTrack

ParticipantTile

VideoTrack

ParticipantTile

import * as React from "react";
import type { Participant, TrackPublication } from "livekit-client";
import { Track } from "livekit-client";
import type {
  ParticipantClickEvent,
  TrackReferenceOrPlaceholder,
} from "@livekit/components-core";
import { isParticipantSourcePinned } from "@livekit/components-core";
import {
  ParticipantContext,
  useEnsureParticipant,
  useMaybeLayoutContext,
  useMaybeParticipantContext,
  useMaybeTrackContext,
  FocusToggle,
  VideoTrack,
  useParticipantTile,
} from "@livekit/components-react";

/** @public */
export function ParticipantContextIfNeeded(
  props: React.PropsWithChildren<{
    participant?: Participant;
  }>
) {
  const hasContext = !!useMaybeParticipantContext();
  return props.participant && !hasContext ? (
    <ParticipantContext.Provider value={props.participant}>
      {props.children}
    </ParticipantContext.Provider>
  ) : (
    <>{props.children}</>
  );
}

/** @public */
export interface ParticipantTileProps
  extends React.HTMLAttributes<HTMLDivElement> {
  disableSpeakingIndicator?: boolean;
  participant?: Participant;
  source?: Track.Source;
  publication?: TrackPublication;
  onParticipantClick?: (event: ParticipantClickEvent) => void;
}

export function CustomParticipantTile({
  participant,
  children,
  source = Track.Source.Camera,
  onParticipantClick,
  publication,
  disableSpeakingIndicator,
  ...htmlProps
}: ParticipantTileProps) {
  const p = useEnsureParticipant(participant);
  const trackRef: TrackReferenceOrPlaceholder = useMaybeTrackContext() ?? {
    participant: p,
    source,
    publication,
  };

  const { elementProps } = useParticipantTile<HTMLDivElement>({
    participant: trackRef.participant,
    htmlProps,
    source: trackRef.source,
    publication: trackRef.publication,
    disableSpeakingIndicator,
    onParticipantClick,
  });
  //   const isEncrypted = useIsEncrypted(p);
  const layoutContext = useMaybeLayoutContext();

  const handleSubscribe = React.useCallback(
    (subscribed: boolean) => {
      if (
        trackRef.source &&
        !subscribed &&
        layoutContext &&
        layoutContext.pin.dispatch &&
        isParticipantSourcePinned(
          trackRef.participant,
          trackRef.source,
          layoutContext.pin.state
        )
      ) {
        layoutContext.pin.dispatch({ msg: "clear_pin" });
      }
    },
    [trackRef.participant, layoutContext, trackRef.source]
  );

  return (
    // <ParticipantContextIfNeeded participant={trackRef.participant}>
    <>
      <VideoTrack
        participant={trackRef.participant}
        source={trackRef.source}
        publication={trackRef.publication}
        onSubscriptionStatusChanged={handleSubscribe}
        manageSubscription={true}
      />
    </>
    // </ParticipantContextIfNeeded>
  );
}

import * as React from "react";
import { useRoomContext, useStartAudio } from "@livekit/components-react";

/** @public */
export interface AllowAudioPlaybackProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
}

/**
 * The StartAudio component is only visible when the browser blocks audio playback. This is due to some browser implemented autoplay policies.
 * To start audio playback, the user must perform a user-initiated event such as clicking this button.
 * As soon as audio playback starts, the button hides itself again.
 *
 * @example
 * ```tsx
 * <LiveKitRoom>
 *   <StartAudio label="Click to allow audio playback" />
 * </LiveKitRoom>
 *