@stream-io/video-client 1.21.0 → 1.22.0

package/src/devices/devices.ts

@@ -12,6 +12,7 @@ import { getLogger } from '../logger';
 import { BrowserPermission } from './BrowserPermission';
 import { lazy } from '../helpers/lazy';
 import { isFirefox } from '../helpers/browsers';
+import { dumpStream, Tracer } from '../stats';
 
 /**
  * Returns an Observable that emits the list of available devices
@@ -158,15 +159,27 @@ export const getAudioOutputDevices = lazy(() => {
   );
 });
 
-const getStream = async (constraints: MediaStreamConstraints) => {
-  const stream = await navigator.mediaDevices.getUserMedia(constraints);
-  if (isFirefox()) {
-    // When enumerating devices, Firefox will hide device labels unless there's been
-    // an active user media stream on the page. So we force device list updates after
-    // every successful getUserMedia call.
-    navigator.mediaDevices.dispatchEvent(new Event('devicechange'));
+let getUserMediaExecId = 0;
+const getStream = async (
+  constraints: MediaStreamConstraints,
+  tracer: Tracer | undefined,
+) => {
+  const tag = `navigator.mediaDevices.getUserMedia.${getUserMediaExecId++}.`;
+  try {
+    tracer?.trace(tag, constraints);
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    tracer?.trace(`${tag}OnSuccess`, dumpStream(stream));
+    if (isFirefox()) {
+      // When enumerating devices, Firefox will hide device labels unless there's been
+      // an active user media stream on the page. So we force device list updates after
+      // every successful getUserMedia call.
+      navigator.mediaDevices.dispatchEvent(new Event('devicechange'));
+    }
+    return stream;
+  } catch (error) {
+    tracer?.trace(`${tag}OnFailure`, (error as Error).name);
+    throw error;
   }
-  return stream;
 };
 
 function isNotFoundOrOverconstrainedError(error: unknown) {
@@ -195,12 +208,13 @@ function isNotFoundOrOverconstrainedError(error: unknown) {
  * Returns an audio media stream that fulfills the given constraints.
  * If no constraints are provided, it uses the browser's default ones.
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
  * @param trackConstraints the constraints to use when requesting the stream.
- * @returns the new `MediaStream` fulfilling the given constraints.
+ * @param tracer the tracer to use for tracing the stream creation.
+ * @returns a new `MediaStream` fulfilling the given constraints.
  */
 export const getAudioStream = async (
   trackConstraints?: MediaTrackConstraints,
+  tracer?: Tracer,
 ): Promise<MediaStream> => {
   const constraints: MediaStreamConstraints = {
     audio: {
@@ -214,7 +228,7 @@ export const getAudioStream = async (
       throwOnNotAllowed: true,
       forcePrompt: true,
     });
-    return await getStream(constraints);
+    return await getStream(constraints, tracer);
   } catch (error) {
     if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -239,12 +253,13 @@ export const getAudioStream = async (
  * Returns a video media stream that fulfills the given constraints.
  * If no constraints are provided, it uses the browser's default ones.
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
  * @param trackConstraints the constraints to use when requesting the stream.
+ * @param tracer the tracer to use for tracing the stream creation.
  * @returns a new `MediaStream` fulfilling the given constraints.
  */
 export const getVideoStream = async (
   trackConstraints?: MediaTrackConstraints,
+  tracer?: Tracer,
 ): Promise<MediaStream> => {
   const constraints: MediaStreamConstraints = {
     video: {
@@ -257,7 +272,7 @@ export const getVideoStream = async (
       throwOnNotAllowed: true,
       forcePrompt: true,
     });
-    return await getStream(constraints);
+    return await getStream(constraints, tracer);
   } catch (error) {
     if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -278,21 +293,25 @@ export const getVideoStream = async (
   }
 };
 
+let getDisplayMediaExecId = 0;
+
 /**
  * Prompts the user for a permission to share a screen.
  * If the user grants the permission, a screen sharing stream is returned. Throws otherwise.
  *
  * The callers of this API are responsible to handle the possible errors.
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- *
  * @param options any additional options to pass to the [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API.
+ * @param tracer the tracer to use for tracing the stream creation.
  */
 export const getScreenShareStream = async (
   options?: DisplayMediaStreamOptions,
+  tracer?: Tracer | undefined,
 ) => {
+  const tag = `navigator.mediaDevices.getDisplayMedia.${getDisplayMediaExecId++}.`;
   try {
-    return await navigator.mediaDevices.getDisplayMedia({
+    tracer?.trace(tag, options);
+    const stream = await navigator.mediaDevices.getDisplayMedia({
       video: true,
       audio: {
         channelCount: {
@@ -306,7 +325,10 @@ export const getScreenShareStream = async (
       systemAudio: 'include',
       ...options,
     });
+    tracer?.trace(`${tag}OnSuccess`, dumpStream(stream));
+    return stream;
   } catch (e) {
+    tracer?.trace(`${tag}OnFailure`, (e as Error).name);
     getLogger(['devices'])('error', 'Failed to get screen share stream', e);
     throw e;
   }

package/src/events/__tests__/call.test.ts

@@ -10,6 +10,7 @@ import {
   CallAcceptedEvent,
   CallEndedEvent,
   CallResponse,
+  OwnCapability,
   RejectCallResponse,
 } from '../../gen/coordinator';
 import { Call } from '../../Call';
@@ -295,6 +296,28 @@ describe('Call ringing events', () => {
 
       expect(call.leave).not.toHaveBeenCalled();
     });
+
+    it('will stay in backstage if live ended and has permission', async () => {
+      const call = fakeCall();
+      call.state.setBackstage(false);
+      call.permissionsContext.setPermissions([OwnCapability.JOIN_BACKSTAGE]);
+      vi.spyOn(call, 'leave').mockImplementation(async () => {
+        console.log(`TEST: leave() called`);
+      });
+
+      watchSfuCallEnded(call);
+      const event: SfuEvent = {
+        eventPayload: {
+          oneofKind: 'callEnded',
+          callEnded: { reason: CallEndedReason.LIVE_ENDED },
+        },
+      };
+      // @ts-expect-error type issue
+      call['dispatcher'].dispatch(event);
+
+      expect(call.leave).not.toHaveBeenCalled();
+      expect(call.state.backstage).toBe(true);
+    });
   });
 
   describe('call.leave', () => {

package/src/events/call.ts

@@ -1,6 +1,10 @@
 import { CallingState } from '../store';
 import { Call } from '../Call';
-import type { CallAcceptedEvent, CallRejectedEvent } from '../gen/coordinator';
+import {
+  CallAcceptedEvent,
+  CallRejectedEvent,
+  OwnCapability,
+} from '../gen/coordinator';
 import { CallEnded } from '../gen/video/sfu/event/events';
 import { CallEndedReason } from '../gen/video/sfu/models/models';
 
@@ -99,6 +103,13 @@ export const watchSfuCallEnded = (call: Call) => {
   return call.on('callEnded', async (e: CallEnded) => {
     if (call.state.callingState === CallingState.LEFT) return;
     try {
+      if (e.reason === CallEndedReason.LIVE_ENDED) {
+        call.state.setBackstage(true);
+
+        // don't leave the call if the user has permission to join backstage
+        const { hasPermission } = call.permissionsContext;
+        if (hasPermission(OwnCapability.JOIN_BACKSTAGE)) return;
+      }
       // `call.ended` event arrived after the call is already left
       // and all event handlers are detached. We need to manually
       // update the call state to reflect the call has ended.

package/src/rtc/BasePeerConnection.ts

@@ -43,6 +43,7 @@ export abstract class BasePeerConnection {
   readonly stats: StatsTracer;
   private readonly subscriptions: (() => void)[] = [];
   private unsubscribeIceTrickle?: () => void;
+  protected readonly lock = Math.random().toString(36).slice(2);
 
   /**
    * Constructs a new `BasePeerConnection` instance.
@@ -83,9 +84,12 @@ export abstract class BasePeerConnection {
     );
     this.stats = new StatsTracer(this.pc, peerType, this.trackIdToTrackType);
     if (enableTracing) {
-      const tag = `${logTag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}-${sfuClient.edgeName}`;
+      const tag = `${logTag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}`;
       this.tracer = new Tracer(tag);
-      this.tracer.trace('create', connectionConfig);
+      this.tracer.trace('create', {
+        url: sfuClient.edgeName,
+        ...connectionConfig,
+      });
       traceRTCPeerConnection(this.pc, this.tracer.trace);
     }
   }
@@ -135,7 +139,8 @@ export abstract class BasePeerConnection {
   ): void => {
     this.subscriptions.push(
       this.dispatcher.on(event, (e) => {
-        withoutConcurrency(`pc.${event}`, async () => fn(e)).catch((err) => {
+        const lockKey = `pc.${this.lock}.${event}`;
+        withoutConcurrency(lockKey, async () => fn(e)).catch((err) => {
           if (this.isDisposed) return;
           this.logger('warn', `Error handling ${event}`, err);
         });

package/src/rtc/Publisher.ts

@@ -323,7 +323,7 @@ export class Publisher extends BasePeerConnection {
    * @param options the optional offer options to use.
    */
   private negotiate = async (options?: RTCOfferOptions): Promise<void> => {
-    return withoutConcurrency('publisher.negotiate', async () => {
+    return withoutConcurrency(`publisher.negotiate.${this.lock}`, async () => {
       const offer = await this.pc.createOffer(options);
       const tracks = this.getAnnouncedTracks(offer.sdp);
       if (!tracks.length) throw new Error(`Can't negotiate without any tracks`);

package/src/stats/SfuStatsReporter.ts

@@ -3,7 +3,7 @@ import { StreamSfuClient } from '../StreamSfuClient';
 import { OwnCapability, StatsOptions } from '../gen/coordinator';
 import { getLogger } from '../logger';
 import { Publisher, Subscriber } from '../rtc';
-import { tracer as mediaStatsTracer } from './rtc/mediaDevices';
+import { Tracer, TraceRecord } from './rtc';
 import { flatten, getSdkName, getSdkVersion } from './utils';
 import { getDeviceState, getWebRTCInfo } from '../helpers/client-details';
 import {
@@ -24,6 +24,7 @@ export type SfuStatsReporterOptions = {
   microphone: MicrophoneManager;
   camera: CameraManager;
   state: CallState;
+  tracer: Tracer;
   unifiedSessionId: string;
 };
 
@@ -38,6 +39,7 @@ export class SfuStatsReporter {
   private readonly microphone: MicrophoneManager;
   private readonly camera: CameraManager;
   private readonly state: CallState;
+  private readonly tracer: Tracer;
   private readonly unifiedSessionId: string;
 
   private intervalId: NodeJS.Timeout | undefined;
@@ -59,6 +61,7 @@ export class SfuStatsReporter {
       microphone,
       camera,
       state,
+      tracer,
       unifiedSessionId,
     }: SfuStatsReporterOptions,
   ) {
@@ -69,6 +72,7 @@ export class SfuStatsReporter {
     this.microphone = microphone;
     this.camera = camera;
     this.state = state;
+    this.tracer = tracer;
     this.unifiedSessionId = unifiedSessionId;
 
     const { sdk, browser } = clientDetails;
@@ -166,10 +170,10 @@ export class SfuStatsReporter {
 
     const subscriberTrace = this.subscriber.tracer?.take();
     const publisherTrace = this.publisher?.tracer?.take();
-    const mediaTrace = mediaStatsTracer.take();
+    const tracer = this.tracer.take();
     const sfuTrace = this.sfuClient.getTrace();
-    const traces = [
-      ...mediaTrace.snapshot,
+    const traces: TraceRecord[] = [
+      ...tracer.snapshot,
       ...(sfuTrace?.snapshot ?? []),
       ...(publisherTrace?.snapshot ?? []),
       ...(subscriberTrace?.snapshot ?? []),
@@ -198,7 +202,7 @@ export class SfuStatsReporter {
     } catch (err) {
       publisherTrace?.rollback();
       subscriberTrace?.rollback();
-      mediaTrace.rollback();
+      tracer.rollback();
       sfuTrace?.rollback();
       throw err;
     }

package/src/stats/utils.ts

@@ -13,6 +13,21 @@ export const flatten = (report: RTCStatsReport) => {
   return stats;
 };
 
+/**
+ * Dump the provided MediaStream into a JSON object.
+ */
+export const dumpStream = (stream: MediaStream) => ({
+  id: stream.id,
+  tracks: stream.getTracks().map((track) => ({
+    id: track.id,
+    kind: track.kind,
+    label: track.label,
+    enabled: track.enabled,
+    muted: track.muted,
+    readyState: track.readyState,
+  })),
+});
+
 export const getSdkSignature = (clientDetails: ClientDetails) => {
   const { sdk, ...platform } = clientDetails;
   const sdkName = getSdkName(sdk);

package/dist/src/stats/rtc/mediaDevices.d.ts

@@ -1,2 +0,0 @@
-import { Tracer } from './Tracer';
-export declare const tracer: Tracer;

package/src/stats/rtc/mediaDevices.ts

@@ -1,43 +0,0 @@
-import { Tracer } from './Tracer';
-
-export const tracer = new Tracer(null);
-
-if (
-  typeof navigator !== 'undefined' &&
-  typeof navigator.mediaDevices !== 'undefined'
-) {
-  const dumpStream = (stream: MediaStream) => ({
-    id: stream.id,
-    tracks: stream.getTracks().map((track) => ({
-      id: track.id,
-      kind: track.kind,
-      label: track.label,
-      enabled: track.enabled,
-      muted: track.muted,
-      readyState: track.readyState,
-    })),
-  });
-
-  const trace = tracer.trace;
-  const target = navigator.mediaDevices;
-  for (const method of ['getUserMedia', 'getDisplayMedia'] as const) {
-    const original = target[method];
-    if (!original) continue;
-
-    let mark = 0;
-    target[method] = async function tracedMethod(
-      constraints: MediaStreamConstraints,
-    ) {
-      const tag = `navigator.mediaDevices.${method}.${mark++}`;
-      trace(tag, constraints);
-      try {
-        const stream = await original.call(target, constraints);
-        trace(`${tag}.OnSuccess`, dumpStream(stream));
-        return stream;
-      } catch (err) {
-        trace(`${tag}.OnFailure`, (err as Error).name);
-        throw err;
-      }
-    };
-  }
-}