浏览代码

Fixes local video thumbnail being replaced with an avatar when lastN enabled.

master
paweldomas 10 年前
父节点
当前提交
17f245df5e

+ 1
- 1
index.html 查看文件

22
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
22
     <script src="libs/popover.js?v=1"></script><!-- bootstrap tooltip lib -->
23
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
23
     <script src="libs/toastr.js?v=1"></script><!-- notifications lib -->
24
     <script src="interface_config.js?v=5"></script>
24
     <script src="interface_config.js?v=5"></script>
25
-    <script src="libs/app.bundle.js?v=100"></script>
25
+    <script src="libs/app.bundle.js?v=101"></script>
26
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
26
     <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
27
     <link rel="stylesheet" href="css/font.css?v=7"/>
27
     <link rel="stylesheet" href="css/font.css?v=7"/>
28
     <link rel="stylesheet" href="css/toastr.css?v=1">
28
     <link rel="stylesheet" href="css/toastr.css?v=1">

+ 53
- 49
libs/app.bundle.js 查看文件

1217
         return this.rtcUtils.getUserMediaWithConstraints(um, success_callback,
1217
         return this.rtcUtils.getUserMediaWithConstraints(um, success_callback,
1218
             failure_callback, resolution, bandwidth, fps, desktopStream);
1218
             failure_callback, resolution, bandwidth, fps, desktopStream);
1219
     },
1219
     },
1220
-    attachMediaStream:  function (element, stream) {
1221
-        this.rtcUtils.attachMediaStream(element, stream);
1220
+    attachMediaStream:  function (elSelector, stream) {
1221
+        this.rtcUtils.attachMediaStream(elSelector, stream);
1222
     },
1222
     },
1223
     getStreamID:  function (stream) {
1223
     getStreamID:  function (stream) {
1224
         return this.rtcUtils.getStreamID(stream);
1224
         return this.rtcUtils.getStreamID(stream);
1794
 
1794
 
1795
             self.peerconnection = RTCPeerConnection;
1795
             self.peerconnection = RTCPeerConnection;
1796
             self.getUserMedia = getUserMedia;
1796
             self.getUserMedia = getUserMedia;
1797
-            self.attachMediaStream = function (element, stream) {
1797
+            self.attachMediaStream = function (elSel, stream) {
1798
 
1798
 
1799
                 if (stream.id === "dummyAudio" || stream.id === "dummyVideo") {
1799
                 if (stream.id === "dummyAudio" || stream.id === "dummyVideo") {
1800
                     return;
1800
                     return;
1801
                 }
1801
                 }
1802
 
1802
 
1803
-                attachMediaStream(element[0], stream);
1803
+                attachMediaStream(elSel[0], stream);
1804
             };
1804
             };
1805
             self.getStreamID = function (stream) {
1805
             self.getStreamID = function (stream) {
1806
                 var id = SDPUtil.filter_special_chars(stream.label);
1806
                 var id = SDPUtil.filter_special_chars(stream.label);
8825
     var avatar = $("#activeSpeakerAvatar")[0];
8825
     var avatar = $("#activeSpeakerAvatar")[0];
8826
     var jid = currentSmallVideo.peerJid;
8826
     var jid = currentSmallVideo.peerJid;
8827
     var url = Avatar.getGravatarUrl(jid);
8827
     var url = Avatar.getGravatarUrl(jid);
8828
-    if(avatar.src === url)
8828
+    if (avatar.src === url)
8829
         return;
8829
         return;
8830
     var isMuted = null;
8830
     var isMuted = null;
8831
-    if(!LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) {
8831
+    if (!currentSmallVideo.isLocal &&
8832
+       !LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) {
8832
         isMuted = true;
8833
         isMuted = true;
8833
     }
8834
     }
8834
     else
8835
     else
9114
     this.container = $("#localVideoContainer").get(0);
9115
     this.container = $("#localVideoContainer").get(0);
9115
     this.VideoLayout = VideoLayout;
9116
     this.VideoLayout = VideoLayout;
9116
     this.flipX = true;
9117
     this.flipX = true;
9118
+    this.isLocal = true;
9117
     this.peerJid = null;
9119
     this.peerJid = null;
9118
     this.resourceJid = null;
9120
     this.resourceJid = null;
9119
 }
9121
 }
9364
     nickfield.appendChild(document.createTextNode(this.resourceJid));
9366
     nickfield.appendChild(document.createTextNode(this.resourceJid));
9365
     this.container.appendChild(nickfield);
9367
     this.container.appendChild(nickfield);
9366
     this.flipX = false;
9368
     this.flipX = false;
9369
+    this.isLocal = false;
9367
 }
9370
 }
