☂️🐪 Checkpoint

./package.json:5975361/753
./server.js:5975361/152
./views/index.ejs:5975361/5530
./public/main.js:5975361/69

package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "express": "^4.17.1",
-    "peer": "^0.5.3"
+    "peer": "^0.5.3",
+    "ejs": "^3.1.5"
   },
   "engines": {
     "node": "12.x"

public/main.js

@@ -11,8 +11,8 @@ var app = new Vue({
           { urls: 'stun:stun.snikket.freeddns.org:3478' },
           {
             urls: 'turn:turn.snikket.freeddns.org:3478',
-            username: 'guest',
+            username: window.TURN_USER_SKT,
-            credential: 'somepassword'
+            credential: window.TURN_PW_SKT
           }
         ],
         'sdpSemantics': 'unified-plan',

server.js

@@ -12,10 +12,15 @@ const app = express();
 // make all the files in 'public' available
 // https://expressjs.com/en/starter/static-files.html
 app.use(express.static("public"));
+app.set('view engine', 'ejs');
 
 // https://expressjs.com/en/starter/basic-routing.html
 app.get("/", (request, response) => {
-  response.sendFile(__dirname + "/public/index.html");
+  // response.sendFile(__dirname + "/public/index.html");
+  response.render('index', {
+    TURN_USER_SKT: "a",
+    TURN_PW_SKT: "b"
+  });
 });
 
 // listen for requests :)

shrinkwrap.yaml

@@ -1,4 +1,5 @@
 dependencies:
+  ejs: 3.1.5
   express: 4.17.1
   peer: 0.5.3
 packages:
@@ -86,6 +87,14 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+  /ansi-styles/3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+    dev: false
+    engines:
+      node: '>=4'
+    resolution:
+      integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
   /ansi-styles/4.2.1:
     dependencies:
       '@types/color-name': 1.1.1
@@ -99,6 +108,14 @@ packages:
     dev: false
     resolution:
       integrity: sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+  /async/0.9.2:
+    dev: false
+    resolution:
+      integrity: sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
+  /balanced-match/1.0.0:
+    dev: false
+    resolution:
+      integrity: sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
   /body-parser/1.19.0:
     dependencies:
       bytes: 3.1.0
@@ -116,6 +133,13 @@ packages:
       node: '>= 0.8'
     resolution:
       integrity: sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
+  /brace-expansion/1.1.11:
+    dependencies:
+      balanced-match: 1.0.0
+      concat-map: 0.0.1
+    dev: false
+    resolution:
+      integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   /bytes/3.1.0:
     dev: false
     engines:
@@ -128,6 +152,16 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+  /chalk/2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: false
+    engines:
+      node: '>=4'
+    resolution:
+      integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
   /cliui/6.0.0:
     dependencies:
       string-width: 4.2.0
@@ -136,6 +170,12 @@ packages:
     dev: false
     resolution:
       integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  /color-convert/1.9.3:
+    dependencies:
+      color-name: 1.1.3
+    dev: false
+    resolution:
+      integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
   /color-convert/2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -144,10 +184,18 @@ packages:
       node: '>=7.0.0'
     resolution:
       integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  /color-name/1.1.3:
+    dev: false
+    resolution:
+      integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
   /color-name/1.1.4:
     dev: false
     resolution:
       integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+  /concat-map/0.0.1:
+    dev: false
+    resolution:
+      integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
   /content-disposition/0.5.3:
     dependencies:
       safe-buffer: 5.1.2
@@ -207,6 +255,15 @@ packages:
     dev: false
     resolution:
       integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+  /ejs/3.1.5:
+    dependencies:
+      jake: 10.8.2
+    dev: false
+    engines:
+      node: '>=0.10.0'
+    hasBin: true
+    resolution:
+      integrity: sha512-dldq3ZfFtgVTJMLjOe+/3sROTzALlL9E34V4/sDtUd/KlBSS0s6U1/+WPE1B4sj9CXHJpL1M6rhNJnc9Wbal9w==
   /emoji-regex/8.0.0:
     dev: false
     resolution:
@@ -221,6 +278,12 @@ packages:
     dev: false
     resolution:
       integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+  /escape-string-regexp/1.0.5:
+    dev: false
+    engines:
+      node: '>=0.8.0'
+    resolution:
+      integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
   /etag/1.8.1:
     dev: false
     engines:
@@ -264,6 +327,12 @@ packages:
       node: '>= 0.10.0'
     resolution:
       integrity: sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
+  /filelist/1.0.1:
+    dependencies:
+      minimatch: 3.0.4
+    dev: false
+    resolution:
+      integrity: sha512-8zSK6Nu0DQIC08mUC46sWGXi+q3GGpKydAG36k+JDba6VRpkevvOWUW5a/PhShij4+vHT9M+ghgG7eM+a9JDUQ==
   /finalhandler/1.1.2:
     dependencies:
       debug: 2.6.9
@@ -305,6 +374,12 @@ packages:
       node: 6.* || 8.* || >= 10.*
     resolution:
       integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
+  /has-flag/3.0.0:
+    dev: false
+    engines:
+      node: '>=4'
+    resolution:
+      integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
   /http-errors/1.7.2:
     dependencies:
       depd: 1.1.2
@@ -357,6 +432,16 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+  /jake/10.8.2:
+    dependencies:
+      async: 0.9.2
+      chalk: 2.4.2
+      filelist: 1.0.1
+      minimatch: 3.0.4
+    dev: false
+    hasBin: true
+    resolution:
+      integrity: sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==
   /locate-path/5.0.0:
     dependencies:
       p-locate: 4.1.0
@@ -402,6 +487,12 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+  /minimatch/3.0.4:
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: false
+    resolution:
+      integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
   /ms/2.0.0:
     dev: false
     resolution:
@@ -598,6 +689,14 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  /supports-color/5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+    dev: false
+    engines:
+      node: '>=4'
+    resolution:
+      integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   /toidentifier/1.0.0:
     dev: false
     engines:
@@ -694,5 +793,6 @@ registry: 'https://registry.npmjs.org/'
 shrinkwrapMinorVersion: 9
 shrinkwrapVersion: 3
 specifiers:
+  ejs: ^3.1.5
   express: ^4.17.1
   peer: ^0.5.3

views/index.ejs

@@ -0,0 +1,131 @@
+<!-- This is a static file -->
+<!-- served from your routes in server.js -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width">
+    <meta name="description" content="Yet Another Simple WebRTC Video Chat" />
+    <script>
+    window.TURN_USER_SKT = <%TURN_USER_SKT%>;
+    window.TURN_PW_SKT = <%TURN_PW_SKT%>;
+    </script>
+    <title>YASWVC</title>
+
+    <link
+      id="favicon"
+      rel="icon"
+      href="https://glitch.com/edit/favicon-app.ico"
+      type="image/x-icon"
+    />
+    <!-- import the webpage's stylesheet -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="style.css" />
+
+    <!-- import libraries -->
+    <script src="/lib/peerjs.js"></script>
+    <!-- development version, includes helpful console warnings -->
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+    <!-- import the webpage's client-side javascript file -->
+    <script src="main.js" type="module"></script>
+  </head>
+  <body class="bg-dark text-white">
+    <!-- Image and text -->
+    <nav class="navbar navbar-dark bg-dark">
+      <a class="navbar-brand" href="#" style="margin: 0 auto;">
+        <img
+          src="https://glitch.com/edit/favicon-app.ico"
+          width="30"
+          height="30"
+          class="d-inline-block align-top"
+          alt=""
+          loading="lazy"
+        />
+        <span><strong>YASWVC</strong><span class="d-none d-md-inline-block"> - Yet Another Simple WebRTC Video Chat</span></span
+        >
+      </a>
+    </nav>
+    <div id="app" class="container pt-3">
+      <div class="row">
+        <!-- self -->
+        <div class="col-6">
+          <div class="card text-dark">
+            <video id="localVideo" class="card-img-top" autoplay muted></video>
+            <div class="card-body">
+              <details>
+                <summary class="card-title">It'se me!</summary>
+                <!-- audio source -->
+                <div class="form-group">
+                  <label for="audioSource">Audio input source: </label>
+                  <select id="audioSource" v-on:change="start" class="form-control"></select>
+                </div>
+                <!-- audio output -->
+                <div class="form-group">
+                  <label for="audioOutput">Audio output destination: </label>
+                  <select id="audioOutput" v-on:change="changeAudioDestination" class="form-control"></select>
+                </div>
+                <!-- video source -->
+                <div class="form-group">
+                  <label for="videoSource">Video source: </label>
+                  <select id="videoSource" v-on:change="start" class="form-control"></select>
+                </div>
+              </details> 
+            </div>
+          </div>
+        </div>
+        <!-- control -->
+        <div class="col-6">
+          <div class="card text-dark">
+            <div class="card-body">
+              <h5 class="card-title">Control</h5>
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <button v-on:click="copyToClipboard('#peerId')" class="btn btn-outline-secondary" type="button">Copy</button>
+                </div>
+                <input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled>
+              </div>
+              <hr> 
+              <input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
+              <br>
+              <button class="btn btn-sm btn-success" v-on:click="connectToPeer($refs.connectPeer.value);$refs.connectPeer.value = '';">
+                Connect
+              </button>
+              <button class="btn btn-sm btn-danger" v-on:click="hangUp()">
+                Disconnect
+              </button>
+              <hr>  
+              <div class="messages mt-1" style="min-height:30px;border:1px solid lightgrey;border-radius:.25rem;"></div>
+              <br>
+              <div class="row">
+                <div class="col-12 col-sm-10">
+                  <input type="text" v-model="chatInput" class="form-control">
+                </div>
+                <div class="col-12 col-sm-2">
+                  <div class="btn btn-primary float-right" v-on:click="sendMessage()">
+                    Send
+                  </div>
+                </div>  
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- peers -->
+      <div class="row mt-3">        
+        <!-- peer -->
+        <div v-for="call in calls" class="col-6">
+          <div class="card text-dark">
+            <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>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="text-center mt-3">Made with <a href="https://glitch.com" target="_blank">Glitch</a>!</footer>
+  </body>
+</html>