diff --git a/public/main.js b/public/main.js
index d03ee82..59b7645 100644
--- a/public/main.js
+++ b/public/main.js
@@ -5,16 +5,40 @@ var app = new Vue({
       host: '/',
       path: '/peerjs/myapp'
     }),
+    stream: null,
   },
   methods: {
-    logMessage: (message) => {
+    logMessage: function(message) {
       let newMessage = document.createElement('div');
       newMessage.innerText = message;
-      messagesEl.appendChild(newMessage);
+      document.querySelector('.messages').appendChild(newMessage);
     },
-    renderVideo: (stream, selector = '#remoteVideo') => {
+    renderVideo:function(stream, selector = '#remoteVideo') {
       document.querySelector(selector).srcObject = stream;
     },
+    connectToPeer: function() {
+      let peerId = this.peer.id;
+      this.logMessage(`Connecting to ${peerId}...`);
+
+      let conn = this.peer.connect(peerId);
+      conn.on('data', (data) => {
+        this.logMessage(`received: ${data}`);
+      });
+      conn.on('open', () => {
+        conn.send('hi!');
+      });
+
+      let call = this.peer.call(this.peerId, this.stream);
+      call.on('stream', this.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);
+      //   });
+    },
     listenForPeerEvents: function () {
       this.peer.on('open', (id) => {
         this.logMessage('My peer ID is: ' + id);
@@ -50,7 +74,7 @@ var app = new Vue({
         call.on('stream', this.renderVideo);
       });
     },
-    function gotDevices(deviceInfos) {
+    gotDevices: function gotDevices(deviceInfos) {
       // Handles being called several times to update labels. Preserve values.
       const values = selectors.map(select => select.value);
       selectors.forEach(select => {
@@ -81,60 +105,58 @@ var app = new Vue({
         }
       });
     },
-  // 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);
-  }
+    // 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.
+              audioOutputSelect.selectedIndex = 0;
+            });
+      } else {
+        console.warn('Browser does not support output device selection.');
+      }
+    },
+    changeAudioDestination: function changeAudioDestination() {
+      const audioDestination = audioOutputSelect.value;
+      attachSinkId(videoElement, audioDestination);
+    },
+    gotStream: function gotStream(stream) {
+      this.stream = stream; // make stream available to console
+      videoElement.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 = 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(this.gotDevices).catch(this.handleError);
+    },
   },
   mounted() {
     console.log('VUE is alive!');
+    navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);
+    this.start();
   }
 });
 
@@ -207,29 +229,29 @@ var app = new Vue({
 // });
 
 // Initiate outgoing connection
-let connectToPeer = () => {
-  let peerId = peerIdEl.value;
-  logMessage(`Connecting to ${peerId}...`);
+// 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 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 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})