9368
 
9371
 
9369
 RemoteVideo.prototype = Object.create(SmallVideo.prototype);
9372
 RemoteVideo.prototype = Object.create(SmallVideo.prototype);
10062
  * video because there is no dominant speaker and no focused speaker
10065
  * video because there is no dominant speaker and no focused speaker
10063
  */
10066
  */
10064
 SmallVideo.prototype.showAvatar = function (show) {
10067
 SmallVideo.prototype.showAvatar = function (show) {
10065
-    if(!this.hasAvatar)
10068
+    if (!this.hasAvatar)
10066
         return;
10069
         return;
10067
 
10070
 
10068
     var videoElem = APP.RTC.getVideoElementName();
10071
     var videoElem = APP.RTC.getVideoElementName();
10070
     var avatar = $('#avatar_' + this.resourceJid);
10073
     var avatar = $('#avatar_' + this.resourceJid);
10071
 
10074
 
10072
     if (show === undefined || show === null) {
10075
     if (show === undefined || show === null) {
10073
-        if(!this.VideoLayout.isInLastN(this.resourceJid)) {
10076
+        if (!this.isLocal &&
10077
+            !this.VideoLayout.isInLastN(this.resourceJid)) {
10074
             show = true;
10078
             show = true;
10075
         }
10079
         }
10076
         else
10080
         else
10091
         setVisibility(avatar, show);
10095
         setVisibility(avatar, show);
10092
 
10096
 
10093
     }
10097
     }
10094
-}
10098
+};
10095
 
10099
 
10096
 SmallVideo.prototype.avatarChanged = function (thumbUrl) {
10100
 SmallVideo.prototype.avatarChanged = function (thumbUrl) {
10097
     var thumbnail = $('#' + this.videoSpanId);
10101
     var thumbnail = $('#' + this.videoSpanId);
10572
             return containerElement.id.substring(i + 12); 
10576
             return containerElement.id.substring(i + 12); 
10573
     };
10577
     };
10574
 
10578
 
10579
+    my.getPeerVideoSel = function (peerResourceJid) {
10580
+        return $('#participant_'  + peerResourceJid +
10581
+                 '>' + APP.RTC.getVideoElementName());
10582
+    };
10583
+
10575
     /**
10584
     /**
10576
      * On contact list item clicked.
10585
      * On contact list item clicked.
10577
      */
10586
      */
10580
             return;
10589
             return;
10581
         }
10590
         }
10582
 
10591
 
10592
+        if (jid == APP.xmpp.myJid()) {
10593
+            $("#localVideoContainer").click();
10594
+            return;
10595
+        }
10596
+
10583
         var resource = Strophe.getResourceFromJid(jid);
10597
         var resource = Strophe.getResourceFromJid(jid);
