Call sequence

kafkadev · Feb 18, 2019 · ae86ca0 · ae86ca0
1 parent 201dc02
commit ae86ca0
Show file tree

Hide file tree

Showing 5 changed files with 423 additions and 51 deletions.
diff --git 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}`));
diff --git a/src/components/ChatDialog.vue b/src/components/ChatDialog.vue
@@ -5,45 +5,48 @@
       :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>
 
 
 <script>
 import ChatArea from "./ChatArea";
-import VideoArea from './VideoArea'
+import VideoArea from "./VideoArea";
 
 export default {
   name: "ChatDialog",
@@ -52,20 +55,70 @@ 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: {
     closeChat() {
       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;
   }
 }