🚣🎷 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
+        <span><strong>YASWVC</strong><span class="d-none d-md-inline-block"> - Yet Another Simple WebRTC Video Chat</span></span
-          ><strong>YASWVC</strong> - Yet Another Simple WebRTC Video Chat</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,225 +1,200 @@
-// client-side js, loaded by index.html
+var Vue = window.Vue;
-// run by the browser each time the page is loaded
+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 Peer = window.Peer;
+      let conn = this.peer.connect(peerId);
+      this.connections.push(conn);
+      console.log('[Out] connected', conn);
+      conn.on('data', (data) => {
+        this.logMessage(`${conn.peer}: ${data}`);
+      });
+      conn.on('open', () => {
+        conn.send('hi!');
+      });
+      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 messagesEl = document.querySelector('.messages');
+      let call = this.peer.call(peerId, this.stream);
-let peerIdEl = document.querySelector('#connect-to-peer');
+      call.on('stream', (stream) => this.renderVideo(stream, '#video-'+call.connectionId));
-let videoEl = document.querySelector('#remoteVideo');
+      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);
+      });
 
-let logMessage = (message) => {
+      // Handle incoming data connection
-  let newMessage = document.createElement('div');
+      this.peer.on('connection', (conn) => {
-  newMessage.innerText = message;
+        this.connections.push(conn);
-  messagesEl.appendChild(newMessage);
+        console.log('[INC] incoming peer connection!', conn);
-};
+        conn.on('data', (data) => {
-
+          this.logMessage(`${conn.peer}: ${data}`);
-let renderVideo = (stream, selector = '#remoteVideo') => {
-  document.querySelector(selector).srcObject = stream;
-};
-
-// Register with the peer server
-let peer = new Peer({
-  host: '/',
-  path: '/peerjs/myapp'
-});
-peer.on('open', (id) => {
-  logMessage('My peer ID is: ' + id);
-});
-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);
-  conn.on('data', (data) => {
-    logMessage(`received: ${data}`);
-  });
-  conn.on('open', () => {
-    conn.send('hello!');
-  });
-  conn.on('close', () => {
-    logMessage('Connection closed.');
-  });
-  conn.on('error', (error) => {
-    console.error('Error:', error);
-    logMessage('Error'+error);
-  })
-});
-
-// Handle incoming voice/video connection
-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);
-  //   });
-});
-
-// 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}`);
-  });
-  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) {
-  // Handles being called several times to update labels. Preserve values.
-  const values = selectors.map(select => select.value);
-  selectors.forEach(select => {
-    while (select.firstChild) {
-      select.removeChild(select.firstChild);
-    }
-  });
-  for (let i = 0; i !== deviceInfos.length; ++i) {
-    const deviceInfo = deviceInfos[i];
-    const option = document.createElement('option');
-    option.value = deviceInfo.deviceId;
-    if (deviceInfo.kind === 'audioinput') {
-      option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
-      audioInputSelect.appendChild(option);
-    } else if (deviceInfo.kind === 'audiooutput') {
-      option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
-      audioOutputSelect.appendChild(option);
-    } else if (deviceInfo.kind === 'videoinput') {
-      option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
-      videoSelect.appendChild(option);
-    } else {
-      console.log('Some other kind of source/device: ', deviceInfo);
-    }
-  }
-  selectors.forEach((select, selectorIndex) => {
-    if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
-      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) {
-  if (typeof element.sinkId !== 'undefined') {
-    element.setSinkId(sinkId)
-        .then(() => {
-          console.log(`Success, audio output device attached: ${sinkId}`);
-        })
-        .catch(error => {
-          let errorMessage = error;
-          if (error.name === 'SecurityError') {
-            errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
-          }
-          console.error(errorMessage);
-          // Jump back to first output device in the list as it's the default.
-          audioOutputSelect.selectedIndex = 0;
         });
-  } else {
+        conn.on('open', () => {
-    console.warn('Browser does not support output device selection.');
+          conn.send('hello!');
+        });
+        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('[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}.`);
+        });
+      });
+
+      // Handle incoming voice/video connection
+      this.peer.on('call', (call) => {
+        console.log('INCOMING CALL', call);
+        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);
+        });
+        this.calls.push(call);
+      });
+    },
+    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 => {
+        while (select.firstChild) {
+          select.removeChild(select.firstChild);
+        }
+      });
+      for (let i = 0; i !== deviceInfos.length; ++i) {
+        const deviceInfo = deviceInfos[i];
+        const option = document.createElement('option');
+        option.value = deviceInfo.deviceId;
+        if (deviceInfo.kind === 'audioinput') {
+          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 ${document.querySelector('select#audioOutput').length + 1}`;
+          document.querySelector('select#audioOutput').appendChild(option);
+        } else if (deviceInfo.kind === 'videoinput') {
+          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);
+        }
+      }
+      selectors.forEach((select, selectorIndex) => {
+        if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
+          select.value = values[selectorIndex];
+        }
+      });
+    },
+    // Attach audio output device to video element using device/sink ID.
+    attachSinkId :function attachSinkId(element, sinkId) {
+      if (typeof element.sinkId !== 'undefined') {
+        element.setSinkId(sinkId)
+            .then(() => {
+              console.log(`Success, audio output device attached: ${sinkId}`);
+            })
+            .catch(error => {
+              let errorMessage = error;
+              if (error.name === 'SecurityError') {
+                errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
+              }
+              console.error(errorMessage);
+              // Jump back to first output device in the list as it's the default.
+              document.querySelector('select#audioOutput').selectedIndex = 0;
+            });
+      } else {
+        console.warn('Browser does not support output device selection.');
+      }
+    },
+    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();
+    },
+    handleError: function handleError(error) {
+      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
+    },
+    start: function start() {
+      if (this.stream) {
+        this.stream.getTracks().forEach(track => {
+          track.stop();
+        });
+      }
+      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(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);
+    }
+  },
+  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);
   }
-}
+});
-
-function changeAudioDestination() {
-  const audioDestination = audioOutputSelect.value;
-  attachSinkId(videoElement, audioDestination);
-}
-
-function gotStream(stream) {
-  window.stream = stream; // make stream available to console
-  videoElement.srcObject = stream;
-  // Refresh button list in case labels have become available
-  return navigator.mediaDevices.enumerateDevices();
-}
-
-function handleError(error) {
-  console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
-}
-
-function start() {
-  if (window.stream) {
-    window.stream.getTracks().forEach(track => {
-      track.stop();
-    });
-  }
-  const audioSource = audioInputSelect.value;
-  const videoSource = videoSelect.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);
-}
-
-audioInputSelect.onchange = start;
-audioOutputSelect.onchange = changeAudioDestination;
-
-videoSelect.onchange = start;
-
-start();