lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Fix video call

Browse source
This commit is contained in:
gparant 2020-04-19 22:30:42 +02:00
parent 5b62ac39fb
commit 89816a13e4
2 changed files with 60 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
front/src/WebRtc/MediaManager.ts
View file

@ -54,32 +54,58 @@ export class MediaManager {
this.cinemaClose.style.display = "none";
this.cinema.style.display = "block";
this.constraintsMedia.video = true;
this.localStream = null;
this.myCamVideo.srcObject = null;
this.getCamera();
}
disabledCamera() {
this.cinemaClose.style.display = "block";
this.cinema.style.display = "none";
this.constraintsMedia.video = false;
this.myCamVideo.pause();
if(this.localStream) {
this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
if (MediaStreamTrack.kind === "video") {
MediaStreamTrack.stop();
}
});
}
this.localStream = null;
this.myCamVideo.srcObject = null;
this.getCamera();
}
enabledMicrophone() {
this.microphoneClose.style.display = "none";
this.microphone.style.display = "block";
this.constraintsMedia.audio = true;
this.getCamera();
}
disabledMicrophone() {
this.microphoneClose.style.display = "block";
this.microphone.style.display = "none";
this.constraintsMedia.audio = false;
if(this.localStream) {
this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
if (MediaStreamTrack.kind === "audio") {
MediaStreamTrack.stop();
}
});
}
this.getCamera();
}
//get camera
getCamera() {
this.getCameraPromise = navigator.mediaDevices.getUserMedia(this.constraintsMedia)
.then((stream: MediaStream) => {
console.log("constraintsMedia", stream);
this.localStream = stream;
this.myCamVideo.srcObject = this.localStream;
this.myCamVideo.play();
}).catch((err) => {
console.error(err);
this.localStream = null;

67
front/src/WebRtc/PeerConnexionManager.ts
View file

@ -19,27 +19,27 @@ export class PeerConnexionManager {
}
createPeerConnection(data: any = null): Promise<any> {
this.peerConnection = new RTCPeerConnection();
return this.MediaManager.getCameraPromise.then(() => {
this.peerConnection = new RTCPeerConnection();
//init all events peer connection
this.createEventPeerConnection();
//init all events peer connection
this.createEventPeerConnection();
this.MediaManager.getCameraPromise.then(() => {
this.MediaManager.localStream.getTracks().forEach(
(track : MediaStreamTrack) => this.peerConnection.addTrack(track, this.MediaManager.localStream)
(track: MediaStreamTrack) => this.peerConnection.addTrack(track, this.MediaManager.localStream)
);
//if no data, create offer
if (!data || !data.message) {
return this.createOffer();
}
let description = new RTCSessionDescription(data.message);
return this.peerConnection.setRemoteDescription(description).catch((err) => {
console.error("createPeerConnection => setRemoteDescription", err);
throw err;
});
});
//if no data, create offer
if (!data || !data.message) {
return this.createOffer();
}
let description = new RTCSessionDescription(data.message);
return this.peerConnection.setRemoteDescription(description).catch((err) => {
console.error("createPeerConnection => setRemoteDescription", err);
throw err;
})
}
createOffer(): Promise<any> {
@ -102,30 +102,31 @@ export class PeerConnexionManager {
createEventPeerConnection(){
//define creator of offer
this.peerConnection.onicecandidate = (event: RTCPeerConnectionIceEvent) => {
let message = {message: event.candidate};
if (!event.candidate) {
this.peerConnection.addEventListener('icecandidate', ({candidate}) => {
let message = {message: candidate};
if (!candidate) {
return;
}
this.WebRtcEventManager.emitIceCandidate(message);
};
});
this.peerConnection.ontrack = (e:RTCTrackEvent) => {
console.info('Event:track', e);
this.MediaManager.remoteVideo.srcObject = e.streams[0];
this.MediaManager.myCamVideo.srcObject = e.streams[0];
};
this.peerConnection.addEventListener('iceconnectionstatechange', (e : Event) => {
console.info('oniceconnectionstatechange => iceConnectionState', this.peerConnection.iceConnectionState);
});
this.peerConnection.onnegotiationneeded = (e : Event) => {
this.peerConnection.addEventListener('negotiationneeded', (e : Event) => {
console.info("Event:negotiationneeded => call()", e);
this.createOffer()
};
this.peerConnection.oniceconnectionstatechange = (e) => {
console.info('ICE state change event: ', e);
};
this.peerConnection.oniceconnectionstatechange = (e:Event) => {
console.info('oniceconnectionstatechange => iceConnectionState', this.peerConnection.iceConnectionState);
};
});
this.peerConnection.addEventListener("track", (e:RTCTrackEvent) => {
console.info('Event:track', e);
if (this.MediaManager.remoteVideo.srcObject !== e.streams[0]) {
this.MediaManager.remoteVideo.srcObject = e.streams[0];
console.log('pc1 received remote stream');
}
});
this.peerConnection.onicegatheringstatechange = () => {
console.info('onicegatheringstatechange => iceConnectionState', this.peerConnection.iceConnectionState);
};