diff --git a/server/server.js b/server/server.js
index f199c8a..fa38161 100644
--- a/server/server.js
+++ b/server/server.js
@@ -111,6 +111,14 @@ io.on('connection', (socket) => {
         // Private message to the user
         io.to(room).emit('privateMessage', { to, privateMessage, from, room })
     })
+
+    // Private message for Signaling PeerConnection
+    socket.on('privateMessagePCSignaling', ({ desc, to, from, room }) => {
+        console.log(`User ${from} sends an offer ${to}`);
+
+        // Private signaling to the user
+        io.to(room).emit('privateMessagePCSignaling', { desc, to, from})
+    })
 })
 
 server.listen(PORT, () => console.log(`Server Listening on port ${PORT}`));
\ No newline at end of file
diff --git a/src/components/ChatDialog.vue b/src/components/ChatDialog.vue
index 750cdee..4b26fff 100644
--- a/src/components/ChatDialog.vue
+++ b/src/components/ChatDialog.vue
@@ -5,37 +5,40 @@
       :md-fullscreen="false"
       :md-click-outside-to-close="false"
     >
-    <div v-if="videoCall" class="chat-dialog__left">
-      <VideoArea></VideoArea>
-    </div>
-    <div class="chat-dialog__right">
-      <div class="chat-dialog__options">
-        <md-button 
-            class="md-icon-button chat-dialog__video" 
-            v-on:click="videoCall = true" 
-            :disabled="showDialog.msg.length === 0">
-          <md-icon>video_call</md-icon>
-        </md-button>
-        <md-button class="md-icon-button chat-dialog__exit" v-on:click="closeChat()">
-          <md-icon>close</md-icon>
-        </md-button>
+      <div v-if="videoCall" class="chat-dialog__left">
+        <VideoArea
+          v-bind:room="showDialog.room"
+          v-bind:to="showDialog.user"
+          v-bind:videoAnswer="videoAsnwer"
+        ></VideoArea>
+      </div>
+      <div class="chat-dialog__right">
+        <div class="chat-dialog__options">
+          <md-button
+            class="md-icon-button chat-dialog__video"
+            v-on:click="showVideoCall()"
+            :disabled="showDialog.msg.length === 0"
+          >
+            <md-icon>video_call</md-icon>
+          </md-button>
+          <md-button class="md-icon-button chat-dialog__exit" v-on:click="closeChat()">
+            <md-icon>close</md-icon>
+          </md-button>
+        </div>
+        <md-dialog-content>
+          <p class="chat-dialog__title">Private chat with {{showDialog.user}}</p>
+          <ChatArea v-bind:messages="showDialog.msg"></ChatArea>
+        </md-dialog-content>
+
+        <md-dialog-actions>
+          <textarea
+            class="chat-dialog__text"
+            v-model="privateMessage"
+            :disabled="showDialog.closed"
+            v-on:keyup.enter="sendPrivateMessage()"
+          ></textarea>
+        </md-dialog-actions>
       </div>
-      <md-dialog-content>
-        <p class="chat-dialog__title">Private chat with {{showDialog.user}}</p> 
-        <ChatArea v-bind:messages="showDialog.msg"></ChatArea>
-      </md-dialog-content>
-
-      <md-dialog-actions>
-        <textarea
-          class="chat-dialog__text"
-          v-model="privateMessage"
-          :disabled="showDialog.closed"
-          v-on:keyup.enter="sendPrivateMessage()"
-        ></textarea>
-      </md-dialog-actions>
-
-    </div>
-
     </md-dialog>
   </div>
 </template>
@@ -43,7 +46,7 @@
 
 <script>
 import ChatArea from "./ChatArea";
