🚣🎷 Checkpoint

./public/main.js:5975361/1553

public/index.html

@@ -33,19 +33,18 @@
     <nav class="navbar navbar-dark bg-dark">
       <a class="navbar-brand" href="#" style="margin: 0 auto;">
         <img
-          src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg"
+          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> - Yet Another Simple WebRTC Video Chat</span
+        <span><strong>YASWVC</strong><span class="d-none d-md-inline-block"> - Yet Another Simple WebRTC Video Chat</span></span
         >
       </a>
     </nav>
-    <div class="container pt-3">
+    <div id="app" class="container pt-3">
       <div class="row">
         <!-- self -->
         <div class="col-6">
@@ -57,17 +56,17 @@
                 <!-- audio source -->
                 <div class="form-group">
                   <label for="audioSource">Audio input source: </label>
-                  <select id="audioSource" class="form-control"></select>
+                  <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" class="form-control"></select>
+                  <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" class="form-control"></select>
+                  <select id="videoSource" v-on:change="start" class="form-control"></select>
                 </div>
               </details> 
             </div>
@@ -80,17 +79,17 @@
               <h5 class="card-title">Control</h5>
               <div class="input-group mb-3">
                 <div class="input-group-prepend">
-                  <button class="btn btn-outline-secondary" type="button">Copy</button>
+                  <button v-on:click="copyToClipboard('#peerId')" class="btn btn-outline-secondary" type="button">Copy</button>
                 </div>
-                <input id="my-peer-id" type="text" class="form-control" placeholder="my-peer-id">
+                <input id="peerId" v-model="peer.id" type="text" class="form-control" placeholder="my-peer-id" disabled>
               </div>
               <hr> 
-              <input type="text" id="connect-to-peer" class="form-control" placeholder="paste-peer-id-here">
+              <input type="text" ref="connectPeer" class="form-control" placeholder="paste-peer-id-here">
               <br>
-              <button class="btn btn-sm btn-success" onclick="connectToPeer()">
+              <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" onclick="disconnectFromPeer()">
+              <button class="btn btn-sm btn-danger" v-on:click="hangUp()">
                 Disconnect
               </button>
               <div class="messages"></div>
@@ -101,11 +100,11 @@
       <!-- peers -->
       <div class="row mt-3">        
         <!-- peer -->
-        <div class="col-6">
+        <div v-for="call in calls" class="col-6">
           <div class="card text-dark">
-            <video id="remoteVideo" class="card-img-top" autoplay></video>
+            <video v-bind:id="'video-'+call.connectionId" class="card-img-top" autoplay></video>
             <div class="card-body">
-              <h5 class="card-title">Remote</h5>
+              <h5 class="card-title">{{call.peer}}</h5>
             </div>
           </div>
         </div>

public/main.js

