Skip to content

Commit 90d5152

Browse files
authored
Mention TrackMetadata in Metadata docs (#235)
## Description - types.ts: Add JSDoc documentation to TrackMetadata type, describing the purpose of each field (type, paused, displayName) - metadata.mdx: Add "Track metadata" section explaining the TrackMetadata object, its fields, and how to read them via usePeers ## Motivation and Context TrackMetadata was undocumented. Users had no way to know what fields are available on tracks or how to use them (e.g. checking if a camera is enabled). This adds both inline API docs and a documentation page section to cover that gap.
1 parent 99f953c commit 90d5152

1 file changed

Lines changed: 68 additions & 0 deletions

File tree

versioned_docs/version-0.25.0/how-to/client/metadata.mdx

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,3 +209,71 @@ export function ListAllNames() {
209209

210210
</TabItem>
211211
</Tabs>
212+
213+
## Track metadata
214+
215+
Each track published by a peer also carries a `TrackMetadata` object. Unlike peer metadata, track metadata is set internally by the SDK and cannot be modified directly by the user.
216+
217+
It contains the following fields:
218+
219+
- **`type`** — the kind of media the track carries: `camera`, `microphone`, `screenShareVideo`, `screenShareAudio`, `customVideo`, or `customAudio`
220+
- **`paused`** — whether the track is currently muted/disabled
221+
- **`displayName`** — the peer's display name, used in recordings
222+
223+
You can read track metadata via the `metadata` property on a track, for example to check whether a peer's camera is enabled:
224+
225+
<Tabs groupId="platform">
226+
<TabItem value="web" label="React (Web)">
227+
228+
```tsx
229+
import React from "react";
230+
import { usePeers } from "@fishjam-cloud/react-client";
231+
232+
export function CameraStatus() {
233+
const { remotePeers } = usePeers();
234+
235+
return (
236+
<div>
237+
{remotePeers.map((peer) => {
238+
const isCameraEnabled = !peer.cameraTrack?.metadata?.paused;
239+
return (
240+
<span key={peer.id}>
241+
{peer.cameraTrack?.metadata?.displayName ?? "Unknown"}: camera is{" "}
242+
{isCameraEnabled ? "on" : "off"}
243+
</span>
244+
);
245+
})}
246+
</div>
247+
);
248+
}
249+
```
250+
251+
</TabItem>
252+
<TabItem value="mobile" label="React Native (Mobile)">
253+
254+
```tsx
255+
import React from "react";
256+
import { Text, View } from "react-native";
257+
import { usePeers } from "@fishjam-cloud/react-native-client";
258+
259+
export function CameraStatus() {
260+
const { remotePeers } = usePeers();
261+
262+
return (
263+
<View>
264+
{remotePeers.map((peer) => {
265+
const isCameraEnabled = !peer.cameraTrack?.metadata?.paused;
266+
return (
267+
<Text key={peer.id}>
268+
{peer.cameraTrack?.metadata?.displayName ?? "Unknown"}: camera is{" "}
269+
{isCameraEnabled ? "on" : "off"}
270+
</Text>
271+
);
272+
})}
273+
</View>
274+
);
275+
}
276+
```
277+
278+
</TabItem>
279+
</Tabs>

0 commit comments

Comments
 (0)