username display

src/lib/RemoteFeed.vue

@@ -3,6 +3,7 @@
         <video ref="feed_video" width="100%" height="100%" autoplay playsinline/>
         <div class="info">{{ bitrate }}</div>
         <div class="infoSlow">Slow Connection</div>
+        <div class="infoName">{{ remoteStream.display }}</div>
         <div class="actions">
             <v-slider
                     v-model="volume"
@@ -22,7 +23,8 @@
           opaqueId: String,
           room: Number,
           mypvtid: Number,
-          feedid: Number
+          feedid: Number,
+          remoteStream: Object
         },
         name: "RemoteFeed",
         data: () => ({
@@ -157,4 +159,13 @@
         right: 0;
         top:0;
     }
+    .infoName {
+        position: absolute;
+        left: 5px;
+        top:5px;
+        color:#fff;
+        font-size: 10px;
+        text-shadow: 1px 1px #000;
+
+    }
 </style>

src/lib/VueJanus.vue

@@ -94,7 +94,7 @@
                        playsinline muted="muted"/>
             </v-col>
             <v-col cols="12" md="3" v-for="remoteStream in remoteStreams" :key="remoteStream.id">
-                    <RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :janusInit="janusInit" :room="room" ></RemoteFeed>
+                    <RemoteFeed :opaqueId="opaqueId" :mypvtid="mypvtid" :feedid="remoteStream.id" :remote-stream="remoteStream" :janusInit="janusInit" :room="room" ></RemoteFeed>
             </v-col>
         </v-row>
     </v-container>