@@ -1,137 +1,110 @@
-// client-side js, loaded by index.html
-// run by the browser each time the page is loaded
-
-let Peer = window.Peer;
-
-let messagesEl = document.querySelector('.messages');
-let peerIdEl = document.querySelector('#connect-to-peer');
-let videoEl = document.querySelector('#remoteVideo');
-
-let logMessage = (message) => {
-  let newMessage = document.createElement('div');
-  newMessage.innerText = message;
-  messagesEl.appendChild(newMessage);
-};
-
-let renderVideo = (stream, selector = '#remoteVideo') => {
-  document.querySelector(selector).srcObject = stream;
-};
-
-// Register with the peer server
-let peer = new Peer({
+var Vue = window.Vue;
+var Peer = window.Peer;
+var app = new Vue({
+  el: '#app',
+  data: {
+    peer: new Peer(localStorage.getItem('yaswvc-peerId'), {
       host: '/',
       path: '/peerjs/myapp'
+    }),
+    stream: null,
+    calls: [],
+    connections: [],
+  },
+  methods: {
+    logMessage: function(message) {
+      let newMessage = document.createElement('div');
+      newMessage.innerText = message;
+      document.querySelector('.messages').appendChild(newMessage);
+    },
+    renderVideo:function(stream, selector = '#remoteVideo') {
+      console.log('renderVideo', {stream, selector});
+      document.querySelector(selector).srcObject = stream;
+    },
+    connectToPeer: function(peerId) {
+      this.logMessage(`Connecting to ${peerId}...`);
+
+      let conn = this.peer.connect(peerId);
+      this.connections.push(conn);
+      console.log('[Out] connected', conn);
+      conn.on('data', (data) => {
+        this.logMessage(`${conn.peer}: ${data}`);
       });
-peer.on('open', (id) => {
-  logMessage('My peer ID is: ' + id);
+      conn.on('open', () => {
+        conn.send('hi!');
       });
-peer.on('error', (error) => {
+      conn.on('close', () => {
+        this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
+        this.calls = this.calls.filter(c => c.peer !== conn.peer);
+        this.logMessage(`${conn.peer} closed connection.`);
+        console.log(`[Out] Connection closed with ${conn.peer}.`);
+      });
+      conn.on('error', () => {
+        this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
+        this.calls = this.calls.filter(c => c.peer !== conn.peer);
+        console.warn(`[Out] Connection error ${conn.connectionId} with ${conn.peer}.`);
+      });
+      
+      let call = this.peer.call(peerId, this.stream);
+      call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
+      call.on('close', () => {
+        console.log(`[OUT] Call with ${peerId} was closed.`);
+        this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
+      });
+      this.calls.push(call);
+    },
+    hangUp: function() {
+      this.calls.forEach(c => {
+        c.close();
+      });
+      this.connections.forEach(c => {
+        c.close();
+      });
+    },
+    listenForPeerEvents: function () {
+      this.peer.on('open', (id) => {
+        localStorage.setItem('yaswvc-peerId', id);
+      });
+      this.peer.on('error', (error) => {
         console.error(error);
       });
 
       // Handle incoming data connection
-peer.on('connection', (conn) => {
-  logMessage('incoming peer connection!');
-  console.log('incoming peer connection!', conn);
+      this.peer.on('connection', (conn) => {
+        this.connections.push(conn);
+        console.log('[INC] incoming peer connection!', conn);
         conn.on('data', (data) => {
-    logMessage(`received: ${data}`);
+          this.logMessage(`${conn.peer}: ${data}`);
         });
         conn.on('open', () => {
           conn.send('hello!');
         });
         conn.on('close', () => {
-    logMessage('Connection closed.');
+          this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
+          this.calls = this.calls.filter(c => c.peer !== conn.peer);
+          this.logMessage(`${conn.peer} closed connection.`);
+          console.log('[Inc] closed conenction', conn)
+        });
+        conn.on('error', () => {
+          this.connections = this.connections.filter(c => c.connectionId === conn.connectionId);
+          console.warn(`[Inc] Connection error ${conn.connectionId} with ${conn.peer}.`);
         });
-  conn.on('error', (error) => {
-    console.error('Error:', error);
-    logMessage('Error'+error);
-  })
       });
 
       // Handle incoming voice/video connection
-peer.on('call', (call) => {
+      this.peer.on('call', (call) => {
         console.log('INCOMING CALL', call);
-  call.answer(window.stream); // Answer the call with an A/V stream.
-  renderVideo(window.stream, '#localVideo');
-  call.on('stream', renderVideo);
-  // navigator.mediaDevices.getUserMedia({video: true, audio: true})
-  //   .then((stream) => {
-  //     call.answer(stream); // Answer the call with an A/V stream.
-  //     renderVideo(stream, '#localVideo');
-  //     call.on('stream', renderVideo);
-  //   })
-  //   .catch((err) => {
-  //     console.error('Failed to get local stream', err);
-  //   });
+        call.answer(this.stream); // Answer the call with an A/V stream.
+        call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
+        call.on('close', () => {
+          console.log(`[INC] Call with ${call.peer} was closed.`);
+          this.calls = this.calls.filter(c => c.connectionId === call.connectionId);
         });
-
-// Initiate outgoing connection
-let connectToPeer = () => {
-  let peerId = peerIdEl.value;
-  logMessage(`Connecting to ${peerId}...`);
-  
-  let conn = peer.connect(peerId);
-  conn.on('data', (data) => {
-    logMessage(`received: ${data}`);
+        this.calls.push(call);
       });
-  conn.on('open', () => {
-    conn.send('hi!');
-  });
-  
-  let call = peer.call(peerId, window.stream);
-  call.on('stream', renderVideo);
-  // navigator.mediaDevices.getUserMedia({video: true, audio: true})
-  //   .then((stream) => {
-  //     let call = peer.call(peerId, stream);
-  //     call.on('stream', renderVideo);
-  //   })
-  //   .catch((err) => {
-  //     logMessage('Failed to get local stream', err);
-  //   });
-};
-
-let startLocalStream = () => {
-  navigator.mediaDevices.getUserMedia({video: true, audio: true})
-    .then((localStream) => {
-      console.log('LOCAL STREAM', localStream);
-      renderVideo(localStream, '#localVideo');
-      window.stream = localStream;
-    })
-    .catch((err) => {
-      console.log('Failed to get local stream', err);
-      logMessage('Failed to get local stream', err);
-    });
-}
-// startLocalStream();
-
-let disconnectFromPeer = () => {
-  
-}
-
-window.disconnectFromPeer = disconnectFromPeer;
-window.connectToPeer = connectToPeer;
-
-
-  
-/*
-*  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
-*
-*  Use of this source code is governed by a BSD-style license
-*  that can be found in the LICENSE file in the root of the source
-*  tree.
-*/
-
-// 'use strict';
-
-const videoElement = document.querySelector('#localVideo');
-const audioInputSelect = document.querySelector('select#audioSource');
-const audioOutputSelect = document.querySelector('select#audioOutput');
-const videoSelect = document.querySelector('select#videoSource');
-const selectors = [audioInputSelect, audioOutputSelect, videoSelect];
-
-audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
-
-function gotDevices(deviceInfos) {
+    },
+    gotDevices: function gotDevices(deviceInfos) {
+      const selectors = [document.querySelector('select#audioSource'), document.querySelector('select#audioOutput'), document.querySelector('select#videoSource')];
       // Handles being called several times to update labels. Preserve values.
       const values = selectors.map(select => select.value);
       selectors.forEach(select => {
@@ -144,14 +117,14 @@ function gotDevices(deviceInfos) {
         const option = document.createElement('option');
         option.value = deviceInfo.deviceId;
         if (deviceInfo.kind === 'audioinput') {
-      option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
-      audioInputSelect.appendChild(option);
+          option.text = deviceInfo.label || `microphone ${document.querySelector('select#audioSource').length + 1}`;
+          document.querySelector('select#audioSource').appendChild(option);
         } else if (deviceInfo.kind === 'audiooutput') {
-      option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
-      audioOutputSelect.appendChild(option);
+          option.text = deviceInfo.label || `speaker ${document.querySelector('select#audioOutput').length + 1}`;
+          document.querySelector('select#audioOutput').appendChild(option);
         } else if (deviceInfo.kind === 'videoinput') {
-      option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
-      videoSelect.appendChild(option);
+          option.text = deviceInfo.label || `camera ${document.querySelector('select#videoSource').length + 1}`;
+          document.querySelector('select#videoSource').appendChild(option);
         } else {
           console.log('Some other kind of source/device: ', deviceInfo);
         }
@@ -161,12 +134,9 @@ function gotDevices(deviceInfos) {
           select.value = values[selectorIndex];
         }
       });
-}
-
-navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
-
+    },
     // Attach audio output device to video element using device/sink ID.
-function attachSinkId(element, sinkId) {
+    attachSinkId :function attachSinkId(element, sinkId) {
       if (typeof element.sinkId !== 'undefined') {
         element.setSinkId(sinkId)
             .then(() => {
@@ -179,47 +149,52 @@ function attachSinkId(element, sinkId) {
               }
               console.error(errorMessage);
               // Jump back to first output device in the list as it's the default.
-          audioOutputSelect.selectedIndex = 0;
+              document.querySelector('select#audioOutput').selectedIndex = 0;
             });
       } else {
         console.warn('Browser does not support output device selection.');
       }
-}
-
-function changeAudioDestination() {
-  const audioDestination = audioOutputSelect.value;
-  attachSinkId(videoElement, audioDestination);
-}
-
-function gotStream(stream) {
-  window.stream = stream; // make stream available to console
-  videoElement.srcObject = stream;
+    },
+    changeAudioDestination: function changeAudioDestination() {
+      const audioDestination = document.querySelector('select#audioOutput').value;
+      this.attachSinkId(document.querySelector('#localVideo'), audioDestination);
+    },
+    gotStream: function gotStream(stream) {
+      this.stream = stream; // make stream available to console
+      document.querySelector('#localVideo').srcObject = stream;
       // Refresh button list in case labels have become available
       return navigator.mediaDevices.enumerateDevices();
-}
-
-function handleError(error) {
+    },
+    handleError: function handleError(error) {
       console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
-}
-
-function start() {
-  if (window.stream) {
-    window.stream.getTracks().forEach(track => {
+    },
+    start: function start() {
+      if (this.stream) {
+        this.stream.getTracks().forEach(track => {
           track.stop();
         });
       }
-  const audioSource = audioInputSelect.value;
-  const videoSource = videoSelect.value;
+      const audioSource = document.querySelector('select#audioSource').value;
+      const videoSource = document.querySelector('select#videoSource').value;
       const constraints = {
         audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
         video: {deviceId: videoSource ? {exact: videoSource} : undefined}
       };
-  navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
+      navigator.mediaDevices.getUserMedia(constraints).then(this.gotStream).then(this.gotDevices).catch(this.handleError);
+    },
+    copyToClipboard: function(selector) {
+      let element = document.querySelector(selector);
+      element.select();
+      element.setSelectionRange(0, 99999); /*For mobile devices*/
+      document.execCommand("copy");
+      alert("Copied the text: " + element.value);
     }
-
-audioInputSelect.onchange = start;
-audioOutputSelect.onchange = changeAudioDestination;
-
-videoSelect.onchange = start;
-
-start();
+  },
+  mounted() {
+    console.log('VUE is alive!');
+    this.listenForPeerEvents();
+    navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);
+    this.start();
+    document.querySelector('select#audioOutput').disabled = !('sinkId' in HTMLMediaElement.prototype);
+  }
+});