Fixes issue with black video when new stream element is inserted after the old one.

modules/UI/util/UIUtil.js

@@ -78,5 +78,19 @@ module.exports = {
         element.setAttribute("data-placement", position);
         element.setAttribute("data-html", true);
         element.setAttribute("data-container", "body");
+    },
+
+    /**
+     * Inserts given child element as the first one into the container.
+     * @param container the container to which new child element will be added
+     * @param newChild the new element that will be inserted into the container
+     */
+    prependChild: function (container, newChild) {
+        var firstChild = container.childNodes[0];
+        if (firstChild) {
+            container.insertBefore(newChild, firstChild);
+        } else {
+            container.appendChild(newChild);
+        }
     }
 };

modules/UI/videolayout/LocalVideo.js

@@ -201,7 +201,8 @@ LocalVideo.prototype.changeVideo = function (stream, isMuted) {
     localVideo.oncontextmenu = function () { return false; };
 
     var localVideoContainer = document.getElementById('localVideoWrapper');
-    localVideoContainer.appendChild(localVideo);
+    // Put the new video always in front
+    UIUtil.prependChild(localVideoContainer, localVideo);
 
     var localVideoSelector = $('#' + localVideo.id);
 

modules/UI/videolayout/RemoteVideo.js

@@ -5,6 +5,7 @@ var AudioLevels = require("../audio_levels/AudioLevels");
 var LargeVideo = require("./LargeVideo");
 var Avatar = require("../avatar/Avatar");
 var RTCBrowserType = require("../../RTC/RTCBrowserType");
+var UIUtils = require("../util/UIUtil");
 
 function RemoteVideo(peerJid, VideoLayout) {
     this.peerJid = peerJid;
@@ -212,7 +213,8 @@ RemoteVideo.prototype.addRemoteStreamElement = function (sid, stream, thessrc) {
     var streamElement = SmallVideo.createStreamElement(sid, stream);
     var newElementId = streamElement.id;
 
-    this.container.appendChild(streamElement);
+    // Put new stream element always in front
+    UIUtils.prependChild(this.container, streamElement);
 
     var sel = $('#' + newElementId);
     sel.hide();