From 712e5596478ebad0106cdb6602031102bde65feb Mon Sep 17 00:00:00 2001 From: botzoo Date: Sun, 22 Jan 2017 22:02:00 -0800 Subject: [PATCH] cleaned up webrtc --- client/js/webrtc.js | 115 +++++++++++++++++++++++--------------------- 1 file changed, 59 insertions(+), 56 deletions(-) diff --git a/client/js/webrtc.js b/client/js/webrtc.js index 3302e7f..e55fbf3 100644 --- a/client/js/webrtc.js +++ b/client/js/webrtc.js @@ -1,18 +1,21 @@ module.exports = { start() { - this.wsrtc.send(JSON.stringify({'type':'join'})); - this.wsrtc.send(JSON.stringify({'type': 'joinUp'})) - //this tells the getUserMedia what data to grab and set in the MediaStream object that the method produces, - //which is then used in the success callback on the MediaStream object that contains the media stream - navigator.mediaDevices.getUserMedia({ audio: { - googAutoGainControl: false, - echoCancellation: false - }, video: true}) - // set localStream equal to this stream - .then (stream => { this.localStream = stream }) - // .then(this.gotStream) - .catch(e => { console.log('getUserMedia() error: ' + e.name);}); + this.wsrtc.send(JSON.stringify({ 'type': 'join' })); + this.wsrtc.send(JSON.stringify({ 'type': 'joinUp' })) + //this tells the getUserMedia what data to grab and set in the MediaStream object that the method produces, + //which is then used in the success callback on the MediaStream object that contains the media stream + navigator.mediaDevices.getUserMedia({ + audio: { + googAutoGainControl: false, + echoCancellation: false + }, + video: true + }) + // set localStream equal to this stream + .then(stream => { this.localStream = stream }) + // .then(this.gotStream) + .catch(e => { console.log('getUserMedia() error: ' + e.name); }); }, @@ -38,12 +41,9 @@ module.exports = { this.pc.addStream(this.localStream) this.pc.onaddstream = e => { - //event handler for setRemoteDescription: adds remote stream src to DOM - // if (!document.getElementById(e.stream.id)) { - // this.videos = document.getElementById('video-container'); + //event handler for setRemoteDescription: adds remote stream src to DOM let otherVideo = document.createElement('video') otherVideo.src = window.URL.createObjectURL(e.stream); - // otherVideo.src = window.URL.createObjectURL(e.stream); if (document.getElementById('video-container').children.length < 2) { this.videos.appendChild(otherVideo); console.log('children are too few') @@ -57,23 +57,21 @@ module.exports = { //send connected signal this.connected = false; this.end = true; - this.wsrtc.send(JSON.stringify({'type': 'connected'})); - // } else { - // console.log('not connecting') - // } - } - //on initial reception of icecandidates... + this.wsrtc.send(JSON.stringify({ 'type': 'connected' })); + + } + //on initial reception of icecandidates... this.pc.onicecandidate = e => { //send ice candidates over WS signaling server - if(e.candidate != null) { - this.wsrtc.send(JSON.stringify({'ice': e.candidate})); + if (e.candidate != null) { + this.wsrtc.send(JSON.stringify({ 'ice': e.candidate })); this.connected = true; this.end = true; } } }, - call() { + call() { //call to create initial offer this.pc.createOffer() .then(offer => { @@ -81,30 +79,27 @@ module.exports = { this.pc.setLocalDescription(offer); //send offer over WS signaling server console.log(offer) - this.wsrtc.send(JSON.stringify({'sdp': offer})) + this.wsrtc.send(JSON.stringify({ 'sdp': offer })) }) - .catch(e => { console.log('err offer setLocalDescription', e);}) + .catch(e => { console.log('err offer setLocalDescription', e); }) }, //toggles own mute toggleMute() { this.ourAudio = !this.ourAudio; let id = this.localStream.id; - this.wsrtc.send(JSON.stringify( - {'type': 'toggleMute', - 'id': id - }) - ) + this.wsrtc.send(JSON.stringify({ + 'type': 'toggleMute', + 'id': id + })) }, stop() { console.log('stop1') - this.wsrtc.send(JSON.stringify({'type':'stop', 'id': this.localStream.id})); + this.wsrtc.send(JSON.stringify({ 'type': 'stop', 'id': this.localStream.id })); //delete descriptions this.collaborate = true; - // this.stop = true; - console.log('stop') delete this.pc.localDescription; delete this.pc.remoteDescription; }, @@ -115,7 +110,7 @@ module.exports = { let signal = JSON.parse(e.data); - if (signal.type === 'stop') { + if (signal.type === 'stop') { //remove video nodes console.log('stopsignal') while (this.videos.firstChild) { @@ -145,32 +140,32 @@ module.exports = { }; if (signal.type === 'joinUp') { - navigator.mediaDevices.getUserMedia({ audio: true, video: true}) + navigator.mediaDevices.getUserMedia({ audio: true, video: true }) .then(this.gotStream) - .catch(e => {console.log('getUserMedia()err: ', e.name);}); + .catch(e => { console.log('getUserMedia()err: ', e.name); }); }; if (signal.type === 'connected') { //connect button remains this.connected = true; - // this.collaborate = true; console.log('yeaa', this.connected) }; if (signal.sdp && signal.sdp.type === 'offer' && signal.sdp !== this.pc.localDescription) { //if signal is offer and we are the callee, set SDP offer as remote description this.pc.setRemoteDescription(signal.sdp) - //attach our local stream to the peerConnection object + //attach our local stream to the peerConnection object .then(() => this.pc.addStream(this.localStream)) //create answer .then(() => this.pc.createAnswer()) //set this answer as our local description - .then(answer => {this.ourAnswer = answer; this.pc.setLocalDescription(answer)}) + .then(answer => { this.ourAnswer = answer; + this.pc.setLocalDescription(answer) }) //send this answer along with our local stream data over WS signaling server .then(() => { this.wsrtc.send(JSON.stringify({ 'sdp': this.ourAnswer })); }) - .catch(e => { console.log('err at offer', e);}) + .catch(e => { console.log('err at offer', e); }) }; @@ -186,22 +181,24 @@ module.exports = { if (this.pc.remoteDescription && this.iceCandidates.length > 0) //if the local and remote description has been set and ice candidates exist for (var i = 0; i < this.iceCandidates.length; i++) { - //add ice candidates to peerConnection - this.pc.addIceCandidate(this.iceCandidates[i]) - } + //add ice candidates to peerConnection + this.pc.addIceCandidate(this.iceCandidates[i]) + } }) - .catch(e => { console.log('err at answer', e)}) + .catch(e => { console.log('err at answer', e) }) } } }, record() { + //create new mediarecorder from local stream try { - MediaRecorder = new MediaRecorder(this.localStream, {mimeType: "video/webm"}); - } catch (e) { console.log('Recording issues', e); return } + MediaRecorder = new MediaRecorder(this.localStream, { mimeType: "video/webm" }); + } catch (e) { console.log('Recording issues', e); + return } this.theRecorder = MediaRecorder; - MediaRecorder.ondataavailable = e => { this.recordedChuck.push(e.data);} + MediaRecorder.ondataavailable = e => { this.recordedChuck.push(e.data); } MediaRecorder.start(100); }, @@ -211,18 +208,24 @@ module.exports = { }, download() { + //show collaborate button and stop button + this.collaborate = true; + this.end = true; + //stop recording this.theRecorder.stop(); + //stop streams this.localStream.getTracks().forEach(track => { track.stop(); }); - - var blob = new Blob(this.recordedChuck, {type: "video/mp4"}); - var url = URL.createObjectURL(blob); + //create new blob + var blob = new Blob(this.recordedChuck, { type: "video/mp4" }); + //get url from dom for blob for download name + var url = URL.createObjectURL(blob); var a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = url; - //make rand number padd 4 - var rand = ('0000' + Math.floor((Math.random() * 1000))).slice(-4); - a.download = this.uri + rand +'.mp4'; + //add padd of 4 + var rand = ('0000' + Math.floor((Math.random() * 1000))).slice(-4); + a.download = this.uri + rand + '.mp4'; a.click(); // setTimeout() here is needed for Firefox. setTimeout(function() { URL.revokeObjectURL(url); }, 100); @@ -230,6 +233,6 @@ module.exports = { } - } +} }