Skip to content

Commit

Permalink
Fixed #7 as well as Firefox issue in the demo index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@muaz-khan
muaz-khan committed Aug 12, 2017
1 parent cb13fa7 commit 184abf1
Show file tree
Hide file tree
Showing 9 changed files with 138 additions and 77 deletions.
3 changes: 2 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@ module.exports = function(grunt) {
'dev/googCertificate.js',
'dev/googCodecName.audio.js',
'dev/googCodecName.video.js',
'dev/VideoBwe.js',
'dev/bweforvideo.js',
'dev/googCandidatePair.js',
'dev/localcandidate.js',
'dev/remotecandidate.js',
'dev/dataSentReceived.js',
'dev/tail.js'
],
dest: 'getStats.js',
Expand Down
2 changes: 1 addition & 1 deletion dev/VideoBwe.js → dev/bweforvideo.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
getStatsParser.checkVideoBandwidth = function(result) {
getStatsParser.bweforvideo = function(result) {
if (result.type !== 'VideoBwe') return;

// id === 'bweforvideo'
Expand Down
10 changes: 10 additions & 0 deletions dev/dataSentReceived.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
getStatsParser.dataSentReceived = function(result) {
var mediaType = result.googCodecName !== 'opus' ? 'video' : 'audio';
if (!!result.bytesSent) {
getStatsResult[mediaType].bytesSent += parseInt(result.bytesSent);
}

if (!!result.bytesReceived) {
getStatsResult[mediaType].bytesReceived += parseInt(result.bytesReceived);
}
};
10 changes: 5 additions & 5 deletions dev/datachannel.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
getStatsParser.checkDataChannel = function(result) {
if (result.datachannelid && v.type === 'datachannel') {
getStatsResult.datachannel = {
state: result.state // open or connecting
}
getStatsParser.datachannel = function(result) {
if (result.type !== 'datachannel') return;

getStatsResult.datachannel = {
state: result.state // open or connecting
}
};
8 changes: 6 additions & 2 deletions dev/globals.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,19 @@ var getStatsResult = {
},
recv: {
tracks: []
}
},
bytesSent: 0,
bytesReceived: 0
},
video: {
send: {
tracks: []
},
recv: {
tracks: []
}
},
bytesSent: 0,
bytesReceived: 0
},
results: {},
connectionType: {},
Expand Down
2 changes: 1 addition & 1 deletion dev/wrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
function getStatsWrapper(cb) {
// if !peer or peer.signalingState == 'closed' then return;

if (!!navigator.mozGetUserMedia) {
if (typeof window.InstallTrigger !== 'undefined') {
peer.getStats(
mediaStreamTrack,
function(res) {
Expand Down
35 changes: 25 additions & 10 deletions getStats.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use strict';

// Last time updated: 2017-08-02 2:33:00 PM UTC
// Last time updated: 2017-08-11 1:21:20 PM UTC

// _______________
// getStats v1.0.4
Expand Down Expand Up @@ -29,15 +29,19 @@ window.getStats = function(mediaStreamTrack, callback, interval) {
},
recv: {
tracks: []
}
},
bytesSent: 0,
bytesReceived: 0
},
video: {
send: {
tracks: []
},
recv: {
tracks: []
}
},
bytesSent: 0,
bytesReceived: 0
},
results: {},
connectionType: {},
Expand Down Expand Up @@ -136,7 +140,7 @@ window.getStats = function(mediaStreamTrack, callback, interval) {
function getStatsWrapper(cb) {
// if !peer or peer.signalingState == 'closed' then return;

if (!!navigator.mozGetUserMedia) {
if (typeof window.InstallTrigger !== 'undefined') {
peer.getStats(
mediaStreamTrack,
function(res) {
Expand Down Expand Up @@ -166,11 +170,11 @@ window.getStats = function(mediaStreamTrack, callback, interval) {
}
};

getStatsParser.checkDataChannel = function(result) {
if (result.datachannelid && v.type === 'datachannel') {
getStatsResult.datachannel = {
state: result.state // open or connecting
}
getStatsParser.datachannel = function(result) {
if (result.type !== 'datachannel') return;

getStatsResult.datachannel = {
state: result.state // open or connecting
}
};

Expand Down Expand Up @@ -269,7 +273,7 @@ window.getStats = function(mediaStreamTrack, callback, interval) {
}
};

getStatsParser.checkVideoBandwidth = function(result) {
getStatsParser.bweforvideo = function(result) {
if (result.type !== 'VideoBwe') return;

// id === 'bweforvideo'
Expand Down Expand Up @@ -374,6 +378,17 @@ window.getStats = function(mediaStreamTrack, callback, interval) {
getStatsResult.connectionType.remote.transport = result.transport;
};

getStatsParser.dataSentReceived = function(result) {
var mediaType = result.googCodecName !== 'opus' ? 'video' : 'audio';
if (!!result.bytesSent) {
getStatsResult[mediaType].bytesSent += parseInt(result.bytesSent);
}

if (!!result.bytesReceived) {
getStatsResult[mediaType].bytesReceived += parseInt(result.bytesReceived);
}
};

getStatsLooper();

};
4 changes: 2 additions & 2 deletions getStats.min.js
View file

Large diffs are not rendered by default.

141 changes: 86 additions & 55 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ <h1>

<div class="grid">
<div class="videos-container">
<video id="peer2-to-peer1" autoplay controls></video>
<video id="peer2-to-peer1" controls></video>
<h2>Offerer-to-Answerer</h2>
<p><b>EncryptedAs:</b> <span id="peer1-encryptedAs"></span></p>
<p><b>Local ICE type:</b> <span id="peer1-localIceType"></span></p>
Expand All @@ -140,13 +140,13 @@ <h2>Offerer-to-Answerer</h2>
<p><b>Video Recv bandwidth:</b> <span id="peer1-videoAvailableBandwidthForReceivers"></span> kbps</p>
<p><b>Video Send resolutions:</b> <span id="peer1-videoResolutionsForSenders"></span></p>
<p><b>Video Recv resolutions:</b> <span id="peer1-videoResolutionsForReceivers"></span></p>
<p><b>Audio Send tracks:</b> <span id="peer1-audioTracksForSenders"></span></p>
<p><b>Audio Recv tracks:</b> <span id="peer1-audioTracksForReceivers"></span></p>
<p><b>Video Send tracks:</b> <span id="peer1-videoTracksForSenders"></span></p>
<p><b>Video Recv tracks:</b> <span id="peer1-videoTracksForReceivers"></span></p>
<p><b>Send tracks:</b> <span id="peer1-audioVideoTracksForSenders"></span></p>
<p><b>Recv tracks:</b> <span id="peer1-audioVideoTracksForReceivers"></span></p>
<p><b>Total Data Sent:</b> <span id="peer1-totalDataForSenders"></span></p>
<p><b>Total Data Recv:</b> <span id="peer1-totalDataForReceivers"></span></p>
</div>
<div class="videos-container">
<video id="peer1-to-peer2" autoplay controls></video>
<video id="peer1-to-peer2" controls></video>
<h2>Answerer-to-Offerer</h2>
<p><b>EncryptedAs:</b> <span id="peer2-encryptedAs"></span></p>
<p><b>Local ICE type:</b> <span id="peer2-localIceType"></span></p>
Expand All @@ -166,81 +166,102 @@ <h2>Answerer-to-Offerer</h2>
<p><b>Video Recv bandwidth:</b> <span id="peer2-videoAvailableBandwidthForReceivers"></span> kbps</p>
<p><b>Video Send resolutions:</b> <span id="peer2-videoResolutionsForSenders"></span></p>
<p><b>Video Recv resolutions:</b> <span id="peer2-videoResolutionsForReceivers"></span></p>
<p><b>Audio Send tracks:</b> <span id="peer2-audioTracksForSenders"></span></p>
<p><b>Audio Recv tracks:</b> <span id="peer2-audioTracksForReceivers"></span></p>
<p><b>Video Send tracks:</b> <span id="peer2-videoTracksForSenders"></span></p>
<p><b>Video Recv tracks:</b> <span id="peer2-videoTracksForReceivers"></span></p>
<p><b>Send tracks:</b> <span id="peer2-audioVideoTracksForSenders"></span></p>
<p><b>Recv tracks:</b> <span id="peer2-audioVideoTracksForReceivers"></span></p>
<p><b>Total Data Sent:</b> <span id="peer2-totalDataForSenders"></span></p>
<p><b>Total Data Recv:</b> <span id="peer2-totalDataForReceivers"></span></p>
</div>
</div>
<script>
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
</script>
<script>
var offerer, answerer;
var offererToAnswerer = document.getElementById('peer1-to-peer2');
var answererToOfferer = document.getElementById('peer2-to-peer1');

window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

var iceServers = [];

// Firefox <= 37 doesn't understands "urls"

iceServers.push({
urls: 'stun:stun.l.google.com:19302'
});

iceServers = {
iceServers: iceServers
};

var mediaConstraints = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
</script>
<script>
/* offerer */

function offererPeer(video_stream) {
offerer = new RTCPeerConnection(window.iceServers);
offerer = new RTCPeerConnection(iceServers);
offerer.id = 1;
offerer.addStream(video_stream);

offerer.onaddstream = function (event) {
offererToAnswerer.srcObject = event.stream;
offererToAnswerer.play();
video_stream.getTracks().forEach(function(track) {
offerer.addTrack(track, video_stream);
});

var firedOnce = false;
offerer.ontrack = function (event) {
if(firedOnce) return;
firedOnce = true;

offererToAnswerer.srcObject = event.streams[0];

invokeGetStats(offerer);
if (typeof window.InstallTrigger !== 'undefined') {
getStats(offerer, event.streams[0].getTracks()[0], function(result) {
invokeGetStats(offerer, result);
}, 1000);
}
else {
getStats(offerer, function(result) {
invokeGetStats(offerer, result);
}, 1000);
}
};

offerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
answerer.addIceCandidate(event.candidate);
};

offerer.createOffer(function (offer) {
offerer.setLocalDescription(offer);
answererPeer(offer, video_stream);
}, function() {}, mediaConstraints);
offerer.createOffer(mediaConstraints).then(function (offer) {
offerer.setLocalDescription(offer).then(function() {
answererPeer(offer, video_stream);
}, function() {});
}, function() {});
}
</script>
<script>
/* answerer */

function answererPeer(offer, video_stream) {
answerer = new RTCPeerConnection(window.iceServers);
answerer = new RTCPeerConnection(iceServers);
answerer.id = 2;
answerer.addStream(video_stream);

answerer.onaddstream = function (event) {
answererToOfferer.srcObject = event.stream;
answererToOfferer.play();

invokeGetStats(answerer);

video_stream.getTracks().forEach(function(track) {
answerer.addTrack(track, video_stream);
});

var firedOnce = false;
answerer.ontrack = function (event) {
if(firedOnce) return;
firedOnce = true;

answererToOfferer.srcObject = event.streams[0];

if (typeof window.InstallTrigger !== 'undefined') {
getStats(answerer, event.streams[0].getTracks()[0], function(result) {
invokeGetStats(answerer, result);
}, 1000);
}
else {
getStats(answerer, function(result) {
invokeGetStats(answerer, result);
}, 1000);
}
};

answerer.onicecandidate = function (event) {
Expand All @@ -249,10 +270,11 @@ <h2>Answerer-to-Offerer</h2>
};

answerer.setRemoteDescription(offer);
answerer.createAnswer(function (answer) {
answerer.setLocalDescription(answer);
offerer.setRemoteDescription(answer);
}, function() {}, mediaConstraints);
answerer.createAnswer(mediaConstraints).then(function (answer) {
answerer.setLocalDescription(answer).then(function() {
offerer.setRemoteDescription(answer);
}, function() {});
}, function() {});
}
</script>
<script>
Expand Down Expand Up @@ -293,8 +315,7 @@ <h2>Answerer-to-Offerer</h2>
});
}
};
function invokeGetStats(peer) {
getStats(peer, function(result) {
function invokeGetStats(peer, result) {
if(STOP_GETSTATS) {
result.nomore();
return;
Expand Down Expand Up @@ -362,17 +383,27 @@ <h2>Answerer-to-Offerer</h2>
document.getElementById('peer' + peer.id + '-videoResolutionsForReceivers').innerHTML = result.resolutions.recv.width + 'x' + result.resolutions.recv.height;
}

document.getElementById('peer' + peer.id + '-audioTracksForSenders').innerHTML = result.audio.send.tracks.length + ': ' + result.audio.send.tracks.join(', ');
document.getElementById('peer' + peer.id + '-audioTracksForReceivers').innerHTML = result.audio.recv.tracks.length + ': ' + result.audio.recv.tracks.join(', ');
document.getElementById('peer' + peer.id + '-videoTracksForSenders').innerHTML = result.video.send.tracks.length + ': ' + result.video.send.tracks.join(', ');
document.getElementById('peer' + peer.id + '-videoTracksForReceivers').innerHTML = result.video.recv.tracks.length + ': ' + result.video.recv.tracks.join(', ');
document.getElementById('peer' + peer.id + '-audioVideoTracksForSenders').innerHTML = result.audio.send.tracks.length + result.video.send.tracks.length;
document.getElementById('peer' + peer.id + '-audioVideoTracksForReceivers').innerHTML = result.audio.recv.tracks.length + result.video.recv.tracks.length;

document.getElementById('peer' + peer.id + '-totalDataForSenders').innerHTML = bytesToSize(result.audio.bytesSent + result.video.bytesSent);
document.getElementById('peer' + peer.id + '-totalDataForReceivers').innerHTML = bytesToSize(result.audio.bytesReceived + result.video.bytesReceived);

if (result.datachannel && result.datachannel.state === 'close') {
if (result.ended === true) {
result.nomore();
}

window.getStatsResult = result;
}, 1000);
}

function bytesToSize(bytes) {
var k = 1000;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes === 0) {
return '0 Bytes';
}
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
</script>

Expand Down

0 comments on commit 184abf1

Please sign in to comment.