Metadata

Alongside audio and video, it is possible to send additional metadata with each peer. Metadata is just JSON that can contain arbitrary information. Its most common use is sending a user name associated with a peer. However, it can be also used to send the peer's camera type, application information etc.

info

You can also set metadata on the server side, when adding user to the room. This metadata is persistent throughout its lifetime and is useful for attaching information that can't be overwritten by the peer, like information about real user names or basic permission info.

Setting metadata when joining the room

The joinRoom method from the useConnection hook has a peerMetadata parameter, that can be used for setting object metadata.

import { useConnection } from "@fishjam-cloud/react-client";
import { useCallback } from "react";

type PeerMetadata = {
  displayName: string;
};

export function JoinRoomButton() {
  const { joinRoom } = useConnection();

  const onJoinRoomPress = useCallback(async () => {
    await joinRoom<PeerMetadata>({
      peerToken: PEER_TOKEN,
      url: FISHJAM_URL,
      peerMetadata: { displayName: "John Wick" },
    });
  }, [joinRoom]);

  return <button onClick={onJoinRoomPress}>Join room</button>;
}

Updating metadata during connection

Once you've joined the room, you can update your peer metadata with updatePeerMetadata from useUpdatePeerMetadata:

import { useUpdatePeerMetadata } from "@fishjam-cloud/react-client";
import { useCallback } from "react";

type PeerMetadata = {
  displayName: string;
};

export function JoinRoomButton() {
  const { updatePeerMetadata } = useUpdatePeerMetadata<PeerMetadata>();

  const onPressUpdateName = useCallback(async () => {
    await updatePeerMetadata({ displayName: "Thomas A. Anderson" });
  }, [updatePeerMetadata]);

  return <button onClick={onPressUpdateName}>Change name</button>;
}

Reading metadata

Peer metadata is available as the metadata property for each peer. Therefore, when you list your peers with the usePeers hook, you can read the metadata associated with them. Note that the metadata.peer property contains only the metadata set by the client SDK (as in the examples examples above). The metadata set on the server side is available as metadata.server. Learn more about server metadata here.

import { usePeers } from "@fishjam-cloud/react-client";

type PeerMetadata = {
  displayName: string;
};

type ServerMetadata = {
  realName: string;
};

export function ListAllNames() {
  const { remotePeers } = usePeers<PeerMetadata, ServerMetadata>();

  return (
    <div>
      {remotePeers.map((peer) => (
        <span>
          Display name: {peer.metadata?.peer.displayName}
          <br />
          Real name: {peer.metadata?.server.realName}
        </span>
      ))}
    </div>
  );
}