10584
-        var videoContainer = $("#participant_" + resource);
10585
-        if (videoContainer.length > 0) {
10586
-            var videoThumb
10587
-                    = $(RTC.getVideoElementName(), videoContainer).get(0);
10598
+        var videoSel = VideoLayout.getVideoSelector(resource);
10599
+        if (videoSel.length > 0) {
10600
+            var videoThumb = videoSel[0];
10588
             // It is not always the case that a videoThumb exists (if there is
10601
             // It is not always the case that a videoThumb exists (if there is
10589
             // no actual video).
10602
             // no actual video).
10590
-            if (videoThumb) {
10591
-                if (videoThumb.src && videoThumb.src != '') {
10603
+            if (RTC.getVideoSrc(videoThumb)) {
10592
 
10604
 
10593
-                    // We have a video src, great! Let's update the large video
10594
-                    // now.
10605
+                // We have a video src, great! Let's update the large video
10606
+                // now.
10607
+                VideoLayout.handleVideoThumbClicked(
10608
+                    false,
10609
+                    Strophe.getResourceFromJid(jid));
10610
+            } else {
10595
 
10611
 
10596
-                    VideoLayout.handleVideoThumbClicked(
10597
-                        false,
10598
-                        Strophe.getResourceFromJid(jid));
10599
-                } else {
10612
+                // If we don't have a video src for jid, there's absolutely
10613
+                // no point in calling handleVideoThumbClicked; Quite
10614
+                // simply, it won't work because it needs an src to attach
10615
+                // to the large video.
10616
+                //
10617
+                // Instead, we trigger the pinned endpoint changed event to
10618
+                // let the bridge adjust its lastN set for myjid and store
10619
+                // the pinned user in the lastNPickupJid variable to be
10620
+                // picked up later by the lastN changed event handler.
10600
 
10621
 
10601
-                    // If we don't have a video src for jid, there's absolutely
10602
-                    // no point in calling handleVideoThumbClicked; Quite
10603
-                    // simply, it won't work because it needs an src to attach
10604
-                    // to the large video.
10605
-                    //
10606
-                    // Instead, we trigger the pinned endpoint changed event to
10607
-                    // let the bridge adjust its lastN set for myjid and store
10608
-                    // the pinned user in the lastNPickupJid variable to be
10609
-                    // picked up later by the lastN changed event handler.
10610
-
10611
-                    lastNPickupJid = jid;
10612
-                    eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
10613
-                        Strophe.getResourceFromJid(jid));
10614
-                }
10615
-            } else if (jid == APP.xmpp.myJid()) {
10616
-                $("#localVideoContainer").click();
10622
+                lastNPickupJid = jid;
10623
+                eventEmitter.emit(UIEvents.PINNED_ENDPOINT,
10624
+                    Strophe.getResourceFromJid(jid));
10617
             }
10625
             }
10618
         }
10626
         }
10619
     });
10627
     });
10646
         if (jid === APP.xmpp.myJid()) {
10654
         if (jid === APP.xmpp.myJid()) {
10647
             localVideoThumbnail.showVideoIndicator(value);
10655
             localVideoThumbnail.showVideoIndicator(value);
10648
         } else {
10656
         } else {
10657
+            var resource = Strophe.getResourceFromJid(jid);
10658
+
10649
             VideoLayout.ensurePeerContainerExists(jid);
10659
             VideoLayout.ensurePeerContainerExists(jid);
10650
-            remoteVideos[Strophe.getResourceFromJid(jid)].showVideoIndicator(value);
10660
+            remoteVideos[resource].showVideoIndicator(value);
10651
 
10661
 
10652
-            var el = $('#participant_'  + Strophe.getResourceFromJid(jid)
10653
-                        + '>' + APP.RTC.getVideoElementName());
10662
+            var el = VideoLayout.getPeerVideoSel(resource);
10654
             if (!value)
10663
             if (!value)
10655
                 el.show();
10664
                 el.show();
10656
             else
10665
             else
10703
         }
10712
         }
10704
 
10713
 
10705
         // Obtain container for new dominant speaker.
10714
         // Obtain container for new dominant speaker.
10706
-        var container  = document.getElementById(
10707
-                'participant_' + resourceJid);
10715
+        var videoSel  = VideoLayout.getPeerVideoSel(resourceJid);
10708
 
10716
 
10709
         // Local video will not have container found, but that's ok
10717
         // Local video will not have container found, but that's ok
10710
         // since we don't want to switch to local video.
10718
         // since we don't want to switch to local video.
10711
-        if (container && !focusedVideoResourceJid)
10719
+        if (!focusedVideoResourceJid && videoSel.length)
10712
         {
10720
         {
10713
-            var video
10714
-                = container.getElementsByTagName(RTC.getVideoElementName());
10715
-
10716
             // Update the large video if the video source is already available,
10721
             // Update the large video if the video source is already available,
10717
             // otherwise wait for the "videoactive.jingle" event.
10722
             // otherwise wait for the "videoactive.jingle" event.
10718
-            if (video.length && video[0].currentTime > 0) {
10723
+            if (videoSel[0].currentTime > 0) {
10719
                 LargeVideo.updateLargeVideo(resourceJid);
10724
                 LargeVideo.updateLargeVideo(resourceJid);
10720
             }
10725
             }
10721
         }
10726
         }
10813
 
10818
 
10814
                     var jid = APP.xmpp.findJidFromResource(resourceJid);
10819
                     var jid = APP.xmpp.findJidFromResource(resourceJid);
10815
                     var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
10820
                     var mediaStream = APP.RTC.remoteStreams[jid][MediaStreamType.VIDEO_TYPE];
