Receives all data-channel events/messages from Videobridge as JSON-formatted text. Renames active speaker to dominant speaker.

app.js

@@ -562,7 +562,7 @@ $(document).bind('callactive.jingle', function (event, videoelem, sid) {
 
         // Update the large video to the last added video only if there's no
         // current active or focused speaker.
-        if (!focusedVideoSrc && !VideoLayout.getActiveSpeakerResourceJid())
+        if (!focusedVideoSrc && !VideoLayout.getDominantSpeakerResourceJid())
             VideoLayout.updateLargeVideo(videoelem.attr('src'), 1);
 
         VideoLayout.showFocusIndicator();

css/videolayout_default.css

@@ -94,7 +94,7 @@
     height: 100%;
 }
 
-.activespeaker {
+.dominantspeaker {
     background: #000 !important;
 }
 

data_channels.js

@@ -27,38 +27,53 @@ function onDataChannel(event)
     dataChannel.onmessage = function (event)
     {
         var data = event.data;
+        // JSON
+        var obj;
 
-        console.info("Got Data Channel Message:", data, dataChannel);
-
-        // Active speaker event
-        if (data.indexOf('activeSpeaker') === 0)
+        try
         {
-            // Endpoint ID from the Videobridge.
-            var resourceJid = data.split(":")[1];
-
-            console.info(
-                "Data channel new active speaker event: " + resourceJid);
-            $(document).trigger('activespeakerchanged', [resourceJid]);
+            obj = JSON.parse(data);
+        }
+        catch (e)
+        {
+            console.error(
+                "Failed to parse data channel message as JSON: ",
+                data,
+                dataChannel);
         }
-        else
+        if (('undefined' !== typeof(obj)) && (null !== obj))
         {
-            // JSON
-            var obj;
+            var colibriClass = obj.colibriClass;
 
-            try
+            if ("DominantSpeakerEndpointChangeEvent" === colibriClass)
             {
-                obj = JSON.parse(data);
+                // Endpoint ID from the Videobridge.
+                var dominantSpeakerEndpoint = obj.dominantSpeakerEndpoint;
+
+                console.info(
+                    "Data channel new dominant speaker event: ",
+                    dominantSpeakerEndpoint);
+                $(document).trigger(
+                    'dominantspeakerchanged',
+                    [dominantSpeakerEndpoint]);
             }
-            catch (e)
+            else if ("LastNEndpointsChangeEvent" === colibriClass)
             {
-                console.error(
-                    "Failed to parse data channel message as JSON: ",
-                    data,
-                    dataChannel);
+                // The new/latest list of last-n endpoint IDs.
+                var lastNEndpoints = obj.lastNEndpoints;
+                /*
+                 * The list of endpoint IDs which are entering the list of
+                 * last-n at this time i.e. were not in the old list of last-n
+                 * endpoint IDs.
+                 */
+                var endpointsEnteringLastN = obj.endpointsEnteringLastN;
+
+                console.debug(
+                    "Data channel new last-n event: ",
+                    lastNEndpoints);
             }
-            if (('undefined' !== typeof(obj)) && (null !== obj))
+            else
             {
-                // TODO Consume the JSON-formatted data channel message.
                 console.debug("Data channel JSON-formatted message: ", obj);
             }
         }

videolayout.js

@@ -1,6 +1,6 @@
 var VideoLayout = (function (my) {
     var preMuted = false;
-    var currentActiveSpeaker = null;
+    var currentDominantSpeaker = null;
 
     my.changeLocalAudio = function(stream) {
         connection.jingle.localAudio = stream;
@@ -139,19 +139,19 @@ var VideoLayout = (function (my) {
 
                 if (isVisible) {
                     // Only if the large video is currently visible.
-                    // Disable previous active speaker video.
+                    // Disable previous dominant speaker video.
                     var oldJid = getJidFromVideoSrc(oldSrc);
                     if (oldJid) {
                         var oldResourceJid = Strophe.getResourceFromJid(oldJid);
-                        VideoLayout.enableActiveSpeaker(oldResourceJid, false);
+                        VideoLayout.enableDominantSpeaker(oldResourceJid, false);
                     }
 
-                    // Enable new active speaker in the remote videos section.
+                    // Enable new dominant speaker in the remote videos section.
                     var userJid = getJidFromVideoSrc(newSrc);
                     if (userJid)
                     {
                         var resourceJid = Strophe.getResourceFromJid(userJid);
-                        VideoLayout.enableActiveSpeaker(resourceJid, true);
+                        VideoLayout.enableDominantSpeaker(resourceJid, true);
                     }
 
                     $(this).fadeIn(300);
@@ -173,15 +173,15 @@ var VideoLayout = (function (my) {
         if (focusedVideoSrc === videoSrc)
         {
             focusedVideoSrc = null;
-            var activeSpeakerVideo = null;
-            // Enable the currently set active speaker.
-            if (currentActiveSpeaker) {
-                activeSpeakerVideo
-                    = $('#participant_' + currentActiveSpeaker + '>video')
+            var dominantSpeakerVideo = null;
+            // Enable the currently set dominant speaker.
+            if (currentDominantSpeaker) {
+                dominantSpeakerVideo
+                    = $('#participant_' + currentDominantSpeaker + '>video')
                         .get(0);
 
-                if (activeSpeakerVideo)
-                    VideoLayout.updateLargeVideo(activeSpeakerVideo.src, 1);
+                if (dominantSpeakerVideo)
+                    VideoLayout.updateLargeVideo(dominantSpeakerVideo.src, 1);
             }
 
             return;
@@ -254,12 +254,12 @@ var VideoLayout = (function (my) {
         if (isVisible) {
             $('#largeVideo').css({visibility: 'visible'});
             $('.watermark').css({visibility: 'visible'});
-            VideoLayout.enableActiveSpeaker(resourceJid, true);
+            VideoLayout.enableDominantSpeaker(resourceJid, true);
         }
         else {
             $('#largeVideo').css({visibility: 'hidden'});
             $('.watermark').css({visibility: 'hidden'});
-            VideoLayout.enableActiveSpeaker(resourceJid, false);
+            VideoLayout.enableDominantSpeaker(resourceJid, false);
         }
     };
 
@@ -582,20 +582,20 @@ var VideoLayout = (function (my) {
     };
 
     /**
-     * Enables the active speaker UI.
+     * Enables the dominant speaker UI.
      *
      * @param resourceJid the jid indicating the video element to
      * activate/deactivate
-     * @param isEnable indicates if the active speaker should be enabled or
+     * @param isEnable indicates if the dominant speaker should be enabled or
      * disabled
      */
-    my.enableActiveSpeaker = function(resourceJid, isEnable) {
+    my.enableDominantSpeaker = function(resourceJid, isEnable) {
         var displayName = resourceJid;
         var nameSpan = $('#participant_' + resourceJid + '>span.displayname');
         if (nameSpan.length > 0)
             displayName = nameSpan.text();
 
-        console.log("UI enable active speaker",
+        console.log("UI enable dominant speaker",
                     displayName,
                     resourceJid,
                     isEnable);
@@ -625,16 +625,16 @@ var VideoLayout = (function (my) {
             if (isEnable) {
                 VideoLayout.showDisplayName(videoContainerId, true);
 
-                if (!videoSpan.classList.contains("activespeaker"))
-                    videoSpan.classList.add("activespeaker");
+                if (!videoSpan.classList.contains("dominantspeaker"))
+                    videoSpan.classList.add("dominantspeaker");
 
                 video.css({visibility: 'hidden'});
             }
             else {
                 VideoLayout.showDisplayName(videoContainerId, false);
 
-                if (videoSpan.classList.contains("activespeaker"))
-                    videoSpan.classList.remove("activespeaker");
+                if (videoSpan.classList.contains("dominantspeaker"))
+                    videoSpan.classList.remove("dominantspeaker");
 
                 video.css({visibility: 'visible'});
             }
@@ -805,10 +805,10 @@ var VideoLayout = (function (my) {
     };
 
     /**
-     * Returns the current active speaker resource jid.
+     * Returns the current dominant speaker resource jid.
      */
-    my.getActiveSpeakerResourceJid = function () {
-        return currentActiveSpeaker;
+    my.getDominantSpeakerResourceJid = function () {
+        return currentDominantSpeaker;
     };
 
     /**
@@ -926,21 +926,21 @@ var VideoLayout = (function (my) {
     });
 
     /**
-     * On active speaker changed event.
+     * On dominant speaker changed event.
      */
-    $(document).bind('activespeakerchanged', function (event, resourceJid) {
+    $(document).bind('dominantspeakerchanged', function (event, resourceJid) {
         // We ignore local user events.
         if (resourceJid
                 === Strophe.getResourceFromJid(connection.emuc.myroomjid))
             return;
 
-        // Obtain container for new active speaker.
+        // Obtain container for new dominant speaker.
         var container  = document.getElementById(
                 'participant_' + resourceJid);
 
-        // Update the current active speaker.
-        if (resourceJid !== currentActiveSpeaker)
-            currentActiveSpeaker = resourceJid;
+        // Update the current dominant speaker.
+        if (resourceJid !== currentDominantSpeaker)
+            currentDominantSpeaker = resourceJid;
         else
             return;