usePeers

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:

NameTypeDescription
peerIds[]Array<string>array of the peerIds
peersObjectobject contains mic,cam properties
errorstringgives 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>
    );
  };
 
Audio/Video Infrastructure designed for the developers to empower them ship simple yet powerful Audio/Video Apps.
support
company
Copyright © 2022 Graphene 01, Inc. All Rights Reserved.