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>
);
};