= ({
)}
+ {callParticipants.length > 0 && (
+
+ )}
{
confineToRoom={confineToRoom}
hideHeader={header !== "standard"}
participantCount={null}
+ callParticipants={[]}
muteStates={muteStates}
onShareClick={null}
/>
diff --git a/src/room/useCallParticipants.test.ts b/src/room/useCallParticipants.test.ts
new file mode 100644
index 0000000000..dff0cb4298
--- /dev/null
+++ b/src/room/useCallParticipants.test.ts
@@ -0,0 +1,123 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { type Room } from "matrix-js-sdk";
+
+import { useCallParticipants } from "./useCallParticipants";
+import { mockRtcMembership } from "../utils/test";
+
+function mockRoom(
+ members: Record,
+): Room {
+ return {
+ getMember: (userId: string) => {
+ const m = members[userId];
+ if (!m) return null;
+ return {
+ userId,
+ rawDisplayName: m.displayName,
+ name: m.displayName,
+ getMxcAvatarUrl: () => m.avatarUrl ?? null,
+ };
+ },
+ } as unknown as Room;
+}
+
+describe("useCallParticipants", () => {
+ test("returns empty array when no memberships", () => {
+ const room = mockRoom({});
+ const { result } = renderHook(() => useCallParticipants([], room));
+ expect(result.current).toEqual([]);
+ });
+
+ test("returns participants with resolved profile data", () => {
+ const room = mockRoom({
+ "@alice:example.org": {
+ displayName: "Alice",
+ avatarUrl: "mxc://example.org/alice-avatar",
+ },
+ "@bob:example.org": {
+ displayName: "Bob",
+ avatarUrl: "mxc://example.org/bob-avatar",
+ },
+ });
+ const memberships = [
+ mockRtcMembership("@alice:example.org", "AAAA"),
+ mockRtcMembership("@bob:example.org", "BBBB"),
+ ];
+
+ const { result } = renderHook(() =>
+ useCallParticipants(memberships, room),
+ );
+
+ expect(result.current).toEqual([
+ {
+ userId: "@alice:example.org",
+ displayName: "Alice",
+ avatarUrl: "mxc://example.org/alice-avatar",
+ },
+ {
+ userId: "@bob:example.org",
+ displayName: "Bob",
+ avatarUrl: "mxc://example.org/bob-avatar",
+ },
+ ]);
+ });
+
+ test("deduplicates by userId when multiple devices", () => {
+ const room = mockRoom({
+ "@alice:example.org": { displayName: "Alice" },
+ });
+ const memberships = [
+ mockRtcMembership("@alice:example.org", "DEVICE1"),
+ mockRtcMembership("@alice:example.org", "DEVICE2"),
+ ];
+
+ const { result } = renderHook(() =>
+ useCallParticipants(memberships, room),
+ );
+
+ expect(result.current).toHaveLength(1);
+ expect(result.current[0].userId).toBe("@alice:example.org");
+ });
+
+ test("falls back to userId when member not found in room", () => {
+ const room = mockRoom({});
+ const memberships = [
+ mockRtcMembership("@unknown:example.org", "XXXX"),
+ ];
+
+ const { result } = renderHook(() =>
+ useCallParticipants(memberships, room),
+ );
+
+ expect(result.current).toEqual([
+ {
+ userId: "@unknown:example.org",
+ displayName: "@unknown:example.org",
+ avatarUrl: null,
+ },
+ ]);
+ });
+
+ test("handles null avatar URL", () => {
+ const room = mockRoom({
+ "@alice:example.org": { displayName: "Alice" },
+ });
+ const memberships = [
+ mockRtcMembership("@alice:example.org", "AAAA"),
+ ];
+
+ const { result } = renderHook(() =>
+ useCallParticipants(memberships, room),
+ );
+
+ expect(result.current[0].avatarUrl).toBeNull();
+ });
+});
diff --git a/src/room/useCallParticipants.ts b/src/room/useCallParticipants.ts
new file mode 100644
index 0000000000..8d182b4497
--- /dev/null
+++ b/src/room/useCallParticipants.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useMemo } from "react";
+import { type Room } from "matrix-js-sdk";
+import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
+
+export interface CallParticipant {
+ userId: string;
+ displayName: string;
+ avatarUrl: string | null;
+}
+
+/**
+ * Derives a deduplicated list of active call participants with their
+ * profile information (display name + avatar MXC URL) from the room
+ * member data.
+ *
+ * @param memberships - The current call memberships from MatrixRTCSession
+ * @param room - The Matrix room, used to resolve member profiles
+ * @returns Array of unique participants with resolved profile data
+ */
+export function useCallParticipants(
+ memberships: CallMembership[],
+ room: Room,
+): CallParticipant[] {
+ return useMemo(() => {
+ const seen = new Set();
+ const participants: CallParticipant[] = [];
+
+ for (const membership of memberships) {
+ const userId = membership.userId;
+ if (!userId || seen.has(userId)) continue;
+ seen.add(userId);
+
+ const member = room.getMember(userId);
+ participants.push({
+ userId,
+ displayName: member?.rawDisplayName ?? member?.name ?? userId,
+ avatarUrl: member?.getMxcAvatarUrl() ?? null,
+ });
+ }
+
+ return participants;
+ }, [memberships, room]);
+}