Merge pull request #4 from questo-ai/master

Update fixes

README.md

@@ -20,12 +20,14 @@ technology.
 <img align="right" width="400" height="auto" src="public/images/preview.gif">
 
 - Screen sharing
+- Group call with up to 4 peers
 - Picture in picture
 - Live captions
 - Text chat
 - Auto-scaling video quality
 - No download required, entirely browser based
 - Direct peer to peer connection ensures lowest latency
+- No SFU servers, group calls use mesh networks
 - Single use disposable chat rooms
 
 ## Quick start

public/js/chat.js

@@ -195,7 +195,16 @@ var VideoChat = {
             logIt("connected");
             break;
           case "disconnected":
-            logIt("disconnected");
+            logIt("disconnected - UUID " + uuid);
+            VideoChat.remoteVideoWrapper.removeChild(document.querySelectorAll(`[uuid="${uuid}"]`)[0]);
+            VideoChat.connected.delete(uuid);
+            VideoChat.peerConnections.delete(uuid);
+            dataChannel.delete(uuid);
+
+            if (VideoChat.peerConnections.size === 0) {
+              displayWaitingCaption();
+            }
+            break;
           case "failed":
             logIt("failed");
             // VideoChat.socket.connect
@@ -332,6 +341,7 @@ var VideoChat = {
     node.setAttribute("autoplay", "");
     node.setAttribute("playsinline", "");
     node.setAttribute("id", "remote-video");
+    node.setAttribute("uuid", uuid);
     VideoChat.remoteVideoWrapper.appendChild(node);
     // Update remote video source
     VideoChat.remoteVideoWrapper.lastChild.srcObject = event.stream;
@@ -863,7 +873,7 @@ function toggleChat() {
 }
 // End Text chat
 
-//Picture in picture
+// Picture in picture
 function togglePictureInPicture() {
   if (
     "pictureInPictureEnabled" in document ||
@@ -893,7 +903,15 @@ function togglePictureInPicture() {
     );
   }
 }
-//Picture in picture
+
+// Helper function for displaying waiting caption
+function displayWaitingCaption() {
+  // Set caption text on start
+  captionText.text("Waiting for other user to join...").fadeIn();
+
+  // Reposition captions on start
+  rePositionCaptions();
+}
 
 function startUp() {
   //  Try and detect in-app browsers and redirect
@@ -987,11 +1005,7 @@ function startUp() {
     },
   });
 
-  // Set caption text on start
-  captionText.text("Waiting for other user to join...").fadeIn();
-
-  // Reposition captions on start
-  rePositionCaptions();
+  displayWaitingCaption();
 
   // On change media devices refresh page and switch to system default
   navigator.mediaDevices.ondevicechange = () => window.location.reload();

public/landing.html

@@ -67,9 +67,9 @@
                       class="mt-0 mb-32 reveal-from-bottom"
                       data-reveal-delay="300"
                     >
-                      Simple, Secure, and Fast. Peer to peer video calling
-                      provides quality and latency simply not available with
-                      traditional technology.
+                      Simple, Secure, and Fast. Peer to peer group video
+                      calling provides quality and latency simply not
+                      available with traditional technology.
                     </p>
                     <div class="reveal-from-bottom" data-reveal-delay="450">
                       <a
@@ -191,18 +191,19 @@
                     <div class="features-tiles-item-header">
                       <div class="features-tiles-item-image mb-16">
                         <img
-                          src="images/feature-tile-icon-03.svg"
-                          alt="Feature tile icon 03"
+                          src="images/feature-tile-icon-06.svg"
+                          alt="Feature tile icon 06"
                           width="72"
                           height="72"
                         />
                       </div>
                     </div>
                     <div class="features-tiles-item-content">
-                      <h4 class="mt-0 mb-8">Total Privacy</h4>
+                      <h4 class="mt-0 mb-8">Decentralized group calls</h4>
                       <p class="m-0 text-sm">
-                        Each chat is single use, data stays between you and your
-                        caller. Zipcall is built privacy first.
+                        Zipcall lets you talk to up to four friends by
+                        directly connecting to them, completely
+                        decentralized.
                       </p>
                     </div>
                   </div>
@@ -236,17 +237,18 @@
                     <div class="features-tiles-item-header">
                       <div class="features-tiles-item-image mb-16">
                         <img
-                          src="images/feature-tile-icon-06.svg"
-                          alt="Feature tile icon 06"
+                          src="images/feature-tile-icon-03.svg"
+                          alt="Feature tile icon 03"
                           width="72"
                           height="72"
                         />
                       </div>
                     </div>
                     <div class="features-tiles-item-content">
-                      <h4 class="mt-0 mb-8">Maximum Security</h4>
+                      <h4 class="mt-0 mb-8">Total Privacy and Security</h4>
                       <p class="m-0 text-sm">
-                        End to end state of the art encryption means your calls
+                        Zipcall is built privacy first. Each chat is single use,
+                        and end to end state of the art encryption means your calls
                         are exactly that. Your calls.
                       </p>
                     </div>

server.js

@@ -8,7 +8,6 @@ var twillioAccountSID =
 var twilio = require("twilio")(twillioAccountSID, twillioAuthToken);
 var express = require("express");
 var app = express();
-const fs = require("fs");
 var http = require("http").createServer(app);
 var io = require("socket.io")(http);
 var path = require("path");