@livedigital/client 2.26.0 → 2.27.0

package/dist/types/common.d.ts

@@ -304,6 +304,10 @@ export declare type UpdatePeerAppDataPayload = {
     peerId: string;
     appData: Record<string, unknown>;
 };
+export declare type CreateTracksPayload = {
+    mediaStreamTracks: MediaStreamTrack[];
+    constraints: MediaStreamConstraints;
+};
 export declare type TrackPublishParams = {
     keyFrameRequestDelay?: number;
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@livedigital/client",
   "author": "vlprojects",
   "license": "MIT",
-  "version": "2.26.0",
+  "version": "2.27.0",
   "private": false,
   "bugs": {
     "url": "https://github.com/vlprojects/livedigital-sdk/issues"
@@ -48,7 +48,7 @@
     "qs": "^6.9.6",
     "serialize-error": "^7.0.1",
     "socket.io-client": "^4.3.0",
-    "webrtc-issue-detector": "^1.3.0"
+    "webrtc-issue-detector": "^1.3.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^19.0.0",

package/src/engine/index.ts

@@ -457,20 +457,7 @@ class Engine {
 
   private watchClientEvents(): void {
     this.clientEventEmitter.on(INTERNAL_CLIENT_EVENTS.trackProduced, (track: Track) => {
-      const myPeer = this.peersRepository.get(<string> this.mySocketId);
-      if (!myPeer) {
-        return;
-      }
-
-      const peerTrack = new PeerTrack({
-        mediaStreamTrack: track.mediaStreamTrack,
-        label: track.getLabel(),
-        engine: this,
-        isPaused: track.isPaused,
-        peerEventEmitter: myPeer.observer,
-      });
-
-      myPeer.tracks.set(peerTrack.label, peerTrack);
+      this.createSelfPeerTrack(track);
     });
 
     this.clientEventEmitter.on(INTERNAL_CLIENT_EVENTS.trackUnproduced, (track: Track) => {
@@ -481,14 +468,30 @@ class Engine {
 
     this.clientEventEmitter.on(INTERNAL_CLIENT_EVENTS.trackPaused, (track: Track) => {
       const peerTrack = this.myPeer?.tracks.get(track.getLabel());
-      peerTrack?.pause();
+      peerTrack?.close();
     });
 
     this.clientEventEmitter.on(INTERNAL_CLIENT_EVENTS.trackResumed, (track: Track) => {
-      const peerTrack = this.myPeer?.tracks.get(track.getLabel());
-      peerTrack?.resume();
+      this.createSelfPeerTrack(track);
     });
   }
+
+  private createSelfPeerTrack(track: Track): void {
+    const myPeer = this.peersRepository.get(<string> this.mySocketId);
+    if (!myPeer) {
+      return;
+    }
+
+    const peerTrack = new PeerTrack({
+      mediaStreamTrack: track.mediaStreamTrack,
+      label: track.getLabel(),
+      engine: this,
+      isPaused: track.isPaused,
+      peerEventEmitter: myPeer.observer,
+    });
+
+    myPeer.tracks.set(peerTrack.label, peerTrack);
+  }
 }
 
 export default Engine;

package/src/engine/media/index.ts

@@ -3,7 +3,11 @@ import { RtpCapabilities, RtpCodecCapability } from 'mediasoup-client/lib/RtpPar
 import VideoTrack from './tracks/VideoTrack';
 import AudioTrack from './tracks/AudioTrack';
 import {
-  CreateScreenVideoTrackOptions, CreateVideoTrackParams, LogLevel, Track,
+  CreateScreenVideoTrackOptions,
+  CreateTracksPayload,
+  CreateVideoTrackParams,
+  LogLevel,
+  Track,
 } from '../../types/common';
 import Logger from '../Logger';
 import { VIDEO_CONSTRAINS } from '../../constants/videoConstrains';
@@ -11,6 +15,7 @@ import { SCREEN_SHARING_SIMULCAST_ENCODINGS, WEBCAM_SIMULCAST_ENCODINGS } from '
 import { CreateMediaParams } from '../../types/engine';
 import Engine from '../index';
 import EnhancedEventEmitter from '../../EnhancedEventEmitter';
+import MediaStreamTrackManager from './tracks/MediaStreamTrackManager';
 
 class Media {
   public isDeviceLoaded = false;
@@ -27,6 +32,8 @@ class Media {
 
   readonly #clientEventEmitter: EnhancedEventEmitter;
 
+  readonly #mediaStreamTrackManager: MediaStreamTrackManager;
+
   constructor(params: CreateMediaParams) {
     this.#logLevel = params.logLevel;
     this.#logger = new Logger({
@@ -35,6 +42,7 @@ class Media {
     });
     this.#engine = params.engine;
     this.#clientEventEmitter = params.clientEventEmitter;
+    this.#mediaStreamTrackManager = new MediaStreamTrackManager(params.logLevel);
   }
 
   get mediasoupDevice(): Device {
@@ -62,20 +70,20 @@ class Media {
     return codecs.find((c) => c.mimeType.toLowerCase() === `${track.kind}/${track.getPreferredCodec()}`);
   }
 
-  private createTracks(stream: MediaStream): Track[] {
-    const mediaStreamTracks = stream.getTracks();
+  private createTracks({ constraints, mediaStreamTracks }: CreateTracksPayload): Track[] {
     return mediaStreamTracks.map((mediaStreamTrack) => {
       const params = {
         mediaStreamTrack,
         logLevel: this.#logLevel,
         engine: this.#engine,
         clientEventEmitter: this.#clientEventEmitter,
+        constraints,
+        mediaStreamTrackManager: this.#mediaStreamTrackManager,
       };
 
       const track = mediaStreamTrack.kind === 'audio' ? new AudioTrack(params) : new VideoTrack(params);
       this.tracks.set(track.id, track);
       this.#logger.debug('createTrack() track created', {
-        streamId: stream.id,
         trackId: track.id,
         kind: track.kind,
       });
@@ -85,14 +93,13 @@ class Media {
   }
 
   async createUserMediaTracks(constraints: MediaStreamConstraints): Promise<Track[]> {
-    const stream = await navigator.mediaDevices.getUserMedia(constraints);
-    this.#logger.debug('createUserMediaTrack() stream created', { streamId: stream.id });
-    return this.createTracks(stream);
+    const mediaStreamTracks = await this.#mediaStreamTrackManager.createUserMediaTracks(constraints);
+    return this.createTracks({ constraints, mediaStreamTracks });
   }
 
   async createDisplayMediaTracks(constraints: MediaStreamConstraints): Promise<Track[]> {
-    const stream = await navigator.mediaDevices.getDisplayMedia(constraints);
-    return this.createTracks(stream);
+    const mediaStreamTracks = await this.#mediaStreamTrackManager.createDisplayMediaTracks(constraints);
+    return this.createTracks({ constraints, mediaStreamTracks });
   }
 
   deleteTrack(track: Track) {

package/src/engine/media/tracks/BaseTrack.ts

@@ -5,27 +5,30 @@ import {
   EncoderConfig,
   LogLevel,
   SocketResponse,
-  TrackLabel, TrackOutboundStats,
+  TrackLabel,
+  TrackOutboundStats,
   TrackProduceParams,
 } from '../../../types/common';
 import Logger from '../../Logger';
 import Engine from '../../index';
 import PeerConsumer from '../../PeerConsumer';
 import { PRODUCER_CHECK_STATE_TIMEOUT } from '../../../constants/common';
-import Timeout = NodeJS.Timeout;
-import { MEDIASOUP_EVENTS, INTERNAL_CLIENT_EVENTS, CLIENT_EVENTS } from '../../../constants/events';
+import { CLIENT_EVENTS, INTERNAL_CLIENT_EVENTS, MEDIASOUP_EVENTS } from '../../../constants/events';
 import EnhancedEventEmitter from '../../../EnhancedEventEmitter';
 import filterStatsCodecs from '../../../helpers/filterStatsCodecs';
+import MediaStreamTrackManager from './MediaStreamTrackManager';
 
 export type BaseTrackConstructorParams = {
   mediaStreamTrack: MediaStreamTrack,
   logLevel: LogLevel,
   engine: Engine,
   clientEventEmitter: EnhancedEventEmitter,
+  constraints: MediaStreamConstraints;
+  mediaStreamTrackManager: MediaStreamTrackManager;
 };
 
 class BaseTrack {
-  readonly #mediaStreamTrack: MediaStreamTrack;
+  #mediaStreamTrack: MediaStreamTrack;
 
   protected encoderConfig: EncoderConfig = {};
 
@@ -39,7 +42,7 @@ class BaseTrack {
 
   #selfConsumer?: PeerConsumer;
 
-  #checkStateTimeout?: Timeout;
+  #checkStateTimeout?: NodeJS.Timeout;
 
   #producerRestarted = false;
 
@@ -47,13 +50,19 @@ class BaseTrack {
 
   #closed = false;
 
+  readonly #constraints: MediaStreamConstraints;
+
+  readonly #mediaStreamTrackManager: MediaStreamTrackManager;
+
   constructor(params: BaseTrackConstructorParams) {
     const {
-      mediaStreamTrack, logLevel, engine, clientEventEmitter,
+      mediaStreamTrack, logLevel, engine, clientEventEmitter, constraints, mediaStreamTrackManager,
     } = params;
     this.#mediaStreamTrack = mediaStreamTrack;
     this.#engine = engine;
     this.#clientEventEmitter = clientEventEmitter;
+    this.#constraints = constraints;
+    this.#mediaStreamTrackManager = mediaStreamTrackManager;
     this.logger = new Logger({
       namespace: 'Track',
       logLevel,
@@ -366,6 +375,7 @@ class BaseTrack {
       await this.cancelProducerCheckState();
       await this.pauseRemoteProducer(this.producer.id);
       this.producer.pause();
+      this.#mediaStreamTrack.stop();
       this.clientEventEmitter.emit(INTERNAL_CLIENT_EVENTS.trackPaused, this);
       this.logger.debug('pause()', { track: this });
     } catch (error) {
@@ -381,6 +391,12 @@ class BaseTrack {
     }
 
     try {
+      const track = await this.#mediaStreamTrackManager.createMediaStreamTrack({
+        label: this.label,
+        constraints: this.#constraints,
+      });
+      this.#mediaStreamTrack = track;
+      await this.producer.replaceTrack({ track });
       await this.resumeRemoteProducer(this.producer.id);
       this.producer.resume();
       this.clientEventEmitter.emit(INTERNAL_CLIENT_EVENTS.trackResumed, this);

package/src/engine/media/tracks/MediaStreamTrackManager.ts

@@ -0,0 +1,46 @@
+import { LogLevel, TrackLabel } from '../../../types/common';
+import Logger from '../../Logger';
+
+export type GetMediaStreamTrackParams = {
+  label: TrackLabel;
+  constraints: MediaStreamConstraints;
+};
+
+class MediaStreamTrackManager {
+  readonly #logger: Logger;
+
+  constructor(logLevel: LogLevel) {
+    this.#logger = new Logger({
+      namespace: 'MediaStreamTrackManager',
+      logLevel,
+    });
+  }
+
+  async createMediaStreamTrack({ label, constraints }: GetMediaStreamTrackParams): Promise<MediaStreamTrack> {
+    if (MediaStreamTrackManager.isDisplayMedia(label)) {
+      const [track] = await this.createDisplayMediaTracks(constraints);
+      return track;
+    }
+
+    const [track] = await this.createUserMediaTracks(constraints);
+    return track;
+  }
+
+  private static isDisplayMedia(label: TrackLabel): boolean {
+    return [TrackLabel.ScreenVideo, TrackLabel.ScreenAudio].includes(label);
+  }
+
+  async createUserMediaTracks(constraints: MediaStreamConstraints): Promise<MediaStreamTrack[]> {
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    this.#logger.debug('createUserMediaTracks() stream created', { streamId: stream.id });
+    return stream.getTracks();
+  }
+
+  async createDisplayMediaTracks(constraints: MediaStreamConstraints): Promise<MediaStreamTrack[]> {
+    const stream = await navigator.mediaDevices.getDisplayMedia(constraints);
+    this.#logger.debug('getDisplayMediaTracks() stream created', { streamId: stream.id });
+    return stream.getTracks();
+  }
+}
+
+export default MediaStreamTrackManager;

package/src/types/common.ts

@@ -350,6 +350,11 @@ export type UpdatePeerAppDataPayload = {
   appData: Record<string, unknown>,
 };
 
+export type CreateTracksPayload = {
+  mediaStreamTracks: MediaStreamTrack[],
+  constraints: MediaStreamConstraints,
+};
+
 export type TrackPublishParams = {
   keyFrameRequestDelay?: number;
 };