From 3e6c8cb779d335d76fb62cb1944eb637ab981bd3 Mon Sep 17 00:00:00 2001
From: "Glitch (peerjs-video)" <none>
Date: Tue, 8 Sep 2020 21:22:55 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9B=B3=EF=B8=8F=F0=9F=92=8F=20Checkpoint=20.?=
 =?UTF-8?q?/public/index.html:5975361/121=20./public/main.js:5975361/79?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 6 +++---
 public/main.js    | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/index.html b/public/index.html
index f807c97..b14b2bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -100,11 +100,11 @@
       <!-- peers -->
       <div class="row mt-3">        
         <!-- peer -->
-        <div class="col-6">
+        <div v-for="call in calls" class="col-6">
           <div class="card text-dark">
-            <video id="remoteVideo" class="card-img-top" autoplay></video>
+            <video v-bind:srcObject="call.remoteStream" class="card-img-top" autoplay></video>
             <div class="card-body">
-              <h5 class="card-title">Remote</h5>
+              <h5 class="card-title">{{call.peer}}</h5>
             </div>
           </div>
         </div>
diff --git a/public/main.js b/public/main.js
index 7ff07fe..d9599c1 100644
--- a/public/main.js
+++ b/public/main.js
@@ -17,7 +17,8 @@ var app = new Vue({
       document.querySelector('.messages').appendChild(newMessage);
     },
     renderVideo:function(stream, selector = '#remoteVideo') {
-      document.querySelector(selector).srcObject = stream;
+      console.log('renderVideo', stream);
+      // document.querySelector(selector).srcObject = stream;
     },
     connectToPeer: function(peerId) {
       this.logMessage(`Connecting to ${peerId}...`);
@@ -34,7 +35,7 @@ var app = new Vue({
       call.on('stream', this.renderVideo);
       call.on('close', () => {
         console.log(`Call with ${peerId} was closed.`);
-          this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
+        this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
       });
       this.calls.push(call);
     },