10816
-                    var sel = $('#participant_' + resourceJid +
10817
-                                '>' + RTC.getVideoElementName());
10821
+                    var sel = VideoLayout.getPeerVideoSel(resourceJid);
10818
 
10822
 
10819
                     APP.RTC.attachMediaStream(sel, mediaStream.stream);
10823
                     APP.RTC.attachMediaStream(sel, mediaStream.stream);
10820
                     if (lastNPickupJid == mediaStream.peerjid) {
10824
                     if (lastNPickupJid == mediaStream.peerjid) {

+ 3
- 2
modules/UI/videolayout/LargeVideo.js 查看文件

186
     var avatar = $("#activeSpeakerAvatar")[0];
186
     var avatar = $("#activeSpeakerAvatar")[0];
187
     var jid = currentSmallVideo.peerJid;
187
     var jid = currentSmallVideo.peerJid;
188
     var url = Avatar.getGravatarUrl(jid);
188
     var url = Avatar.getGravatarUrl(jid);
189
-    if(avatar.src === url)
189
+    if (avatar.src === url)
190
         return;
190
         return;
191
     var isMuted = null;
191
     var isMuted = null;
192
-    if(!LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) {
192
+    if (!currentSmallVideo.isLocal &&
193
+       !LargeVideo.VideoLayout.isInLastN(currentSmallVideo.resourceJid)) {
193
         isMuted = true;
194
         isMuted = true;
194
     }
195
     }
195
     else
196
     else

+ 1
- 0
modules/UI/videolayout/LocalVideo.js 查看文件

11
     this.container = $("#localVideoContainer").get(0);
11
     this.container = $("#localVideoContainer").get(0);
12
     this.VideoLayout = VideoLayout;
12
     this.VideoLayout = VideoLayout;
13
     this.flipX = true;
13
     this.flipX = true;
14
+    this.isLocal = true;
14
     this.peerJid = null;
15
     this.peerJid = null;
15
     this.resourceJid = null;
16
     this.resourceJid = null;
16
 }
17
 }

+ 1
- 0
modules/UI/videolayout/RemoteVideo.js 查看文件

20
     nickfield.appendChild(document.createTextNode(this.resourceJid));
20
     nickfield.appendChild(document.createTextNode(this.resourceJid));
21
     this.container.appendChild(nickfield);
21
     this.container.appendChild(nickfield);
22
     this.flipX = false;
22
     this.flipX = false;
23
+    this.isLocal = false;
23
 }
24
 }
24
 
25
 
25
 RemoteVideo.prototype = Object.create(SmallVideo.prototype);
26
 RemoteVideo.prototype = Object.create(SmallVideo.prototype);

+ 4
- 3
modules/UI/videolayout/SmallVideo.js 查看文件

305
  * video because there is no dominant speaker and no focused speaker
305
  * video because there is no dominant speaker and no focused speaker
306
  */
306
  */
307
 SmallVideo.prototype.showAvatar = function (show) {
307
 SmallVideo.prototype.showAvatar = function (show) {
308
-    if(!this.hasAvatar)
308
+    if (!this.hasAvatar)
309
         return;
309
         return;
310
 
310
 
311
     var videoElem = APP.RTC.getVideoElementName();
311
     var videoElem = APP.RTC.getVideoElementName();
313
     var avatar = $('#avatar_' + this.resourceJid);
313
     var avatar = $('#avatar_' + this.resourceJid);
314
 
314
 
315
     if (show === undefined || show === null) {
315
     if (show === undefined || show === null) {
316
-        if(!this.VideoLayout.isInLastN(this.resourceJid)) {
316
+        if (!this.isLocal &&
317
+            !this.VideoLayout.isInLastN(this.resourceJid)) {
317
             show = true;
318
             show = true;
318
         }
319
         }
319
         else
320
         else
334
         setVisibility(avatar, show);
335
         setVisibility(avatar, show);
335
 
336
 
336
     }
337
     }
337
-}
338
+};
338
 
339
 
339
 SmallVideo.prototype.avatarChanged = function (thumbUrl) {
340
 SmallVideo.prototype.avatarChanged = function (thumbUrl) {
340
     var thumbnail = $('#' + this.videoSpanId);
341
     var thumbnail = $('#' + this.videoSpanId);

正在加载...
取消
保存