Group tracks into streams

packages/ts-client/src/FishjamClient.ts

@@ -99,6 +99,10 @@ export class FishjamClient<PeerMetadata = GenericMetadata, ServerMetadata = Gene
 
   private sendStatisticsInterval: NodeJS.Timeout | undefined = undefined;
 
+  private cameraStream = new MediaStream();
+  private screenShareStream = new MediaStream();
+  private trackIdToTrack: Map<string, [MediaStreamTrack | null, MediaStream]> = new Map();
+
   constructor(config?: CreateConfig) {
     super();
 
@@ -407,12 +411,24 @@ export class FishjamClient<PeerMetadata = GenericMetadata, ServerMetadata = Gene
       this.emit('targetTrackEncodingRequested', event);
     });
     this.webrtc?.on('localTrackAdded', (event) => {
+      this.trackIdToTrack.set(event.trackId, [event.track, event.stream]);
       this.emit('localTrackAdded', event);
     });
     this.webrtc?.on('localTrackRemoved', (event) => {
+      const [track, stream] = this.trackIdToTrack.get(event.trackId)!;
+
+      if (track) stream.removeTrack(track);
+
+      this.trackIdToTrack.delete(event.trackId);
       this.emit('localTrackRemoved', event);
     });
     this.webrtc?.on('localTrackReplaced', (event) => {
+      const [oldTrack, stream] = this.trackIdToTrack.get(event.trackId)!;
+
+      if (oldTrack) stream.removeTrack(oldTrack);
+      if (event.track) stream.addTrack(event.track);
+
+      this.trackIdToTrack.set(event.trackId, [event.track, stream]);
       this.emit('localTrackReplaced', event);
     });
     this.webrtc?.on('localTrackBandwidthSet', (event) => {
@@ -571,7 +587,20 @@ export class FishjamClient<PeerMetadata = GenericMetadata, ServerMetadata = Gene
     if (!this.webrtc) throw this.handleWebRTCNotInitialized();
     if (this.isAudioOnlyConnection && track.kind !== 'audio') throw new TrackTypeError();
 
-    return this.webrtc.addTrack(track, trackMetadata, simulcastConfig, maxBandwidth);
+    let stream: MediaStream | undefined;
+
+    switch (trackMetadata?.type) {
+      case 'camera':
+      case 'microphone':
+        stream = this.cameraStream;
+        break;
+      case 'screenShareVideo':
+      case 'screenShareAudio':
+        stream = this.screenShareStream;
+    }
+
+    stream?.addTrack(track);
+    return this.webrtc.addTrack(track, trackMetadata, simulcastConfig, maxBandwidth, stream);
   }
 
   /**
@@ -942,6 +971,9 @@ export class FishjamClient<PeerMetadata = GenericMetadata, ServerMetadata = Gene
     }
     this.websocket = null;
     this.webrtc = null;
+    this.cameraStream = new MediaStream();
+    this.screenShareStream = new MediaStream();
+    this.trackIdToTrack.clear();
     this.emit('disconnected');
   }
 

packages/webrtc-client/src/tracks/LocalTrack.ts

@@ -129,9 +129,9 @@ export class LocalTrack implements TrackCommon {
 
     if (!this.sender) throw Error('There is no RTCRtpSender for this track id!');
 
-    stream?.getTracks().forEach((track) => {
-      stream?.removeTrack(track);
-    });
+    if (oldTrack) {
+      stream?.removeTrack(oldTrack);
+    }
 
     if (newTrack) {
       stream?.addTrack(newTrack);

packages/webrtc-client/src/webRTCEndpoint.ts

@@ -400,10 +400,11 @@ export class WebRTCEndpoint extends (EventEmitter as new () => TypedEmitter<Requ
       disabledVariants: [],
     },
     _maxBandwidth: TrackBandwidthLimit = 0,
+    stream?: MediaStream,
   ): Promise<string> {
     const resolutionNotifier = new Deferred<void>();
     const trackId = this.getTrackId(uuidv4());
-    const stream = new MediaStream();
+    const trackStream = stream ?? new MediaStream();
 
     // TODO: Simulcast is disabled manually, enable it once bandwidth estimation is implemented or we add manual track selection support.
     const simulcastConfig: MediaEvent_Track_SimulcastConfig = {
@@ -416,11 +417,18 @@ export class WebRTCEndpoint extends (EventEmitter as new () => TypedEmitter<Requ
       typeof _maxBandwidth === 'number' && _maxBandwidth > 0 ? _maxBandwidth : 0;
 
     try {
-      stream.addTrack(track);
+      if (!stream) trackStream.addTrack(track);
 
       this.commandsQueue.pushCommand({
         handler: async () =>
-          this.localTrackManager.addTrackHandler(trackId, track, stream, trackMetadata, simulcastConfig, maxBandwidth),
+          this.localTrackManager.addTrackHandler(
+            trackId,
+            track,
+            trackStream,
+            trackMetadata,
+            simulcastConfig,
+            maxBandwidth,
+          ),
         parse: () => this.localTrackManager.parseAddTrack(track, simulcastConfig, maxBandwidth),
         resolve: 'after-renegotiation',
         resolutionNotifier,
@@ -433,7 +441,7 @@ export class WebRTCEndpoint extends (EventEmitter as new () => TypedEmitter<Requ
     this.emit('localTrackAdded', {
       trackId,
       track,
-      stream,
+      stream: trackStream,
       trackMetadata,
       simulcastConfig,
       maxBandwidth,