From f726b2589f480d9958d60fc8917a8293391d781c Mon Sep 17 00:00:00 2001
From: "Glitch (peerjs-video)" <none>
Date: Tue, 8 Sep 2020 21:34:54 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=AE=F0=9F=90=9C=20Checkpoint=20./publi?=
 =?UTF-8?q?c/index.html:5975361/238=20./public/main.js:5975361/256?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |  2 +-
 public/main.js    | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index b14b2bc..da8967e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -102,7 +102,7 @@
         <!-- peer -->
         <div v-for="call in calls" class="col-6">
           <div class="card text-dark">
-            <video v-bind:srcObject="call.remoteStream" class="card-img-top" autoplay></video>
+            <video v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
             <div class="card-body">
               <h5 class="card-title">{{call.peer}}</h5>
             </div>
diff --git a/public/main.js b/public/main.js
index d9599c1..ef7a0d0 100644
--- a/public/main.js
+++ b/public/main.js
@@ -17,8 +17,8 @@ var app = new Vue({
       document.querySelector('.messages').appendChild(newMessage);
     },
     renderVideo:function(stream, selector = '#remoteVideo') {
-      console.log('renderVideo', stream);
-      // document.querySelector(selector).srcObject = stream;
+      console.log('renderVideo', {stream, selector});
+      document.querySelector(selector).srcObject = stream;
     },
     connectToPeer: function(peerId) {
       this.logMessage(`Connecting to ${peerId}...`);
@@ -32,9 +32,9 @@ var app = new Vue({
       });
 
       let call = this.peer.call(peerId, this.stream);
-      call.on('stream', this.renderVideo);
+      call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
       call.on('close', () => {
-        console.log(`Call with ${peerId} was closed.`);
+        console.log(`[OUT] Call with ${peerId} was closed.`);
         this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
       });
       this.calls.push(call);
@@ -81,10 +81,9 @@ var app = new Vue({
       this.peer.on('call', (call) => {
         console.log('INCOMING CALL', call);
         call.answer(this.stream); // Answer the call with an A/V stream.
-        // this.renderVideo(this.stream, '#localVideo');
-        call.on('stream', this.renderVideo);
+        call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
         call.on('close', () => {
-          console.log(`Call with ${call.peer} was closed.`);
+          console.log(`[INC] Call with ${call.peer} was closed.`);
           this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
         });
         this.calls.push(call);