pin pon connection

src/App.vue

@@ -26,9 +26,9 @@ export default {
         let index = this.$store.state.receiveCalls.findIndex(
           (r) => r.peer == call.peer
         );
-         this.$store.state.receiveCalls[index].close()
+        this.$store.state.receiveCalls[index].close();
         this.$store.state.receiveCalls.splice(index, 1);
-        
+
         index = this.$store.state.remoteStreams.findIndex(
           (r) => r.peer == call.peer
         );
@@ -39,6 +39,8 @@ export default {
         console.log("call started");
         this.$store.state.remoteStreams.push(remoteStream);
       });
+
+      call.active = false;
       this.$store.state.receiveCalls.push(call);
     });
 

src/components/acceptcall.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>
+  <div class="w-100 p-2 text-center border">
     <div>{{call.peer}}</div>
-    <b-button variant="success" @click="call.answer($store.state.myLocalVideoStream);">Accept Call</b-button>
-    <b-button variant="danger" @click="closeCall()">Decline or Close Call</b-button>
+    <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>
 </template>
 
@@ -13,9 +13,23 @@ export default {
     return {};
   },
   methods: {
-    closeCall:function(){
-      this.call.close()
-    }
+    closeCall: function () {
+      this.call.close();
+    },
+    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.state.myConnections.push(dataConnection);
+      this.$store.state.myCalls.push(remoteCall);
+    },
   },
 };
 </script>

src/components/peervideo.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="body text-center m-2 p-1 bg-dark text-secondary" style="float:left">
-    <h6>Video</h6>
-    <hr />
+  <div class="" style="float:left">
     <video class="box" ref="video" autoplay />
   </div>
 </template>
@@ -22,13 +20,8 @@ export default {
 </script>
 
 <style scoped>
-.body {
-  border: 1px solid black;
-  border-radius: 10px;
-}
 .box {
   width: 400px;
   height: 380px;
-  position: relative;
 }
 </style>

src/views/Chat.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
     <b-row>
-      <b-col cols="2">
+      <b-col cols="2" class="text-center">
         <div v-if="$store.state.receiveCalls.length==0">There is no call</div>
         <div v-if="$store.state.receiveCalls.length!=0">Answer Calls</div>
-        <acceptcall v-for="c in $store.state.receiveCalls" :key="c" :call="c" />
+        <acceptcall v-for="c in $store.state.receiveCalls" :key="c.peer" :call="c" />
       </b-col>
       <b-col>
         <peervideo :videoStream="$store.state.myLocalVideoStream" />
-        <peervideo v-for="obj in $store.state.remoteStreams" :key="obj" :videoStream="obj" />
+        <peervideo v-for="obj in $store.state.remoteStreams" :key="obj.id" :videoStream="obj" />
       </b-col>
     </b-row>
     <b-row>

src/views/Home.vue

@@ -51,6 +51,7 @@ export default {
         this.connectId,
         this.$store.state.myLocalVideoStream
       );
+
       let dataConnection = this.$store.state.peer.connect(this.connectId);
 
       this.$store.state.myConnections.push(dataConnection);