Merge pull request #186 from whereby/nandor/cob-617-make-screenshare-…

…captions-work core: use getTrack().some() to tell if screenshare has audio and use fallback id
whereby · Apr 11, 2024 · 78befe1 · 78befe1
2 parents 8a28f79 + 8f6987d
commit 78befe1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/.changeset/fresh-steaks-arrive.md b/.changeset/fresh-steaks-arrive.md
@@ -0,0 +1,5 @@
+---
+"@whereby.com/core": patch
+---
+
+Use MediaStream.getTracks() to tell if a screenshare has audio enabled or not. `.getAudioTracks()` is not implemented in some WebRTC implementations.
diff --git a/.changeset/small-trains-tan.md b/.changeset/small-trains-tan.md
@@ -0,0 +1,5 @@
+---
+"@whereby.com/core": patch
+---
+
+Use `pres-` prefixed clientId as screenshare id for remote participants and "local-screenshare" for local screenshares as a fallback, if the MediaStream has no `id`.
diff --git a/packages/core/src/redux/slices/__tests__/remoteParticipants.unit.ts b/packages/core/src/redux/slices/__tests__/remoteParticipants.unit.ts
@@ -279,9 +279,9 @@ describe("remoteParticipantsSlice", () => {
             it.each`
                 localScreenshareStream    | remoteParticipants    | expected
                 ${null}                   | ${[]}                 | ${[]}
-                ${null}                   | ${[client1, client2]} | ${[{ id: "", hasAudioTrack: false, isLocal: false, participantId: client2.id, stream: client2.presentationStream }]}
-                ${localScreenshareStream} | ${[]}                 | ${[{ id: "", hasAudioTrack: false, isLocal: true, participantId: "local", stream: localScreenshareStream }]}
-                ${localScreenshareStream} | ${[client3]}          | ${[{ id: "", hasAudioTrack: false, isLocal: true, participantId: "local", stream: localScreenshareStream }, { id: "", hasAudioTrack: false, isLocal: false, participantId: client3.id, stream: client3.presentationStream }]}
+                ${null}                   | ${[client1, client2]} | ${[{ id: `pres-${client2.id}`, hasAudioTrack: false, isLocal: false, participantId: client2.id, stream: client2.presentationStream }]}
+                ${localScreenshareStream} | ${[]}                 | ${[{ id: "local-screenshare", hasAudioTrack: false, isLocal: true, participantId: "local", stream: localScreenshareStream }]}
+                ${localScreenshareStream} | ${[client3]}          | ${[{ id: "local-screenshare", hasAudioTrack: false, isLocal: true, participantId: "local", stream: localScreenshareStream }, { id: `pres-${client3.id}`, hasAudioTrack: false, isLocal: false, participantId: client3.id, stream: client3.presentationStream }]}
             `(
                 "should return $expected when localScreenshareStream=$localScreenshareStream, remoteParticipants=$remoteParticipants",
                 ({ localScreenshareStream, remoteParticipants, expected }) => {

diff --git a/packages/core/src/redux/slices/remoteParticipants.ts b/packages/core/src/redux/slices/remoteParticipants.ts
@@ -297,9 +297,9 @@ export const selectScreenshares = createSelector(
 
         if (localScreenshareStream) {
             screenshares.push({
-                id: localScreenshareStream.id,
+                id: localScreenshareStream.id || "local-screenshare",
                 participantId: "local",
-                hasAudioTrack: localScreenshareStream.getAudioTracks().length > 0,
+                hasAudioTrack: localScreenshareStream.getTracks().some((track) => track.kind === "audio"),
                 stream: localScreenshareStream,
                 isLocal: true,
             });
@@ -308,9 +308,9 @@ export const selectScreenshares = createSelector(
         for (const participant of remoteParticipants) {
             if (participant.presentationStream) {
                 screenshares.push({
-                    id: participant.presentationStream.id,
+                    id: participant.presentationStream.id || `pres-${participant.id}`,
                     participantId: participant.id,
-                    hasAudioTrack: participant.presentationStream.getAudioTracks().length > 0,
+                    hasAudioTrack: participant.presentationStream.getTracks().some((track) => track.kind === "audio"),
                     stream: participant.presentationStream,
                     isLocal: false,
                 });