diff --git a/public/main.js b/public/main.js
index d74d883..d03ee82 100644
--- a/public/main.js
+++ b/public/main.js
@@ -1,7 +1,140 @@
 var app = new Vue({
   el: '#app',
   data: {
-    message: 'Hello Vue!'
+    peer: new Peer({
+      host: '/',
+      path: '/peerjs/myapp'
+    }),
+  },
+  methods: {
+    logMessage: (message) => {
+      let newMessage = document.createElement('div');
+      newMessage.innerText = message;
+      messagesEl.appendChild(newMessage);
+    },
+    renderVideo: (stream, selector = '#remoteVideo') => {
+      document.querySelector(selector).srcObject = stream;
+    },
+    listenForPeerEvents: function () {
+      this.peer.on('open', (id) => {
+        this.logMessage('My peer ID is: ' + id);
+      });
+      this.peer.on('error', (error) => {
+        console.error(error);
+      });
+
+      // Handle incoming data connection
+      this.peer.on('connection', (conn) => {
+        this.logMessage('incoming peer connection!');
+        console.log('incoming peer connection!', conn);
+        conn.on('data', (data) => {
+          this.logMessage(`received: ${data}`);
+        });
+        conn.on('open', () => {
+          conn.send('hello!');
+        });
+        conn.on('close', () => {
+          this.logMessage('Connection closed.');
+        });
+        conn.on('error', (error) => {
+          console.error('Error:', error);
+          this.logMessage('Error'+error);
+        });
+      });
+
+      // Handle incoming voice/video connection
+      this.peer.on('call', (call) => {
+        console.log('INCOMING CALL', call);
+        call.answer(window.stream); // Answer the call with an A/V stream.
+        this.renderVideo(window.stream, '#localVideo');
+        call.on('stream', this.renderVideo);
+      });
+    },
+    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];
+        }
+      });
+    },
+  // 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 {
+      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;
+    // 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);
+  }
+  },
+  mounted() {
+    console.log('VUE is alive!');
   }
 });
 
@@ -9,69 +142,69 @@ var app = new Vue({
 // client-side js, loaded by index.html
 // run by the browser each time the page is loaded
 
-let Peer = window.Peer;
+// let Peer = window.Peer;
 
-let messagesEl = document.querySelector('.messages');
-let peerIdEl = document.querySelector('#connect-to-peer');
-let videoEl = document.querySelector('#remoteVideo');
+// 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 logMessage = (message) => {
+//   let newMessage = document.createElement('div');
+//   newMessage.innerText = message;
+//   messagesEl.appendChild(newMessage);
+// };
 
-let renderVideo = (stream, selector = '#remoteVideo') => {
-  document.querySelector(selector).srcObject = stream;
-};
+// 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);
-});
+// 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 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);
-  //   });
-});
+// // 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 = () => {
@@ -98,26 +231,26 @@ let connectToPeer = () => {
   //   });
 };
 
-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);
-    });
-}
+// 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 = () => {
+// let disconnectFromPeer = () => {
   
-}
+// }
 
-window.disconnectFromPeer = disconnectFromPeer;
-window.connectToPeer = connectToPeer;
+// window.disconnectFromPeer = disconnectFromPeer;
+// window.connectToPeer = connectToPeer;
 
 
   
@@ -139,91 +272,91 @@ 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];
-    }
-  });
-}
+// 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);
+// 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 {
-    console.warn('Browser does not support output device selection.');
-  }
-}
+// // 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 {
+//     console.warn('Browser does not support output device selection.');
+//   }
+// }
 
-function changeAudioDestination() {
-  const audioDestination = audioOutputSelect.value;
-  attachSinkId(videoElement, audioDestination);
-}
+// 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 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 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);
-}
+// 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;