💠💵 Checkpoint

./public/main.js:5975361/256 ./views/index.ejs:5975361/2334
🌛🏙 Checkpoint
2026-01-12 15:18:11 +00:00 · 2020-09-11 22:53:22 +00:00 · 2020-09-11 22:41:28 +00:00 · 2020-09-11 22:29:50 +00:00 · 2020-09-11 22:17:44 +00:00 · 2020-09-11 21:08:35 +00:00
6 changed files with 255 additions and 12 deletions
--- a/package.json
+++ b/package.json
@ -8,7 +8,9 @@
  },
  "dependencies": {
    "express": "^4.17.1",
-    "peer": "^0.5.3"
+    "peer": "^0.5.3",
+    "ejs": "^3.1.5",
+    "dotenv": "^8.2.0"
  },
  "engines": {
    "node": "12.x"
--- a/public/main.js
+++ b/public/main.js
@ -8,15 +8,11 @@ var app = new Vue({
      path: '/peerjs/myapp',
      config: {
        'iceServers': [
-          { urls: 'stun:stun.l.google.com:19302' },
-          { urls: 'stun:stun.stunprotocol.org:3478' },
-          { urls: 'stun:stun.sipnet.net:3478' },
-          { urls: 'stun:stun.ideasip.com:3478' },
-          { urls: 'stun:stun.iptel.org:3478' },
+          { urls: 'stun:stun.snikket.freeddns.org:3478' },
          {
-            urls: 'turn:161.35.211.133:3478',
-            username: 'guest',
-            credential: 'somepassword'
+            urls: 'turn:turn.snikket.freeddns.org:3478',
+            username: window.TURN_USER,
+            credential: window.TURN_PW
          }
        ],
        'sdpSemantics': 'unified-plan',
--- a/public/index.html
+++ b/public/index.html
--- a/server.js
+++ b/server.js
@ -1,21 +1,26 @@
 // server.js
 // where your node app starts
+require('dotenv').config();

 // we've started you off with Express (https://expressjs.com/)
 // but feel free to use whatever libraries or frameworks you'd like through `package.json`.
 const express = require("express");
-
 const { ExpressPeerServer } = require("peer");
-
 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: process.env.TURN_USER,
+    TURN_PW: process.env.TURN_PW,
+    TURN_URL: process.env.TURN_URL
+  });
 });

 // listen for requests :)
--- a/shrinkwrap.yaml
+++ b/shrinkwrap.yaml
@ -1,4 +1,6 @@
 dependencies:
+  dotenv: 8.2.0
+  ejs: 3.1.5
  express: 4.17.1
  peer: 0.5.3
 packages:
@ -86,6 +88,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 +109,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 +134,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 +153,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 +171,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 +185,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
@ -203,10 +252,25 @@ packages:
    dev: false
    resolution:
      integrity: sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+  /dotenv/8.2.0:
+    dev: false
+    engines:
+      node: '>=8'
+    resolution:
+      integrity: sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
  /ee-first/1.1.1:
    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 +285,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 +334,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 +381,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 +439,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 +494,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 +696,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 +800,7 @@ registry: 'https://registry.npmjs.org/'
 shrinkwrapMinorVersion: 9
 shrinkwrapVersion: 3
 specifiers:
+  dotenv: ^8.2.0
+  ejs: ^3.1.5
  express: ^4.17.1
  peer: ^0.5.3
--- a/views/index.ejs
+++ b/views/index.ejs
@ -0,0 +1,132 @@
+<!-- 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 = "<%=TURN_USER%>";
+      window.TURN_PW = "<%=TURN_PW%>";
+      window.TURN_URL = "<%=TURN_URL%>";
+    </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>
Author	SHA1	Message	Date
Glitch (peerjs-video)	ad8d5bbc75	💠💵 Checkpoint ./public/main.js:5975361/256 ./views/index.ejs:5975361/2334	2020-09-11 22:53:22 +00:00
Glitch (peerjs-video)	9bf2042449	🌛🏙 Checkpoint ./views/index.ejs:5975361/314 ./server.js:5975361/214 ./package.json:5975361/798 ./public/main.js:5975361/45	2020-09-11 22:41:28 +00:00
Glitch (peerjs-video)	61d62d6426	☂️🐪 Checkpoint ./package.json:5975361/753 ./server.js:5975361/152 ./views/index.ejs:5975361/5530 ./public/main.js:5975361/69	2020-09-11 22:29:50 +00:00
Glitch (peerjs-video)	414e65a385	🐜🌅 Checkpoint ./public/main.js:5975361/388	2020-09-11 22:17:44 +00:00
Glitch (peerjs-video)	abda363a8c	🐛🎢 Checkpoint ./public/main.js:5975361/2716 ./public/index.html:5975361/146	2020-09-11 21:08:35 +00:00
Glitch (peerjs-video)	198d95b737	🚨🚩 Checkpoint ./public/main.js:5975361/2682 ./public/index.html:5975361/166	2020-09-11 20:57:29 +00:00