feat: add probe to fetch webrtc statistics periodically

packages/js/package.json

@@ -42,6 +42,7 @@
   "bugs:": "https://github.com/team-telnyx/webrtc/issues",
   "license": "MIT",
   "dependencies": {
+    "@peermetrics/webrtc-stats": "^5.7.1",
     "loglevel": "^1.6.8",
     "uuid": "^7.0.3"
   },

packages/js/src/Modules/Verto/webrtc/BaseCall.ts

@@ -50,13 +50,15 @@ import {
 import { MCULayoutEventHandler } from './LayoutHandler';
 import Call from './Call';
 import pkg from '../../../../package.json';
-
+import { WebRTCStats } from '@peermetrics/webrtc-stats';
 const SDK_VERSION = pkg.version;
 
 /**
  * @ignore Hide in docs output
  */
 export default abstract class BaseCall implements IWebRTCCall {
+  private _webRTCStats: WebRTCStats | null;
+
   /**
    * The call identifier.
    */
@@ -183,6 +185,50 @@ export default abstract class BaseCall implements IWebRTCCall {
     }
   }
 
+  public get isDebuggerRunning(): boolean {
+    return this._webRTCStats != null;
+  }
+  public startDebugger() {
+    if (this.isDebuggerRunning) {
+      return;
+    }
+
+    this._webRTCStats = new WebRTCStats({
+      getStatsInterval: 1000,
+      rawStats: false,
+      statsObject: false,
+      filteredStats: false,
+      remote: true,
+      wrapGetUserMedia: true,
+      debug: false,
+      logLevel: 'none',
+    });
+
+    this._webRTCStats.addConnection({
+      pc: this.peer.instance,
+      peerId: this.options.id,
+      connectionId: `${this.options.telnyxSessionId}/${this.options.telnyxLegId}`,
+    });
+  }
+  public stopDebugger() {
+    if (this._webRTCStats == null) {
+      return;
+    }
+    const data = this._webRTCStats.getTimeline('stats');
+    const blob = new Blob([JSON.stringify(data)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = `call_${this.options.id}.json`;
+    anchor.click();
+    URL.revokeObjectURL(url);
+
+    this._webRTCStats.destroy();
+    this._webRTCStats = null;
+  }
+
   get nodeId(): string {
     return this._targetNodeId;
   }
@@ -266,10 +312,10 @@ export default abstract class BaseCall implements IWebRTCCall {
 
     this.direction = Direction.Inbound;
 
-    if(params?.customHeaders?.length > 0) {
+    if (params?.customHeaders?.length > 0) {
       this.options = {
         ...this.options,
-        customHeaders: params.customHeaders
+        customHeaders: params.customHeaders,
       };
     }
 
@@ -330,7 +376,7 @@ export default abstract class BaseCall implements IWebRTCCall {
     };
 
     this.stopRingtone();
-
+    this.stopDebugger();  
     if (execute) {
       const bye = new Bye({
         sessid: this.session.sessionid,
@@ -921,11 +967,11 @@ export default abstract class BaseCall implements IWebRTCCall {
         if (params.telnyx_call_control_id) {
           this.options.telnyxCallControlId = params.telnyx_call_control_id;
         }
-  
+
         if (params.telnyx_session_id) {
           this.options.telnyxSessionId = params.telnyx_session_id;
         }
-  
+
         if (params.telnyx_leg_id) {
           this.options.telnyxLegId = params.telnyx_leg_id;
         }

packages/js/src/Modules/Verto/webrtc/Call.ts

@@ -1,7 +1,7 @@
 import logger from '../util/logger';
+import { getDisplayMedia, setMediaElementSinkId } from '../util/webrtc';
 import BaseCall from './BaseCall';
 import { IVertoCallOptions } from './interfaces';
-import { getDisplayMedia, setMediaElementSinkId } from '../util/webrtc';
 
 /**
  * A `Call` is the representation of an audio or video call between
@@ -53,6 +53,7 @@ import { getDisplayMedia, setMediaElementSinkId } from '../util/webrtc';
 export class Call extends BaseCall {
   public screenShare: Call;
 
+
   private _statsInterval: any = null;
 
   hangup(params: any = {}, execute: boolean = true) {
@@ -71,12 +72,8 @@ export class Call extends BaseCall {
         }
       });
     });
-    const {
-      remoteCallerName,
-      remoteCallerNumber,
-      callerName,
-      callerNumber,
-    } = this.options;
+    const { remoteCallerName, remoteCallerNumber, callerName, callerNumber } =
+      this.options;
     const options: IVertoCallOptions = {
       screenShare: true,
       localStream: displayStream,