Logs resolution changes to callstats.

conference.js

@@ -1231,6 +1231,12 @@ export default {
             room.dial(sipNumber);
         });
 
+        APP.UI.addListener(UIEvents.RESOLUTION_CHANGED,
+            (id, oldResolution, newResolution, delay) => {
+            room.sendApplicationLog("Resolution change id=" + id
+                + " old=" + oldResolution + " new=" + newResolution
+                + " delay=" + delay);
+        });
 
         // Starts or stops the recording for the conference.
         APP.UI.addListener(UIEvents.RECORDING_TOGGLED, (options) => {

modules/UI/videolayout/SmallVideo.js

@@ -2,6 +2,7 @@
 /* jshint -W101 */
 import Avatar from "../avatar/Avatar";
 import UIUtil from "../util/UIUtil";
+import UIEvents from "../../../service/UI/UIEvents";
 
 const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
 
@@ -487,4 +488,37 @@ SmallVideo.prototype.getIndicatorSpan = function(id) {
     return indicatorSpan;
 };
 
+/**
+ * Adds a listener for onresize events for this video, which will monitor for
+ * resolution changes, will calculate the delay since the moment the listened
+ * is added, and will fire a RESOLUTION_CHANGED event.
+ */
+SmallVideo.prototype.waitForResolutionChange = function() {
+    let self = this;
+    let beforeChange = window.performance.now();
+    let videos = this.selectVideoElement();
+    if (!videos || !videos.length || videos.length <= 0)
+        return;
+    let video = videos[0];
+    let oldWidth = video.videoWidth;
+    let oldHeight = video.videoHeight;
+    video.onresize = (event) => {
+        if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) {
+            // Only run once.
+            video.onresize = null;
+
+            let delay = window.performance.now() - beforeChange;
+            let emitter = self.VideoLayout.getEventEmitter();
+            if (emitter) {
+                emitter.emit(
+                        UIEvents.RESOLUTION_CHANGED,
+                        self.getId(),
+                        oldWidth + "x" + oldHeight,
+                        video.videoWidth + "x" + video.videoHeight,
+                        delay);
+            }
+        }
+    };
+};
+
 export default SmallVideo;

modules/UI/videolayout/VideoLayout.js

@@ -1010,11 +1010,16 @@ var VideoLayout = {
             if (id !== currentId && videoType === VIDEO_CONTAINER_TYPE) {
                 eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, id);
             }
+
+            let smallVideo = this.getSmallVideo(id);
+            let oldSmallVideo;
             if (currentId) {
-                var oldSmallVideo = this.getSmallVideo(currentId);
+                oldSmallVideo = this.getSmallVideo(currentId);
             }
 
-            let smallVideo = this.getSmallVideo(id);
+            smallVideo.waitForResolutionChange();
+            if (oldSmallVideo)
+                oldSmallVideo.waitForResolutionChange();
 
             largeVideo.updateLargeVideo(
                 id,
@@ -1118,7 +1123,9 @@ var VideoLayout = {
     setLocalFlipX: function (val) {
         this.localFlipX = val;
 
-    }
+    },
+
+    getEventEmitter: () => {return eventEmitter;}
 };
 
 export default VideoLayout;

service/UI/UIEvents.js

@@ -80,5 +80,8 @@ export default {
     /**
      * Notifies that flipX property of the local video is changed.
      */
-    LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed"
+    LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
+    // An event which indicates that the resolution of a remote video has
+    // changed.
+    RESOLUTION_CHANGED: "UI.resolution_changed"
 };