fix: race condition for local track dimension update (#16)

## The issue

when getUserMedia is made. native side track is created, and immediately
dimensions event is sent
but JS side, the constructor happens after track is created (resulting
in not listening to the event)
in the end we never really received the event for the first ever local
stream

## The fix

listen to the event in JS before track is created by holding a cache

Author: santhoshvai

src/MediaDevices.ts

@@ -1,11 +1,40 @@
 import { EventTarget, Event, defineEventAttribute } from 'event-target-shim/index';
 import { NativeModules } from 'react-native';
 
+import { addListener } from './EventEmitter';
 import getDisplayMedia from './getDisplayMedia';
 import getUserMedia, { Constraints } from './getUserMedia';
 
 const { WebRTCModule } = NativeModules;
 
+export type VideoTrackDimension = {
+    width: number;
+    height: number;
+};
+
+export const videoTrackDimensionChangedEventQueue = new Map<string, VideoTrackDimension>();
+
+let listenersReady = false;
+
+function ensureListeners() {
+    if (listenersReady) {
+        return;
+    }
+
+    addListener('MediaDevices', 'videoTrackDimensionChanged', (ev: any) => {
+        // We only want to queue events for local tracks.
+        if (ev.pcId !== -1) {
+            return;
+        }
+
+        const { trackId, width, height } = ev;
+
+        videoTrackDimensionChangedEventQueue.set(trackId, { width, height });
+    });
+
+    listenersReady = true;
+}
+
 type MediaDevicesEventMap = {
     devicechange: Event<'devicechange'>
 }
@@ -26,6 +55,8 @@ class MediaDevices extends EventTarget<MediaDevicesEventMap> {
      * @returns {Promise}
      */
     getDisplayMedia() {
+        ensureListeners();
+
         return getDisplayMedia();
     }
 
@@ -38,6 +69,8 @@ class MediaDevices extends EventTarget<MediaDevicesEventMap> {
      * @returns {Promise}
      */
     getUserMedia(constraints: Constraints) {
+        ensureListeners();
+
         return getUserMedia(constraints);
     }
 }

src/MediaStreamTrack.ts

@@ -4,6 +4,7 @@ import { NativeModules } from 'react-native';
 import { MediaTrackConstraints } from './Constraints';
 import { addListener, removeListener } from './EventEmitter';
 import Logger from './Logger';
+import { videoTrackDimensionChangedEventQueue } from './MediaDevices';
 import { deepClone, normalizeConstraints } from './RTCUtil';
 
 const log = new Logger('pc');
@@ -54,19 +55,22 @@ export default class MediaStreamTrack extends EventTarget<MediaStreamTrackEventM
     constructor(info: MediaStreamTrackInfo) {
         super();
 
+        this.id = info.id;
+        this.kind = info.kind;
+        this.remote = info.remote;
         this._constraints = info.constraints || {};
         this._enabled = info.enabled;
         this._settings = info.settings || {};
         this._muted = false;
         this._peerConnectionId = info.peerConnectionId;
         this._readyState = info.readyState;
 
-        this.id = info.id;
-        this.kind = info.kind;
-        this.remote = info.remote;
-
         if (!this.remote) {
             this._registerEvents();
+
+            if (this.kind === 'video') {
+                this._processVideoTrackDimensionChangedQueue();
+            }
         }
     }
 
@@ -272,13 +276,32 @@ export default class MediaStreamTrack extends EventTarget<MediaStreamTrackEventM
         }
     }
 
+    /**
+     * Processes any queued `videoTrackDimensionChanged` events for this track.
+     */
+    _processVideoTrackDimensionChangedQueue(): void {
+        const eventData = videoTrackDimensionChangedEventQueue.get(this.id);
+
+        if (!eventData) {
+            return;
+        }
+
+        this._setVideoTrackDimensions(eventData.width, eventData.height);
+
+        videoTrackDimensionChangedEventQueue.delete(this.id);
+    }
+
     release(): void {
         if (this.remote) {
             return;
         }
 
         removeListener(this);
         WebRTCModule.mediaStreamTrackRelease(this.id);
+
+        if (this.kind === 'video') {
+            videoTrackDimensionChangedEventQueue.delete(this.id);
+        }
     }
 }