-import VideoArea from './VideoArea'
+import VideoArea from "./VideoArea";
 
 export default {
   name: "ChatDialog",
@@ -52,12 +55,58 @@ export default {
     VideoArea
   },
   props: {
-    showDialog: Object,
+    showDialog: Object
+  },
+  sockets: {
+    privateMessagePCSignaling: function({ desc, from, candidate }) {
+      if (from !== this.$store.state.username) {
+        try {
+          if (desc) {
+
+            // If we have an income call
+            if (desc.type === "offer") {
+              //open videochat (maybe ask before?)
+              this.videoAsnwer = {
+                ...this.videoCall,
+                video: true,
+                remoteDesc: desc, 
+                from
+              };
+              this.videoCall = true;
+
+              // If we have a response
+            } else if (desc.type === "answer") {
+              // Set
+              this.videoAsnwer = {
+                ...this.videoAsnwer,
+                remoteDesc: desc
+              };
+
+            } else {
+              console.log("Unsupported SDP type");
+            }
+            
+          }  else if (candidate) {
+              this.videoAsnwer = {
+                ...this.videoAsnwer,
+                candidate
+              }
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      }
+    }
   },
   data: function() {
     return {
       privateMessage: "",
-      videoCall: false
+      videoCall: false,
+      videoAsnwer: {
+        video: undefined,
+        remoteDesc: undefined,
+        candidate: undefined
+      }
     };
   },
   methods: {
@@ -65,7 +114,11 @@ export default {
       this.$emit("close-chat");
     },
     sendPrivateMessage() {
-      console.log(`${this.$store.state.username} want to send a private message to ${this.showDialog.user}`);
+      console.log(
+        `${this.$store.state.username} want to send a private message to ${
+          this.showDialog.user
+        }`
+      );
 
       this.$socket.emit("privateMessage", {
         privateMessage: this.privateMessage,
@@ -75,13 +128,19 @@ export default {
       });
 
       this.privateMessage = "";
+    },
+    showVideoCall() {
+      this.videoCall = true;
+      this.videoAsnwer = {
+        ...this.videoAsnwer,
+        video: false
+      };
     }
   },
   watch: {
     showDialog: function(newVal, oldVal) {
       const val = newVal.chat;
       if (val && val !== oldVal.chat) {
-        
         // Open private chat
         this.$socket.emit("joinPrivateRoom", {
           ...this.$store.state,
@@ -106,9 +165,9 @@ button {
     height: 60px;
     border: 1px solid #8080804a;
   }
-  &__title{
+  &__title {
     text-align: center;
-    font-size: .9rem;
+    font-size: 0.9rem;
     font-style: oblique;
   }
 
@@ -124,14 +183,14 @@ button {
     float: right;
   }
 
-  &__right{
-        display: flex;
+  &__right {
+    display: flex;
     flex-flow: column;
     flex: 1;
     width: 300px;
   }
 
-  &__left{
+  &__left {
     width: 450px;
   }
 }
diff --git a/src/components/VideoArea.vue b/src/components/VideoArea.vue
index 894e338..328ba35 100644
--- a/src/components/VideoArea.vue
+++ b/src/components/VideoArea.vue
@@ -1,42 +1,305 @@
 <template>
   <div class="video">
     <div class="video__partner">
-      <rotate-square5 class="video__spinner"></rotate-square5>
+      <rotate-square5 v-if="!remoteVideo" class="video__spinner"></rotate-square5>
+      <!-- <video v-else id="remoteVideo" class="video__spinner" autoplay :srcObject.prop="remoteVideo"></video> -->
+      <video id="remoteVideo" class="video__spinner" autoplay></video>
     </div>
-    <video id="myVideo" class="video__myself" autoplay :srcObject.prop="myVideo"></video>
-    <!-- <div class="video__myself">myself</div> -->
+    <!-- <video id="localVideo" class="video__myself" autoplay :sr∂cObject.prop="myVideo"></video> -->
+    <video id="localVideo" class="video__myself" autoplay></video>
   </div>
 </template>
 
 
 <script>
 import { RotateSquare5 } from "vue-loading-spinner";
+import { servers } from "./../utils/ICEServers";
+import { log } from "./../utils/logging";
 
 export default {
   name: "VideoArea",
-  props: {},
+  props: {
+    room: String,
+    to: String,
+    videoAnswer: Object
+  },
   components: {
     RotateSquare5
   },
   data: () => ({
+    // videos
     myVideo: undefined,
+    remoteVideo: undefined,
+
+    // Media config
     constraints: {
       audio: true,
       video: true
-    }
+    },
+
+    // local video stream
+    localStream: undefined,
+
+    // STUN ice servers
+    configuration: servers,
+
+    // Peer connection
+    pc: undefined,
+
+    // Offer config
+    offerOptions: {
+      offerToReceiveAudio: 1,
+      offerToReceiveVideo: 1
+    },
+
+    username: ""
   }),
+  // async created() {
+
+  //   this.username = this.$store.state.username
+
+  //   // Peer connection
+  //   // this.pc = new RTCPeerConnection(this.configuration);
+
+  //   // this.pc.ontrack = this.onRemoteTrack.bind(this);
+  //   // this.onIceCandidates();
+
+  //   // The person who call
+  //   if (!this.videoAnswer.video) {
+  //     // Handler of negotiationneeded event to create an offer to the other person
+  //     // this.listenOnNegotiation();
+  //     await this.getUserMedia();
+  //     console.log('after')
+
+  //     // The person who get the call
+  //   } else {
+  //     this.handleAnser();
+  //   }
+  // },
+
   async created() {
-    if ("mediaDevices" in navigator) {
+    this.username = this.$store.state.username;
+
+    // Calling
+    if (!this.videoAnswer.video) {
+      await this.getUserMedia();
+      this.callFriend();
+
+      // Getting the call
+    } else {
+      await this.getUserMedia();
+      this.handleAnser();
+    }
+  },
+  mounted() {
+    this.myVideo = document.getElementById("localVideo");
+    this.remoteVideo = document.getElementById("remoteVideo");
+  },
+  methods: {
+    // async getUserMedia() {
+    //   log('Requesting local video stream');
+
+    //   if ("mediaDevices" in navigator) {
+    //     try {
+    //       // Get camera/audio access
+    //       const stream = await navigator.mediaDevices.getUserMedia(
+    //         this.constraints
+    //       );
+
+    //       log('Received local video stream')
+
+    //       // Add tracks to the connection
+    //       stream.getTracks().forEach(track => this.pc.addTrack(track, stream));
+
+    //       // Add stream to video tag
+    //       //this.myVideo = stream;
+    //       this.myVideo.srcObject = stream;
+    //     } catch (error) {
+    //       console.log(`getUserMedia error: ${error}`);
+    //     }
+    //   }
+    // },
+    async getUserMedia() {
+      log(`Requesting ${this.username} video stream`);
+
+      if ("mediaDevices" in navigator) {
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia(
+            this.constraints
+          );
+          this.myVideo.srcObject = stream;
+          this.localStream = stream;
+          log("Received local video stream");
+        } catch (error) {
+          log(`getUserMedia error: ${error}`);
+        }
+      }
+    },
+    async callFriend() {
+      log(`${this.username} wants to start a call`);
+      this.getAudioVideo();
+      this.createPeerConnection();
+      this.createOffer();
+    },
+
+    getAudioVideo() {
+      const video = this.localStream.getVideoTracks();
+      const audio = this.localStream.getAudioTracks();
+
+      if (video.length > 0) log(`Using video device: ${video[0].label}`);
+      if (audio.length > 0) log(`Using audio device: ${audio[0].label}`);
+    },
+
+    createPeerConnection() {
+      this.pc = new RTCPeerConnection(this.configuration);
+      log(`Created ${this.username} peer connection object`);
+    },
+
+    async createOffer() {
+      log(`${this.username} create an offer: start`);
+      try {
+        const offer = await this.pc.createOffer(this.offerOptions);
+        log(`Offer from ${this.username}\n ${offer.sdp}`);
+
+        log(`${this.username} setLocalDescription: start`);
+        await this.pc.setLocalDescription(offer);
+        log(`${this.username} setLocalDescription: finished`);
+
+        this.sendSignalingMessage(this.pc.localDescription, true);
+      } catch (error) {
+        log(`Error creating the offer from ${this.username}. Error: ${error}`);
+      }
+    },
+
+    async createAnswer() {
+      log(`${this.username} create an answer: start`);
       try {
-        const stream = await navigator.mediaDevices.getUserMedia(this.constraints);
-        //stream.getTracks().forEach(track => {});
-        this.myVideo = stream;
+        const answer = await this.pc.createAnswer();
+        log(`Answer from ${this.username}\n ${answer.sdp}`);
+
+        log(`${this.username} setLocalDescription: start`);
+        await this.pc.setLocalDescription(answer);
+        log(`${this.username} setLocalDescription: finished`);
+
+        this.sendSignalingMessage(this.pc.localDescription, false);
       } catch (error) {
-        console.log(error);
+        log(`Error creating the answer from ${this.username}. Error: ${error}`);
       }
+    },
+
+    sendSignalingMessage(desc, offer) {
+      const isOffer = offer ? "offer" : "answer";
+      log(`${this.username} sends the ${isOffer} through the signal channel`);
+      // send the offer to the other peer
+      this.$socket.emit("privateMessagePCSignaling", {
+        desc: desc,
+        to: this.to,
+        from: this.$store.state.username,
+        room: this.room
+      });
+    },
+
+    async listenOnNegotiation() {
+      this.pc.onnegotiationneeded = async () => {
+        try {
+          await this.pc.setLocalDescription(await this.pc.createOffer());
+
+          // send the offer to the other peer
+          this.$socket.emit("privateMessagePCSignaling", {
+            desc: this.pc.localDescription,
+            to: this.to,
+            from: this.$store.state.username,
+            room: this.room
+          });
+        } catch (err) {
+          console.log(`onnegotiationneeded error: ${err}`);
+        }
+      };
+    },
+    // async handleAnser() {
+    //   await this.pc.setRemoteDescription(this.videoAnswer.remoteDesc);
+    //   this.getUserMedia();
+    //   await this.pc.setLocalDescription(await this.pc.createAnswer());
+
+    //   // send the asnwer to the other peer
+    //   this.$socket.emit("privateMessagePCSignaling", {
+    //     desc: this.pc.localDescription,
+    //     to: this.to,
+    //     from: this.$store.state.username,
+    //     room: this.room
+    //   });
+    // },
+    // async handleAnser() {
+    //   await this.pc.setRemoteDescription(this.videoAnswer.remoteDesc);
+    //   this.getUserMedia();
+    //   await this.pc.setLocalDescription(await this.pc.createAnswer());
+    //   // send the asnwer to the other peer
+    //   this.$socket.emit("privateMessagePCSignaling", {
+    //     desc: this.pc.localDescription,
+    //     to: this.to,
+    //     from: this.$store.state.username,
+    //     room: this.room
+    //   });
+    // },
+
+    async handleAnser() {
+      log(`${this.username} gets an offer from ${this.videoAnswer.from}`);
+      await this.getAudioVideo();
+      this.createPeerConnection();
+      await this.setRemoteDescription(this.videoAnswer.remoteDesc);
+      this.createAnswer();
+    },
+
+    async setRemoteDescription(remoteDesc) {
+      try {
+        log(`${this.username} setRemoteDescription: start`);
+        await this.pc.setRemoteDescription(this.videoAnswer.remoteDesc);
+        log(`${this.username} setRemoteDescription: finished`);
+      } catch (error) {
+        log(`Error setting the RemoteDescription in ${this.username}. Error: ${error}`);
+      }
+    },
+
+    async addCandidate(candidate) {
+      try {
+        await this.pc.addIceCandidate(candidate);
+      } catch (error) {}
+    },
+    onRemoteTrack(event) {
+      // once media for a remote track arrives, show it in the remote video element
+      //this.pc.ontrack = function(event) {
+      // don't set srcObject again if it is already set.
+      if (this.remoteVideo) return;
+      // this.remoteVideo = event.streams[0];
+      this.remoteVideo.srcObject = event.streams[0];
+      //};
+    },
+    onIceCandidates() {
+      // send any ice candidates to the other peer
+      this.pc.onicecandidate = ({ candidate }) => {
+        this.$socket.emit("privateMessagePCSignaling", {
+          candidate,
+          to: this.to,
+          from: this.$store.state.username,
+          room: this.room
+        });
+      };
     }
   },
-  methods: {}
+
+  watch: {
+    videoAnswer: function(newVal, oldVal) {
+      const desc = newVal.remoteDesc;
+      const candidate = newVal.candidate;
+      if (desc !== undefined && desc !== oldVal.remoteDesc) {
+        this.setRemoteDescription(desc);
+      }
+
+      if (candidate !== undefined && candidate !== oldVal.candidate) {
+        this.addCandidate(candidate);
+      }
+    }
+  }
 };
 </script>
 
diff --git a/src/utils/ICEServers.js b/src/utils/ICEServers.js
new file mode 100644
index 0000000..4619a8b
--- /dev/null
+++ b/src/utils/ICEServers.js
@@ -0,0 +1,38 @@
+export const servers = {
+    iceServers: [
+        { url: "stun:stun01.sipphone.com" },
+        { url: "stun:stun.ekiga.net" },
+        { url: "stun:stun.fwdnet.net" },
+        { url: "stun:stun.ideasip.com" },
+        { url: "stun:stun.iptel.org" },
+        { url: "stun:stun.rixtelecom.se" },
+        { url: "stun:stun.schlund.de" },
+        { url: "stun:stun.l.google.com:19302" },
+        { url: "stun:stun1.l.google.com:19302" },
+        { url: "stun:stun2.l.google.com:19302" },
+        { url: "stun:stun3.l.google.com:19302" },
+        { url: "stun:stun4.l.google.com:19302" },
+        { url: "stun:stunserver.org" },
+        { url: "stun:stun.softjoys.com" },
+        { url: "stun:stun.voiparound.com" },
+        { url: "stun:stun.voipbuster.com" },
+        { url: "stun:stun.voipstunt.com" },
+        { url: "stun:stun.voxgratia.org" },
+        { url: "stun:stun.xten.com" },
+        {
+            url: "turn:numb.viagenie.ca",
+            credential: "muazkh",
+            username: "webrtc@live.com"
+        },
+        {
+            url: "turn:192.158.29.39:3478?transport=udp",
+            credential: "JZEOEt2V3Qb0y27GRntt2u2PAYA=",
+            username: "28224511:1379330808"
+        },
+        {
+            url: "turn:192.158.29.39:3478?transport=tcp",
+            credential: "JZEOEt2V3Qb0y27GRntt2u2PAYA=",
+            username: "28224511:1379330808"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/utils/logging.js b/src/utils/logging.js
new file mode 100644
index 0000000..0e9afb6
--- /dev/null
+++ b/src/utils/logging.js
@@ -0,0 +1,4 @@
+export const log = (arg) => {
+    var now = (window.performance.now() / 1000).toFixed(3);
+    console.log(`${now}: ${arg}`);
+}
\ No newline at end of file