dev

src/App.vue

@@ -1,63 +1,56 @@
 <template>
-  <div>
-    <navbar />
-    <router-view  />
-  </div>
+    <div>
+        <navbar />
+        <router-view />
+    </div>
 </template>
 <script>
 export default {
-  data: function () {
-    return {};
-  },
-  beforeCreate: function () {
-    this.$store.state.peer.on("open", (id) => {
-      this.$store.state.id = id;
-    });
-
-    this.$store.state.peer.on("call", (call) => {
-      call.on("close", () => {
-        console.log("call closed");
-        this.$store.commit("delete", {
-          target: "receiveCalls",
-          peer: call.peer,
+    data: function() {
+        return {};
+    },
+    beforeCreate: function() {
+        this.$store.state.peer.on("open", id => {
+            this.$store.state.id = id;
         });
-      });
 
-      call.on("stream", (remoteStream) => {
-        console.log("call started");
-        this.$store.commit("add", { target: "remoteStreams", data: remoteStream });
-      });
+        this.$store.state.peer.on("call", call => {
+            call.on("stream", remoteStream => {
+                console.log("call started");
+                this.$store.state.remoteStreams.push(remoteStream);
+            });
 
-      call.active = false;
-      this.$store.commit("add", { target: "receiveCalls", data: call });
-    });
+            call.active = false;
+            this.$store.state.receiveCalls.push(call);
+        });
 
-    this.$store.state.peer.on("connection", (connection) => {
-      connection.on("open", () => {
-        console.log("connection openned");
-      });
-      connection.on("data", () => {
-        console.log("connection sended data");
-      });
-      connection.on("close", () => {
-        console.log("connection closed");
-      });
-    this.$store.commit("add", { target: "receiveConnections", data: connection });
-    });
-  },
-  mounted: async function () {
-    let getUserMedia =
-      navigator.mediaDevices.getUserMedia ||
-      navigator.mediaDevices.webkitGetUserMedia ||
-      navigator.mediaDevices.mozGetUserMedia;
+        this.$store.state.peer.on("connection", connection => {
+            connection.on("open", () => {
+                console.log("connection openned");
+            });
+            connection.on("data", (data) => {
+              if(data=='PAIR_CLOSED'){
+              this.$store.commit('close',connection.peer)
+              }
+            });
+            connection.on("close", () => {
+                console.log("connection closed");
+            });
+            this.$store.state.receiveConnections.push(connection);
+        });
+    },
+    mounted: async function() {
+        let getUserMedia =
+            navigator.mediaDevices.getUserMedia ||
+            navigator.mediaDevices.webkitGetUserMedia ||
+            navigator.mediaDevices.mozGetUserMedia;
 
-    this.$store.state.myLocalVideoStream = await getUserMedia({
-      video: true,
-      audio: false,
-    });
-  },
+        this.$store.state.myLocalVideoStream = await getUserMedia({
+            video: true,
+            audio: false
+        });
+    }
 };
 </script>
 <style>
-
 </style>

src/components/_globalComponentRegistirations.js

@@ -4,6 +4,7 @@ import gotoroom from './gotoroom'
 import acceptcall from './acceptcall'
 import yourpeer from './yourpeer'
 import connectpeer from './connectpeer'
+import myconnections from './myconnections'
 
 export default {
     navbar,
@@ -11,5 +12,6 @@ export default {
     gotoroom,
     acceptcall,
     yourpeer,
-    connectpeer
+    connectpeer,
+    myconnections,
 }

src/components/acceptcall.vue

@@ -1,47 +1,26 @@
 <template>
-  <div class="w-100 p-2 text-center border">
-    <div>{{call.peer}}</div>
-    <b-button v-if="!call.active" variant="outline-success" @click="openCall()">Accept Call</b-button>
-    <b-button v-else-if="call.active" variant="outline-danger" @click="closeCall()">Close Call</b-button>
-  </div>
+    <div class="w-100 p-2 text-center border">
+        <div>{{call.peer}}</div>
+        <b-button v-if="!call.active" variant="outline-success" @click="answerCall()">Accept Call</b-button>
+        <b-button v-else-if="call.active" variant="outline-danger" @click="closeCall()">Close Call</b-button>
+    </div>
 </template>
 
 <script>
 export default {
-  props: ["call"],
-  data: function () {
-    return {};
-  },
-  methods: {
-    closeCall: function () {
-      this.call.close();
-      this.$store.commit("delete", {
-        target: "receiveCalls",
-        peer: this.call.peer,
-      });
-      this.$store.commit("delete", {
-        target: "remoteStreams",
-        peer: this.call.peer,
-      });
-      this.$store.commit("delete", {
-        target: "receiveConnections",
-        peer: this.call.peer,
-      });
+    props: ["call"],
+    data: function() {
+        return {};
     },
-    openCall: function () {
-      this.call.answer(this.$store.state.myLocalVideoStream);
-      this.call.active = true;
-
-      let remoteCall = this.$store.state.peer.call(
-        this.call.peer,
-        this.$store.state.myLocalVideoStream
-      );
-      let dataConnection = this.$store.state.peer.connect(this.call.peer);
-
-      this.$store.commit("add", { target: "myCalls", data: remoteCall });
-      this.$store.commit("add", { target: "myConnections", data: dataConnection,});
-    },
-  },
+    methods: {
+        closeCall: function() {
+            this.$store.commit("close", this.call.peer);
+        },
+        answerCall: function() {
+            this.$store.commit("answer", this.call.peer);
+            this.$store.commit("call", this.call.peer);
+        }
+    }
 };
 </script>
 

src/components/connectpeer.vue

@@ -25,15 +25,7 @@ export default {
     },
     methods: {
         callRemote: function() {
-            let call = this.$store.state.peer.call(
-                this.connectId,
-                this.$store.state.myLocalVideoStream
-            );
-
-            let dataConnection = this.$store.state.peer.connect(this.connectId);
-
-            this.$store.state.myConnections.push(dataConnection);
-            this.$store.state.myCalls.push(call);
+            this.$store.commit('call',this.connectId)
         }
     }
 };

src/components/myconnections.vue

@@ -0,0 +1,26 @@
+<template>
+    <b-card bg-variant="primary" header="My Connections" text-variant="white">
+        <b-card-text>
+            <div>
+                <div variant="light" v-for="call in $store.state.myCalls" :key="call">
+                    {{call.peer}}
+                     <b-button @click="$store.commit('close',call.peer)">Close</b-button>
+                    </div>
+               
+            </div>
+        </b-card-text>
+    </b-card>
+</template>
+
+<script>
+export default {
+    data: function() {
+        return {};
+    },
+    methods: {}
+};
+</script>
+
+<style scoped>
+
+</style>

src/store/index.js

@@ -24,27 +24,44 @@ export const store = new Vuex.Store({
 
     },
     mutations: {
-        delete: function(state, payload) {
-            if (payload.target == undefined | typeof payload.target != "string" | Object.values(payload).length < 2) return false
-            let keys = Object.keys(payload)
-            let targetKey = keys.splice(keys.findIndex(item => item == "target"), 1)[0]
+        close: function(state, connectId) {
+            let callIndex = state.receiveCalls.findIndex(item => item.peer == connectId)
+            let connectionIndex = state.receiveConnections.findIndex(item => item.peer == connectId)
+            let remoteStreamIndex = state.remoteStreams.findIndex(item => item.peer == connectId)
 
-            let index = state[payload.target].findIndex(item => item[targetKey] == state[payload.target][targetKey])
-            state[payload.target].splice(index, 1)
+            let myConnectionIndex = state.myConnections.findIndex(item => item.peer == connectId)
+            let myCallIndex = state.myCalls.findIndex(item => item.peer == connectId)
+
+            state.myConnections[myConnectionIndex].send('PAIR_CLOSED')
+
+            if (callIndex != -1) state.receiveCalls[callIndex].close()
+            if (connectionIndex != -1) state.receiveConnections[connectionIndex].close()
+
+            state.remoteStreams.splice(remoteStreamIndex, 1)
+            state.receiveConnections.splice(callIndex, 1)
+            state.receiveCalls.splice(connectionIndex, 1)
+
+            state.myCalls.splice(myCallIndex, 1)
+            state.myConnections.splice(myConnectionIndex, 1)
         },
-        add: function(state, payload) {
-            if (payload.target == undefined | typeof payload.target != "string" | payload.data == undefined) {
-                console.log("[add] invalid object");
-                return false
-            }
-            console.log(payload)
-            state[payload.target].push(payload.data)
+        call: function(state, connectId) {
+            if (state.myConnections.findIndex(item => item.peer == connectId) != -1) return false;
+            if (state.myCalls.findIndex(item => item.peer == connectId) != -1) return false;
+
+            let call = state.peer.call(
+                connectId,
+                state.myLocalVideoStream
+            );
+
+            let dataConnection = state.peer.connect(connectId);
+
+            state.myConnections.push(dataConnection);
+            state.myCalls.push(call);
         },
-        hasIt(state, payload) {
-            if (state.receiveCalls.length == 0)
-                return false
-            else
-                return state[payload.target].findIndex(it => it.peer === payload.data.peer) == -1
+        answer: function(state, payload) {
+            let remoteStreamIndex = state.receiveCalls.findIndex(item => item.peer == payload)
+            state.receiveCalls[remoteStreamIndex].answer(state.myLocalVideoStream)
+            state.receiveCalls[remoteStreamIndex].active = true
         }
     },
     actions: {},

src/views/Home.vue

@@ -1,13 +1,11 @@
 <template>
     <div class="text-center">
-        <b-card-group>
+        <b-card-group tag="div" columns>
             <yourpeer />
-            <connectpeer  />
+            <connectpeer />
             <gotoroom />
+            <myconnections />
         </b-card-group>
-        <div v-for="x in $store.state.MyCalls" :key="x">Call {{ x.peer}}</div>
-
-        <div v-for="x in $store.state.myConnections" :key="x">Connection {{ x.peer}}</div>
     </div>
 </template>