Added call management

static/app.js

@@ -0,0 +1,73 @@
+"use strict";
+
+const localMedia = document.getElementById("my-video");
+localMedia.muted = true;
+
+navigator.mediaDevices.getUserMedia({
+  audio: true,
+  video: true,
+}).then((localStream) => {
+  localMedia.srcObject = localStream;
+  grid.localStream     = localStream;
+  localMedia.addEventListener("loadedmetadata", () => localMedia.play());
+}).catch((error) => {
+  peer.error = error.message;
+});
+
+const callee = new Vue({
+  el: "#callee",
+  data: {
+    calleeId: "",
+  },
+  methods: {
+    addPeer: () => {
+      if (callee.calleeId && !grid.peers.includes(callee.calleeId))
+        grid.peers.push(callee.calleeId);
+    },
+  },
+});
+
+const grid = new Vue({
+  el: "#grid",
+  data: {
+    localStream: undefined,
+    peers:       [],
+  },
+  methods: {
+    makeCall: (peerId) => {
+      let call = peer.peer.call(peerId, grid.localStream);
+      let video = document.getElementById(call.peer);
+      call.on("stream", (remoteStream) => {
+        video.srcObject = remoteStream;
+        video.addEventListener("loadedmetadata", () => video.play());
+      });
+    },
+  },
+});
+
+const peer = new Vue({
+  el: "#peer",
+  data: {
+    clientId: "",
+    error:    "",
+    peer:     new Peer(undefined, {
+      host: "localhost",
+      key:  "testingkey",
+      path: "/peerjs/conference",
+      port: 3000,
+    }),
+  },
+});
+
+peer.peer.on("close", ()      => peer.clientId = "");
+peer.peer.on("error", (error) => peer.error    = error.message);
+peer.peer.on("open",  ()      => peer.clientId = peer.peer.id);
+
+peer.peer.on("call", (call) => {
+  call.answer(grid.localStream);
+  let video = document.getElementById(call.peer);
+  call.on("stream", (remoteStream) => {
+    video.srcObject = remoteStream;
+    video.addEventListener("loadedmetadata", () => video.play());
+  });
+});