refactor: Simplify media stream handling and update helper functions

Author: luisrivas

quickstart/src/citrix-helpers.js

@@ -1,39 +1,44 @@
 /**
- * A wrapper class for CitrixWebRTC MediaStream that implements the standard MediaStream interface
- * @extends MediaStream Extending from MediaStream allows an instance to be set as the srcObject of a media element (e.g. video, audio)
+ * Custom MediaStream implementation for Citrix WebRTC
+ * @property {function} createMediaStream - Create a MediaStream object
+ * @property {function} mapElement - Register an HTML element to receive media stream data
  */
-class CustomMediaStream extends MediaStream {
-  constructor(stream) {
-    if (!window.CitrixWebRTC) {
-      throw new Error('CitrixWebRTC is not available');
+const CustomMediaStream = {
+  /**
+   * Create a MediaStream object using Citrix WebRTC
+   * @param {Array<MediaStreamTrack>} stremtracks - An array of MediaStreamTracks to include in the MediaStream
+   * @returns {MediaStream} The created Citrix MediaStream object
+   */
+  createMediaStream: function (streamTracks = []) {
+    return window.CitrixWebRTC.createMediaStream(streamTracks);
+  },
+  /**
+   * Attach a media track to a DOM element using Citrix WebRTC
+   * @param {Object} track - The media track to attach
+   * @param {HTMLElement} element - The DOM element to attach the track to
+   */
+  mapElement: function (el) {
+    const tagName = el.tagName.toLowerCase();
+    if (tagName === 'video') {
+      window.CitrixWebRTC.mapVideoElement(el);
+    } else if (tagName === 'audio') {
+      window.CitrixWebRTC.mapAudioElement(el);
     }
-    super();
-    this.citrixMediaStream = window.CitrixWebRTC.createMediaStream(stream);
-  }
-
-  // instance properties
-  get id() { return this.citrixMediaStream.id; }
-  get active() { return this.citrixMediaStream.active; }
-
-  // instance methods
-  addTrack(track) { this.citrixMediaStream.addTrack(track); }
-  clone() { return new CustomMediaStream(this.citrixMediaStream.getTracks()); }
-  getAudioTracks() { return this.citrixMediaStream.getAudioTracks(); }
-  getTrackById(id) { return this.citrixMediaStream.getTrackById(id); }
-  getTracks() { return this.citrixMediaStream.getTracks(); }
-  getVideoTracks() { return this.citrixMediaStream.getVideoTracks(); }
-  removeTrack(track) { this.citrixMediaStream.removeTrack(track); }
-
-  // event listeners
-  set onaddtrack(listener) { this.citrixMediaStream.onaddtrack = listener; }
-  set onremovetrack(listener) { this.citrixMediaStream.onremovetrack = listener; }
-  addEventListener(event, listener) {
-    this.citrixMediaStream[`on${event}`] = listener;
-  }
-  removeEventListener(event) {
-    this.citrixMediaStream[`on${event}`] = null;
-  }
-}
+  },
+  /**
+   * Detach a media track from a DOM element using Citrix WebRTC
+   * @param {HTMLElement} element - The DOM element to detach the track from
+   */
+  disposeElement: function (el) {
+    const tagName = el.tagName.toLowerCase();
+    if (tagName === 'video') {
+      window.CitrixWebRTC.disposeVideoElement(el);
+    } else if (tagName === 'audio') {
+      window.CitrixWebRTC.disposeAudioElement(el);
+    }
+  },
+  audioLoadingTimeout: 250
+};
 
 /**
  * Adjust the client area offset to account for the Citrix WebRTC redirection
@@ -45,34 +50,6 @@ async function adjustClientAreaOffset() {
   window.CitrixWebRTC.setClientAreaOffset(0, offset, windowHandle);
 }
 
-/**
- * Attach a media track to a DOM element using Citrix WebRTC
- * @param {Object} track - The media track to attach
- * @param {HTMLElement} element - The DOM element to attach the track to
- */
-function attachTrackToElement(track, element) {
-  if (track.kind === 'video') {
-    window.CitrixWebRTC.mapVideoElement(element);
-  } else {
-    window.CitrixWebRTC.mapAudioElement(element); 
-  }
-  element.srcObject = window.CitrixWebRTC.createMediaStream([track.mediaStreamTrack]);
-}
-
-/**
- * Detach a media track from a DOM element using Citrix WebRTC
- * @param {HTMLElement} element - The DOM element to detach the track from
- */
-function detachTrackFromElement(element) {
-  if (element.tagName.toLowerCase() === 'video') {
-    window.CitrixWebRTC.disposeVideoElement(element);
-  } else {
-    window.CitrixWebRTC.disposeAudioElement(element);
-  }
-}
-
 
 module.exports.adjustClientAreaOffset = adjustClientAreaOffset;
-module.exports.attachTrackToElement = attachTrackToElement;
-module.exports.detachTrackFromElement = detachTrackFromElement;
 module.exports.CustomMediaStream = CustomMediaStream;

quickstart/src/citrix-polyfills.js

@@ -39,19 +39,6 @@ function polyfillPeerConnectionEventListeners() {
   }
 }
 
