Skip to content

Commit

Permalink
Videocall flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@adrigardi90
adrigardi90 committed Feb 19, 2019
1 parent ae86ca0 commit b830407
Showing 1 changed file with 58 additions and 126 deletions.
184 changes: 58 additions & 126 deletions src/components/VideoArea.vue
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<template>
<div class="video">
<div class="video__partner">
<rotate-square5 v-if="!remoteVideo" class="video__spinner"></rotate-square5>
<!-- <video v-else id="remoteVideo" class="video__spinner" autoplay :srcObject.prop="remoteVideo"></video> -->
<rotate-square5 v-if="!remoteStream" class="video__spinner"></rotate-square5>
<video id="remoteVideo" class="video__spinner" autoplay></video>
</div>
<!-- <video id="localVideo" class="video__myself" autoplay :sr∂cObject.prop="myVideo"></video> -->
<video id="localVideo" class="video__myself" autoplay></video>
</div>
</template>
Expand All @@ -28,17 +26,18 @@ export default {
},
data: () => ({
// videos
myVideo: undefined,
remoteVideo: undefined,
myVideo: {},
remoteVideo: {},
// Media config
constraints: {
audio: true,
video: true
},
// local video stream
// local & remote video stream
localStream: undefined,
remoteStream: undefined,
// STUN ice servers
configuration: servers,
Expand All @@ -54,29 +53,6 @@ export default {
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() {
this.username = this.$store.state.username;
Expand All @@ -96,29 +72,31 @@ export default {
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 callFriend() {
log(`${this.username} wants to start a call`);
await this.getAudioVideo();
this.createPeerConnection();
this.addLocalStream();
// Event listeners
this.onIceCandidates();
this.onAddStream();
await this.createOffer();
},
async handleAnser() {
log(`${this.username} gets an offer from ${this.videoAnswer.from}`);
await this.getAudioVideo();
this.createPeerConnection();
this.addLocalStream();
// Event listeners
this.onIceCandidates();
this.onAddStream();
await this.setRemoteDescription(this.videoAnswer.remoteDesc);
this.createAnswer();
},
async getUserMedia() {
log(`Requesting ${this.username} video stream`);
Expand All @@ -135,12 +113,6 @@ export default {
}
}
},
async callFriend() {
log(`${this.username} wants to start a call`);
this.getAudioVideo();
this.createPeerConnection();
this.createOffer();
},
getAudioVideo() {
const video = this.localStream.getVideoTracks();
Expand Down Expand Up @@ -199,81 +171,17 @@ export default {
});
},
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);
await this.pc.setRemoteDescription(remoteDesc);
log(`${this.username} setRemoteDescription: finished`);
} catch (error) {
log(`Error setting the RemoteDescription in ${this.username}. Error: ${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 }) => {
Expand All @@ -284,7 +192,31 @@ export default {
room: this.room
});
};
}
},
async addCandidate(candidate) {
try {
log(`${this.username} added a candidate`);
await this.pc.addIceCandidate(candidate);
} catch (error) {
log(`Error adding a candidate in ${this.username}. Error: ${error}`)
}
},
onAddStream() {
this.pc.onaddstream = this.onAddBindStream.bind(this)
},
onAddBindStream(event){
if(!this.remoteVideo.srcObject && event.stream){
this.remoteStream = event.stream
this.remoteVideo.srcObject = this.remoteStream ;
}
},
addLocalStream(){
this.pc.addStream(this.localStream)
},
},
watch: {
Expand Down

0 comments on commit b830407

Please sign in to comment.