Name-bar over video

public/css/call-minimal.css

@@ -4,6 +4,18 @@
 .main-view .video-view {
     margin: 0.5rem;
     -webkit-margin-collapse: collapse;
+    position: relative;
+}
+.main-view .video-view .name-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #00000044;
+    font-size: 11px;
+    text-align: right;
+    padding: 3px 6px;
+    color: #fff;
 }
 @media all and (min-width: 768px) {
     .main-view {

resources/views/app/video/call-minimal.blade.php

@@ -219,6 +219,10 @@
                         this.$selfView.height(this.$selfView.width() * 0.75); // 4x3 mode
                         this.myVideo.play(this.$selfView[0], {fit: 'contain'});
 
+                        // show own name-bar
+                        this.$selfView.find('.name-bar').remove();
+                        this.$selfView.append($('<div class="name-bar"></div>').text(this.myName));
+
                         // start listening to events
                         this.initMediaEvents();
 
@@ -417,6 +421,22 @@
                             }
                             element.height(element.width() * 0.75); // 4x3 mode
                             user.videoTrack.play(element[0], {fit: 'contain'});
+
+                            // refreshState & show user's name over video
+                            this.getMeetingInfo(false, () => {
+                                let participant = null;
+                                for (let i = 0; i < this.meetingData.otherParticipants.length; i++) {
+                                    if (this.meetingData.otherParticipants[i].mediaServiceIdentifier === ('' + user.uid)) {
+                                        participant = this.meetingData.otherParticipants[i];
+                                        break;
+                                    }
+                                }
+                                if (participant) {
+                                    element.find('.name-bar').remove();
+                                    element.append($('<div class="name-bar"></div>').text(participant.displayName));
+                                }
+                            });
+
                         }
                         else if(mediaType === 'audio') {
                             user.audioTrack.play();