-/**
- * Polyfills the CitrixPeerConnection.addTransceiver method.
- * By default, CitrixPeerConnection.addTransceiver requires at least an empty init object to be passed as the second argument.
- * This polyfill allows for the use of the `addTransceiver` method without the init following the WebRTC spec.
- */
-function polyfillAddTransceiver() {
-  const originalAddTransceiver = window.CitrixWebRTC.CitrixPeerConnection.prototype.addTransceiver;
-  
-  window.CitrixWebRTC.CitrixPeerConnection.prototype.addTransceiver = function(trackOrKind, init = {}) {
-    return originalAddTransceiver.call(this, trackOrKind, init);
-  }
-}
-
 /**
  * Polyfills the CitrixDataChannel event listeners.
  * By default, CitrixDataChannel handles events through the `on<event>` method.
@@ -126,118 +113,6 @@ function polyfillMediaStreamEventListeners() {
   }
 }
 
-/**
- * Polyfills the CitrixPeerConnection.getStats method.
- * By default, CitrixPeerConnection.getStats does not support a selector argument.
- * This polyfill allows for the use of the `getStats` method with a selector argument
- * by filtering the stats to only include the relevant stats for the specified track.
- * 
- * @param {Object} selector - The selector object with the id property
- * @returns {Map} A map of stats with the stat ID as the key and the stat object as the value
- */
-function polyfillGetStats() {
-  const originalGetStats = window.CitrixWebRTC.CitrixPeerConnection.prototype.getStats;
-
-  window.CitrixWebRTC.CitrixPeerConnection.prototype.getStats = async function(selector) {
-    const rawStatsArray = await originalGetStats.call(this);
-    
-    // Convert array to a Map as per WebRTC specs
-    const rawStats = new Map();
-    rawStatsArray.forEach(stat => {
-      rawStats.set(stat.id, stat);
-    });
-    
-    // If no selector is provided, return all stats as a Map
-    if (!selector) {
-      return rawStats;
-    }
-
-    const filteredReport = new Map();
-    const trackId = selector.id;
-    const relevantIds = new Set();
-
-    // First pass: Find media sources matching the track ID and identify related stats
-    for (const [id, stat] of rawStats) {
-      // Add media source that matches the track
-      if (stat.type === 'media-source' && stat.trackIdentifier === trackId) {
-        filteredReport.set(id, stat);
-        relevantIds.add(id);
-      }
-    }
-    // If no matching media source was found, return empty report
-    if (relevantIds.size === 0) {
-      return filteredReport;
-    }
-
-    // Second pass: Find all stats that reference the relevant IDs
-    for (const [id, stat] of rawStats) {
-      // Add outbound-rtp stats referencing the media source
-      if (stat.type === 'outbound-rtp' && relevantIds.has(stat.mediaSourceId)) {
-        filteredReport.set(id, stat);
-        relevantIds.add(id);
-        
-        // Also add the referenced codec
-        if (stat.codecId) {
-          relevantIds.add(stat.codecId);
-        }
-        
-        // Add the transport
-        if (stat.transportId) {
-          relevantIds.add(stat.transportId);
-        }
-      }
-      
-      // Add inbound-rtp stats referencing the media source
-      else if (stat.type === 'inbound-rtp' && relevantIds.has(stat.mediaSourceId)) {
-        filteredReport.set(id, stat);
-        relevantIds.add(id);
-        
-        if (stat.codecId) {
-          relevantIds.add(stat.codecId);
-        }
-        
-        if (stat.transportId) {
-          relevantIds.add(stat.transportId);
-        }
-      }
-      
-      // Add remote-inbound-rtp stats that reference our outbound-rtp
-      else if (stat.type === 'remote-inbound-rtp' && relevantIds.has(stat.localId)) {
-        filteredReport.set(id, stat);
-        
-        if (stat.codecId) {
-          relevantIds.add(stat.codecId);
-        }
-        
-        if (stat.transportId) {
-          relevantIds.add(stat.transportId);
-        }
-      }
-      
-      // Add remote-outbound-rtp stats that reference our inbound-rtp
-      else if (stat.type === 'remote-outbound-rtp' && relevantIds.has(stat.remoteId)) {
-        filteredReport.set(id, stat);
-        
-        if (stat.codecId) {
-          relevantIds.add(stat.codecId);
-        }
-        
-        if (stat.transportId) {
-          relevantIds.add(stat.transportId);
-        }
-      }
-    }
-
-    // Third pass: Add all the referenced stats like codec, transport, etc.
-    for (const [id, stat] of rawStats) {
-      if (relevantIds.has(id) && !filteredReport.has(id)) {
-        filteredReport.set(id, stat);
-      }
-    }
-    return filteredReport;
-  }
-}
-
 /**
  * Creates an event handler function that calls all registered listeners with the event
  * @param {Function[]} listeners - Array of event listener functions to call
@@ -252,12 +127,9 @@ function createEventHandler(listeners) {
 function installCitrixWebRTCPolyfills() {
   // PeerConnection Polyfills
   polyfillPeerConnectionEventListeners();
-  polyfillAddTransceiver();
   polyfillDataChannelEventListeners();
   // MediaStream Polyfills
   polyfillMediaStreamEventListeners();
-  // getStats Polyfills
-  polyfillGetStats();
 }
 
 

quickstart/src/index.js

@@ -5,7 +5,7 @@ const joinRoom = require('./joinroom');
 const selectMedia = require('./selectmedia');
 const selectRoom = require('./selectroom');
 const showError = require('./showerror');
-const { adjustClientAreaOffset, attachTrackToElement } = require('./citrix-helpers');
+const { adjustClientAreaOffset } = require('./citrix-helpers');
 const { installCitrixWebRTCPolyfills } = require('./citrix-polyfills');
 
 const $modals = $('#modals');
@@ -114,7 +114,7 @@ async function selectCamera() {
       deviceIds.video = await selectMedia('video', $selectCameraModal, videoTrack => {
         const $video = $('video', $selectCameraModal);
         const videoElement = $video.get(0);
-        attachTrackToElement(videoTrack, videoElement);
+        videoTrack.attach(videoElement);
       });
     } catch (error) {
       showError($showErrorModal, error);