fix(LocalVideo): prevent from leaking video elements

It appears that the TrackEvents.LOCAL_TRACK_STOPPED is not triggered
when switching between camera and screen. This is a temporary workaround
to prevent excessive amount of warnings (added in the previous commit)
about multiple video elements.

modules/UI/videolayout/LocalVideo.js

@@ -154,6 +154,19 @@ LocalVideo.prototype.createConnectionIndicator = function() {
 };
 
 LocalVideo.prototype.changeVideo = function (stream) {
+    // FIXME temporary workaround for the fact that 'endedHandler' is not called
+    // This is to avoid potential side effect of the fact that multiple video
+    // elements are leaked into the 'localVideoWrapper' after screen sharing
+    if (this.videoStream) {
+        var localVideoElement = document.getElementById(this.localVideoId);
+        if (localVideoElement) {
+            this.videoStream.detach(localVideoElement);
+            var container = localVideoElement.parentNode;
+            if (container) {
+                container.removeChild(localVideoElement);
+            }
+        }
+    }
     this.videoStream = stream;
 
     let localVideoClick = (event) => {
@@ -192,6 +205,9 @@ LocalVideo.prototype.changeVideo = function (stream) {
     // Attach WebRTC stream
     localVideo = stream.attach(localVideo);
 
+    // FIXME this is never called for some reason
+    // It was expected for this callback to be called whenever local video
+    // stream is switched between camera and screen videos.
     let endedHandler = () => {
         localVideoContainer.removeChild(localVideo);
         // when removing only the video element and we are on stage

modules/UI/videolayout/SmallVideo.js

@@ -374,17 +374,13 @@ SmallVideo.prototype.removeModeratorIndicator = function () {
 };
 
 /**
- * This is an especially interesting function. A naive reader might think that
- * it returns this SmallVideo's "video" element. But it is much more exciting.
- * It first finds this video's parent element using jquery, then uses a utility
- * from lib-jitsi-meet to extract the video element from it (with two more
- * jquery calls), and finally uses jquery again to encapsulate the video element
- * in an array. This last step allows (some might prefer "forces") users of
- * this function to access the video element via the 0th element of the returned
- * array (after checking its length of course!).
+ * Selects the video element.
+ * @return {jQuery|HTMLElement} a JQuery selector pointing to the video element.
  */
 SmallVideo.prototype.selectVideoElement = function () {
-    return $(RTCUIHelper.findVideoElement($('#' + this.videoSpanId)[0]));
+    return $(
+        RTCUIHelper.findVideoElement(
+            document.getElementById(this.videoSpanId)));
 };
 
 /**