dev-2

dev-2

src/App.vue

@@ -7,41 +7,49 @@
 <script>
 export default {
   data: function () {
-    return {
-      connection: null,
-      connected: true,
-      messages: [],
-    };
+    return {};
   },
   beforeCreate: function () {
     this.$store.state.peer.on("open", (id) => {
       this.$store.state.id = id;
     });
 
-    var getUserMedia =
-      navigator.getUserMedia ||
-      navigator.webkitGetUserMedia ||
-      navigator.mozGetUserMedia;
-
     this.$store.state.peer.on("call", (call) => {
-      console.log("calling");
-      getUserMedia(
-        { video: true, audio: true },
-        (stream) => {
-          call.answer(stream); // Answer the call with an A/V stream.
-          call.on("stream", (remoteStream) => {
-            console.log("get call");
-            this.$store.state.coonections.push(call);
-            this.$store.state.remoteStreams.push(remoteStream);
-          });
-        },
-        function (err) {
-          console.log("Failed to get local stream", err);
-        }
-      );
+      call.on("close", () => {
+        console.log("call closed");
+      });
+
+      call.on("stream", (remoteStream) => {
+        console.log("call started");
+        this.$store.state.remoteStreams.push(remoteStream);
+      });
+      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.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,
     });
   },
-  created: function () {},
 };
 </script>
 <style>

src/components/VideoScreen.vue

@@ -1,31 +0,0 @@
-<template>
-    <div>
-        <b-card>
-            <b-card>
-                {{ "hello"}}
-            </b-card>
-            <b-card-text>
-                {{`${video.username}-${video.id}`}}
-            </b-card-text>
-            <b-button variant="success" @click='send()'>Tıkla</b-button>
-        </b-card>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'VideoScreen',
-    props: ['video'],
-    methods:{
-        send:function(){
-            console.log('hi')
-            this.$emit('hi')
-        }
-    }
-}
-</script>
-
-
-<style scoped>
-
-</style>

src/components/globalComponentRegistirations.js → src/components/_globalComponentRegistirations.js

@@ -1,9 +1,11 @@
 import navbar from './navbar'
 import peervideo from './peervideo'
 import gotoroom from './gotoroom'
+import acceptcall from './acceptcall'
 
 export default {
     'navbar': navbar,
     'peervideo': peervideo,
-    'gotoroom': gotoroom
+    'gotoroom': gotoroom,
+    'acceptcall': acceptcall
 }

src/components/acceptcall.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <div>{{call.peer}}</div>
+    <b-button variant="success" @click="call.answer($store.state.myLocalVideoStream);">Accept Call</b-button>
+    <b-button variant="danger">Decline Call</b-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["call"],
+  data: function () {
+    return {};
+  },
+  methods: {
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/gotoroom.vue

@@ -8,7 +8,8 @@
     >
       <b-card-text>
         <div>
-          <h3>Connected {{ $store.state.remoteStreams.length}} Peer</h3>
+          <h3>{{ $store.state.receiveCalls.length}} Calls</h3>
+          <h3>{{ $store.state.receiveConnections.length}} Connections</h3>
         </div>
         <b-button block variant="secondary" class="mt-3" :to="`/chat`">GO</b-button>
       </b-card-text>

src/components/navbar.vue

@@ -7,6 +7,7 @@
     <b-collapse id="nav-collapse" is-nav>
       <b-navbar-nav>
         <b-nav-item to="/">Home</b-nav-item>
+          <b-nav-item to="/chat">Chat Room</b-nav-item>
       </b-navbar-nav>
 
       <!-- Right aligned nav items -->

src/components/peervideo.vue

@@ -3,7 +3,6 @@
     <h6>Video</h6>
     <hr />
     <video class="box" ref="video" autoplay />
-    <div>{{}}</div>
   </div>
 </template>
 
@@ -17,8 +16,8 @@ export default {
   },
   mounted: function () {
     this.$refs.video.srcObject = this.videoStream;
-    console.log;
   },
+  beforeDestroy: function () {},
 };
 </script>
 
@@ -30,6 +29,6 @@ export default {
 .box {
   width: 400px;
   height: 380px;
-  position: relative;;
+  position: relative;
 }
 </style>

src/main.js

@@ -6,9 +6,7 @@ import { store } from './store'
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
-//Peer JS
-//import VuePeerJS from 'vue-peerjs';
-//import Peer from 'peerjs';
+
 
 //Clipboard
 import VueClipboard from 'vue-clipboard2'
@@ -18,14 +16,13 @@ VueClipboard.config.autoSetContainer = true // add this line
 //VUue Use
 Vue.use(BootstrapVue)
 Vue.use(IconsPlugin)
-    //Vue.use(VuePeerJS, new Peer({}), { store })
 Vue.use(VueClipboard)
 
 //Vue config
 Vue.config.productionTip = false
 
 //Component registration
-import comps from "./components/globalComponentRegistirations";
+import comps from "./components/_globalComponentRegistirations";
 for (let comp in comps) Vue.component(comp, comps[comp])
 
 

src/store/index.js

@@ -4,19 +4,23 @@ import Peer from "peerjs";
 
 Vue.use(Vuex)
 
+
+
 export const store = new Vuex.Store({
     state: {
         id: "",
         remoteId: "",
         peer: new Peer(),
-        connections: {},
+
+        myLocalVideoStream: null,
         remoteStreams: [],
+        receiveCalls: [],
+        receiveConnections: [],
+        myConnections: [],
+        myCalls: [],
+
     },
-    getters: {
-        getRemoteIds: (state) => {
-            return state.remoteStreams.map(stream => stream.id)
-        }
-    },
+    getters: {},
     actions: {},
     modules: {}
 })

src/views/Chat.vue

@@ -1,6 +1,19 @@
 <template>
   <div>
-    <peervideo v-for="stream in $store.state.remoteStreams" :key="stream.id" :videoStream="stream"></peervideo>
+    <b-row>
+      <b-col cols="2">
+        <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" />
+      </b-col>
+      <b-col>
+        <peervideo :videoStream="$store.state.myLocalVideoStream" />
+        <peervideo v-for="obj in $store.state.remoteStreams" :key="obj" :videoStream="obj" />
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>3</b-col>
+    </b-row>
   </div>
 </template>
 <script>
@@ -8,8 +21,6 @@ export default {
   data: function () {
     return {};
   },
-
-  
 };
 </script>
 <style scoped>

src/views/Home.vue

@@ -30,6 +30,11 @@
 <script>
 export default {
   name: "Home",
+  data: function () {
+    return {
+      
+    };
+  },
   computed: {
     connectId: {
       get() {
@@ -42,25 +47,17 @@ export default {
   },
   methods: {
     callRemote: function () {
-      var getUserMedia =
-        navigator.getUserMedia ||
-        navigator.webkitGetUserMedia ||
-        navigator.mozGetUserMedia;
-      getUserMedia(
-        { video: true },
-        (stream) => {
-          var call = this.$store.state.peer.call(this.connectId, stream);
-          console.log(call);
-          call.on("stream", () => {});
-          call.on("close", () => {
-            console.log("close");
-          });
-        },
-        (err) => {
-          console.log("Failed to get local stream", err);
-        }
+      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);
     },
   },
+  beforeCreated: function () {
+  },
 };
 </script>