@stream-io/video-client 0.0.13 → 0.0.15

package/src/rtc/publisher.ts

@@ -24,6 +24,7 @@ import {
   setPreferredCodec,
   toggleDtx,
 } from '../helpers/sdp-munging';
+import { Logger } from '../coordinator/connection/types';
 
 export type PublisherOpts = {
   sfuClient: StreamSfuClient;
@@ -63,6 +64,7 @@ export class Publisher {
   private isDtxEnabled: boolean;
   private isRedEnabled: boolean;
   private preferredVideoCodec?: string;
+  private logger?: Logger;
 
   constructor({
     connectionConfig,
@@ -124,7 +126,10 @@ export class Publisher {
      * Once the track has ended, it will notify the SFU and update the state.
      */
     const handleTrackEnded = async () => {
-      console.log(`Track ${TrackType[trackType]} has ended, notifying the SFU`);
+      this.logger?.(
+        'info',
+        `Track ${TrackType[trackType]} has ended, notifying the SFU`,
+      );
       await this.notifyTrackMuteStateChanged(
         mediaStream,
         track,
@@ -165,7 +170,8 @@ export class Publisher {
       this.transceiverRegistry[trackType] = transceiver;
 
       if ('setCodecPreferences' in transceiver && codecPreferences) {
-        console.log(
+        this.logger?.(
+          'info',
           `Setting ${TrackType[trackType]} codec preferences`,
           codecPreferences,
         );
@@ -283,7 +289,11 @@ export class Publisher {
   };
 
   updateVideoPublishQuality = async (enabledRids: string[]) => {
-    console.log('Update publish quality, requested rids by SFU:', enabledRids);
+    this.logger?.(
+      'info',
+      'Update publish quality, requested rids by SFU:',
+      enabledRids,
+    );
 
     const videoSender = this.transceiverRegistry[TrackType.VIDEO]?.sender;
     if (!videoSender) return;
@@ -300,10 +310,11 @@ export class Publisher {
     });
     if (changed) {
       if (params.encodings.length === 0) {
-        console.warn('No suitable video encoding quality found');
+        this.logger?.('warn', 'No suitable video encoding quality found');
       }
       await videoSender.setParameters(params);
-      console.log(
+      this.logger?.(
+        'info',
         `Update publish quality, enabled rids: ${params.encodings
           .filter((e) => e.active)
           .map((e) => e.rid)
@@ -342,7 +353,7 @@ export class Publisher {
   private onIceCandidate = async (e: RTCPeerConnectionIceEvent) => {
     const { candidate } = e;
     if (!candidate) {
-      console.log('null ice candidate');
+      this.logger?.('warn', 'null ice candidate');
       return;
     }
     await this.sfuClient.iceTrickle({
@@ -352,7 +363,7 @@ export class Publisher {
   };
 
   private onNegotiationNeeded = async () => {
-    console.log('AAA onNegotiationNeeded');
+    this.logger?.('info', 'AAA onNegotiationNeeded');
     const offer = await this.publisher.createOffer();
     let sdp = offer.sdp;
     if (sdp) {
@@ -430,7 +441,10 @@ export class Publisher {
         sdp: response.sdp,
       });
     } catch (e) {
-      console.error(`Publisher: setRemoteDescription error`, response.sdp, e);
+      this.logger?.('error', `Publisher: setRemoteDescription error`, {
+        sdp: response.sdp,
+        error: e,
+      });
     }
 
     this.sfuClient.iceTrickleBuffer.publisherCandidates.subscribe(
@@ -439,7 +453,10 @@ export class Publisher {
           const iceCandidate = JSON.parse(candidate.iceCandidate);
           await this.publisher.addIceCandidate(iceCandidate);
         } catch (e) {
-          console.error(`Publisher: ICE candidate error`, e, candidate);
+          this.logger?.('error', `Publisher: ICE candidate error`, {
+            error: e,
+            candidate,
+          });
         }
       },
     );
@@ -449,18 +466,20 @@ export class Publisher {
     const errorMessage =
       e instanceof RTCPeerConnectionIceErrorEvent &&
       `${e.errorCode}: ${e.errorText}`;
-    console.error(`Publisher: ICE Candidate error`, errorMessage);
+    this.logger?.('error', `Publisher: ICE Candidate error`, errorMessage);
   };
 
   private onIceConnectionStateChange = () => {
-    console.log(
+    this.logger?.(
+      'error',
       `Publisher: ICE Connection state changed`,
       this.publisher.iceConnectionState,
     );
   };
 
   private onIceGatheringStateChange = () => {
-    console.log(
+    this.logger?.(
+      'error',
       `Publisher: ICE Gathering State`,
       this.publisher.iceGatheringState,
     );

package/src/rtc/signal.ts

@@ -1,23 +1,25 @@
 import { SfuEvent } from '../gen/video/sfu/event/events';
+import { getLogger } from '../logger';
 
 export const createWebSocketSignalChannel = (opts: {
   endpoint: string;
   onMessage?: (message: SfuEvent) => void;
 }) => {
+  const logger = getLogger(['sfu-client']);
   const { endpoint, onMessage } = opts;
   const ws = new WebSocket(endpoint);
   ws.binaryType = 'arraybuffer'; // do we need this?
 
   ws.addEventListener('error', (e) => {
-    console.log('Signaling WS channel error', e);
+    logger?.('error', 'Signaling WS channel error', e);
   });
 
   ws.addEventListener('close', (e) => {
-    console.log('Signaling WS channel is closed', e);
+    logger?.('info', 'Signaling WS channel is closed', e);
   });
 
   ws.addEventListener('open', (e) => {
-    console.log('Signaling WS channel is open', e);
+    logger?.('info', 'Signaling WS channel is open', e);
   });
 
   if (onMessage) {
@@ -30,11 +32,10 @@ export const createWebSocketSignalChannel = (opts: {
 
         onMessage(message);
       } catch (err) {
-        console.error(
+        logger?.(
+          'error',
           'Failed to decode a message. Check whether the Proto models match.',
-          e.data,
-          e,
-          err,
+          { event: e, error: err },
         );
       }
     });

package/src/rtc/subscriber.ts

@@ -2,6 +2,7 @@ import { StreamSfuClient } from '../StreamSfuClient';
 import { getIceCandidate } from './helpers/iceCandidate';
 import { PeerType } from '../gen/video/sfu/models/models';
 import { Dispatcher } from './Dispatcher';
+import { getLogger } from '../logger';
 
 export type SubscriberOpts = {
   sfuClient: StreamSfuClient;
@@ -16,13 +17,14 @@ export const createSubscriber = ({
   connectionConfig,
   onTrack,
 }: SubscriberOpts) => {
+  const logger = getLogger(['sfu-client']);
   const subscriber = new RTCPeerConnection(connectionConfig);
   attachDebugEventListeners(subscriber);
 
   subscriber.addEventListener('icecandidate', async (e) => {
     const { candidate } = e;
     if (!candidate) {
-      console.log('null ice candidate');
+      logger?.('warn', 'null ice candidate');
       return;
     }
 
@@ -40,7 +42,7 @@ export const createSubscriber = ({
   const unsubscribe = dispatcher.on('subscriberOffer', async (message) => {
     if (message.eventPayload.oneofKind !== 'subscriberOffer') return;
     const { subscriberOffer } = message.eventPayload;
-    console.log(`Received subscriberOffer`, subscriberOffer);
+    logger?.('info', 'Received subscriberOffer', subscriberOffer);
 
     await subscriber.setRemoteDescription({
       type: 'offer',
@@ -52,7 +54,10 @@ export const createSubscriber = ({
         const iceCandidate = JSON.parse(candidate.iceCandidate);
         await subscriber.addIceCandidate(iceCandidate);
       } catch (e) {
-        console.error(`Subscriber: ICE candidate error`, e, candidate);
+        logger?.('error', `Subscriber: ICE candidate error`, {
+          error: e,
+          candidate,
+        });
       }
     });
 
@@ -80,22 +85,23 @@ export const createSubscriber = ({
 };
 
 const attachDebugEventListeners = (subscriber: RTCPeerConnection) => {
+  const logger = getLogger(['sfu-client']);
   subscriber.addEventListener('icecandidateerror', (e) => {
     const errorMessage =
       e instanceof RTCPeerConnectionIceErrorEvent &&
       `${e.errorCode}: ${e.errorText}`;
-    console.error(`Subscriber: ICE Candidate error`, errorMessage);
+    logger?.('error', `Subscriber: ICE Candidate error: ${errorMessage}`);
   });
   subscriber.addEventListener('iceconnectionstatechange', () => {
-    console.log(
-      `Subscriber: ICE Connection state changed`,
-      subscriber.iceConnectionState,
+    logger?.(
+      'info',
+      `Subscriber: ICE Connection state changed: ${subscriber.iceConnectionState}`,
     );
   });
   subscriber.addEventListener('icegatheringstatechange', () => {
-    console.log(
-      `Subscriber: ICE Gathering State`,
-      subscriber.iceGatheringState,
+    logger?.(
+      'info',
+      `Subscriber: ICE Gathering State: ${subscriber.iceGatheringState}`,
     );
   });
 };

package/src/stats/state-store-stats-reporter.ts

@@ -6,6 +6,7 @@ import type {
 } from './types';
 import { CallState } from '../store';
 import { Publisher } from '../rtc';
+import { getLogger } from '../logger';
 
 export type StatsReporterOpts = {
   subscriber: RTCPeerConnection;
@@ -69,6 +70,7 @@ export const createStatsReporter = ({
   edgeName,
   pollingIntervalInMs = 2000,
 }: StatsReporterOpts): StatsReporter => {
+  const logger = getLogger(['stats']);
   const getRawStatsForTrack = async (
     kind: 'subscriber' | 'publisher',
     selector?: MediaStreamTrack,
@@ -78,7 +80,7 @@ export const createStatsReporter = ({
     } else if (kind === 'publisher' && publisher) {
       return publisher.getStats(selector);
     } else {
-      console.warn(`Can't retrieve RTC stats for`, kind);
+      logger('warn', `Can't retrieve RTC stats for ${kind}`);
       return undefined;
     }
   };
@@ -122,7 +124,9 @@ export const createStatsReporter = ({
     if (sessionIds.size > 0) {
       for (let participant of state.participants) {
         if (!sessionIds.has(participant.sessionId)) continue;
-        const kind = participant.isLoggedInUser ? 'publisher' : 'subscriber';
+        const kind = participant.isLocalParticipant
+          ? 'publisher'
+          : 'subscriber';
         try {
           const mergedStream = new MediaStream([
             ...(participant.videoStream?.getVideoTracks() || []),
@@ -136,7 +140,11 @@ export const createStatsReporter = ({
             mergedStream.removeTrack(t);
           });
         } catch (e) {
-          console.error(`Failed to collect stats for ${kind}`, participant, e);
+          logger(
+            'error',
+            `Failed to collect stats for ${kind} if ${participant.userId}`,
+            e,
+          );
         }
       }
     }
@@ -182,7 +190,7 @@ export const createStatsReporter = ({
   if (pollingIntervalInMs > 0) {
     const loop = async () => {
       await run().catch((e) => {
-        console.log('Failed to collect stats', e);
+        logger('warn', 'Failed to collect stats', e);
       });
       timeoutId = setTimeout(loop, pollingIntervalInMs);
     };

package/src/store/CallState.ts

@@ -20,6 +20,8 @@ import {
 import { TrackType } from '../gen/video/sfu/models/models';
 import { Comparator } from '../sorting';
 import * as SortingPreset from '../sorting/presets';
+import { getLogger } from '../logger';
+import { Logger } from '../coordinator/connection/types';
 
 /**
  * Represents the state of the current call.
@@ -267,6 +269,8 @@ export class CallState {
    */
   callingState$: Observable<CallingState>;
 
+  readonly logger: Logger;
+
   /**
    * A list of comparators that are used to sort the participants.
    *
@@ -280,6 +284,7 @@ export class CallState {
    *
    */
   constructor() {
+    this.logger = getLogger(['call-state']);
     this.participants$ = this.participantsSubject.pipe(
       map((ps) => ps.sort(this.sortParticipantsBy)),
     );
@@ -289,7 +294,7 @@ export class CallState {
     );
 
     this.remoteParticipants$ = this.participants$.pipe(
-      map((participants) => participants.filter((p) => !p.isLoggedInUser)),
+      map((participants) => participants.filter((p) => !p.isLocalParticipant)),
     );
 
     this.pinnedParticipants$ = this.participants$.pipe(
@@ -616,7 +621,7 @@ export class CallState {
   ) => {
     const participant = this.findParticipantBySessionId(sessionId);
     if (!participant) {
-      console.warn(`Participant with sessionId ${sessionId} not found`);
+      this.logger('warn', `Participant with sessionId ${sessionId} not found`);
       return;
     }
 

package/src/types.ts

@@ -13,6 +13,7 @@ import type { StreamClient } from './coordinator/connection/client';
 import type { Comparator } from './sorting';
 import type { StreamVideoWriteableStateStore } from './store';
 import { AxiosError } from 'axios';
+import { Logger } from './coordinator/connection/types';
 
 export type StreamReaction = Pick<
   ReactionResponse,
@@ -66,7 +67,7 @@ export interface StreamVideoParticipant extends Participant {
   /**
    * True if the participant is the local participant.
    */
-  isLoggedInUser?: boolean;
+  isLocalParticipant?: boolean;
 
   /**
    * Timestamp of when the participant is pinned
@@ -109,7 +110,7 @@ export interface StreamVideoLocalParticipant extends StreamVideoParticipant {
 export const isStreamVideoLocalParticipant = (
   p: StreamVideoParticipant | StreamVideoLocalParticipant,
 ): p is StreamVideoLocalParticipant => {
-  return !!p.isLoggedInUser;
+  return !!p.isLocalParticipant;
 };
 
 /**