working on reconnecting and the like

public/index.html

@@ -27,7 +27,8 @@
     <div>Audio<label class="switch"><input onclick="toggle('audio', this)" type="checkbox"><span class="slider round"></span></label></div>
 
     <video id="preview" autoplay muted ></video>
-    <video id="remoteVideo" autoplay ></video>
+    <div id="remote">
+    </div>
 
     <br />
 

public/webrtc.js

@@ -81,8 +81,12 @@ class Remote {
    element = null;
 
    constructor(id, stream) {
+      document.getElementById("remote").innerHTML += `
+        <video id="${id}" autoplay ></video>
+      `;
       this.element = document.getElementById(id);
       this.element.srcObject = stream;
+      View.log(this.element);
    }
 }
 
@@ -93,6 +97,10 @@ class Preview {
       this.element = document.getElementById(id);
       this.element.srcObject = stream;
    }
+
+   destructor() {
+      this.element.remove();
+   }
 }
 
 class Server {
@@ -105,19 +113,34 @@ class Server {
 }
 
 class Peer {
+   peer = null;
+   streams = {};
    constructor(stream) {
       this.peer = new RTCPeerConnection(Config.iceConfig);
-      this.peer.onicecandidate = this.gotIceCandidate;
-      this.peer.ontrack = (event) => new Remote('remoteVideo', event.streams[0]);
+      this.peer.onicecandidate = (event) => {
+         if(event.candidate != null) {
+            Server.server.send(JSON.stringify({'ice': event.candidate, 'uuid': Config.getUUID()}));
+         }
+      };
+      this.peer.ontrack = (event) => {
+         event.streams.forEach((stream) => {
+            this.streams[stream.id] = new Remote(stream.id, stream);
+         });
+         View.log("/ontrack:", this.streams);
+      };
+      this.peer.onremovestream = (event) => {
+         event.streams.forEach((stream) => {
+            this.streams[stream.id].destructor();
+            delete this.streams[stream.id];
+         });
+         View.log("/onremovestream:", this.streams);
+      };
+      this.peer.onconnectionstatechange = (event) => {
+         View.log("/onconnectionstatechange:", this.streams, this.peer.connectionState);
+      };
       this.peer.addStream(stream);
    }
 
-   gotIceCandidate(event) {
-      if(event.candidate != null) {
-         Server.server.send(JSON.stringify({'ice': event.candidate, 'uuid': Config.getUUID()}));
-      }
-   }
-
    offer(cb) {
       this.peer
          .createOffer({
@@ -127,8 +150,11 @@ class Peer {
          .then(cb)
          .catch(View.error);
    }
+
+   destructor() {
+      this.peer.close();
+   }
 }
-Peer.peer = null;
 
 class Entropy {
    static pageReady() {