usePeers – Huddle01's Documentation

usePeers(peerId?:string)

💡

if peerId is passed peerId and peers will be empty arrays

The peerId is the unique identifier for the peer. The mic and cam are the MediaStreamTrack objects for the audio and video streams respectively.

The usePeers hook can be used to access the audio and video streams for the peers and can be used in the following way to render the audio and video streams:

Name	Type	Description
peerIds[]	Array<string>	array of the peerIds
peers	Object	object contains mic,cam properties
error	string	gives the error message

 
//Example Type
 
interface IPeers {
  [peerId: string]: {
    peerId: string;
    role: IRoleEnum;
    mic: MediaStreamTrack | null;
    cam: MediaStreamTrack | null;
    shareVideo: MediaStreamTrack | null;
    shareAudio: MediaStreamTrack | null;
    displayName: string;
    avatarUrl: string;
    walletAddress: string;
  };
}
 
// IRoleEnum: host | coHost | speaker | listener | peer;

Sample Code

Getting access to data related to peers

JSX:

import { usePeers } from '@huddle01/react/hooks';
 
export default function() {
  const peers = usePeers();
  
  return <div>{JSON.stringify(peers)}</div>
}

Output: (Example Output for 1 peer)

[
  {
    peerId: "sdksjdsjd",
    mic: MediaStreamTrack,
    cam: MediaStreamTrack
  }
]

 
  import { usePeers } from '@huddle01/react/hooks';
 
  const App = () => {
    const { peerIds } = usePeers();
 
    return (
      <div>
        <div className="grid grid-cols-4">
          {peerIds.map(peerId => (
              <Video key={peer.peerId} peerId={peer.peerId} debug />
          ))}
 
          {peerIds.map(peerId => (
              <Audio key={peer.peerId} peerId={peer.peerId} debug />
          ))}
        </div>
      </div>
    );
  };

useVideo useRecording