Display media of other peers

To access data and media of other peers, use the usePeers hook. It returns two properties, remotePeers and localPeer. They contain all the tracks of other peers and all the tracks of the local user, respectively.

Example of playing other peers' available media

React (Web)

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

export function Component() {
  const { remotePeers } = usePeers();

  return (
    <ul>
      {remotePeers.map(({ id, cameraTrack, microphoneTrack }) => (
        <li key={id}>
          <VideoRenderer stream={cameraTrack?.stream} /> // remember to import
          your VideoRenderer component
          <AudioPlayer stream={microphoneTrack?.stream} />
        </li>
      ))}
    </ul>
  );
}

React Native (Mobile)

import React from "react";
import { View, Text } from "react-native";
import { usePeers, RTCView } from "@fishjam-cloud/mobile-client";

function VideoPlayer({ stream }: { stream: MediaStream | null }) {
  if (!stream) return <Text>No video</Text>;
  return (
    <RTCView
      mediaStream={stream}
      style={{ height: 200, width: "100%" }}
      objectFit="cover"
    />
  );
}

export function ShowAllPeers() {
  const { remotePeers, localPeer } = usePeers();

  return (
    <View>
      {/* Local camera */}
      {localPeer?.cameraTrack?.stream && ( 
        <VideoPlayer stream={localPeer.cameraTrack.stream} />
      )}

      {/* Remote cameras */}
      {remotePeers.map(
        (
          peer,
        ) => (
          <View key={peer.id}>
            {peer.cameraTrack?.stream && (
              <VideoPlayer stream={peer.cameraTrack.stream} />
            )}
          </View>
        ),
      )}
    </View>
  );
}

Enable Picture in Picture

To allow users to continue watching video in a floating window when they background your app, use the RTCPIPView component. See the Picture in Picture guide for more details.