Merge pull request #58 from beatriceo/remote-video-update

Change video.srcObject instead of deleting entire video element

app/javascript/packs/webrtc.js

@@ -78,7 +78,7 @@ const handleLeaveSession = () => {
 
   App.session.unsubscribe();
 
-  remoteVideoContainer.innerHTML = "";
+  // remoteVideoContainer.innerHTML = "";
 
   broadcastData({
     type: REMOVE_USER,
@@ -91,8 +91,9 @@ const joinRoom = data => {
 };
 
 const removeUser = data => {
-  let video = document.getElementById(`remoteVideoContainer+${data.from}`);
-  video && video.remove();
+  remoteVideo = document.querySelector("#remote-video-container>video");
+  if (video.srcObject) video.srcObject = null;
+
   delete pcPeers[data.from];
 };
 
@@ -139,12 +140,9 @@ const createPC = (userId, isOffer) => {
   };
 
   pc.onaddstream = event => {
-    const element = document.createElement("video");
-    element.id = `remoteVideoContainer+${userId}`;  // why is the userId being interpolated?
-    element.autoplay = "autoplay";
-    element.srcObject = event.stream;
-    element.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-    remoteVideoContainer.appendChild(element);
+    const remoteVideo = document.querySelector("#remote-video-container>video");
+    remoteVideo.srcObject = event.stream;
+    remoteVideo.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
     localVideo.classList.add("video-sm");
   };
 
@@ -200,7 +198,11 @@ const exchange = data => {
   }
 };
 
-const logError = error => console.warn("Whoops! Error:", error);
+const logError = error => {
+  console.error("Whoops! Error:", error);
+  // console.info("Reloading Page...")
+  // window.reload();
+}
 
 
 const joinButton = document.getElementById("join-btn")
@@ -213,3 +215,8 @@ setTimeout(function() {
   joinButton.click()
 }, 5000);
 
+
+(function addReloadToWindowObject() {
+  window.__proto__.reload = () => { window.location = window.location }
+})();
+

app/views/chat_rooms/show.html.erb

@@ -26,9 +26,9 @@
 <div class="call-container">
   <div id="remote-video-container">
     <div id="video_overlays">
-
       <video id="local-video" autoplay muted></video>
     </div>
+      <video id="remote-video" autoplay></video>
       <i class="far fa-hand-paper hand"></i>
   </div>