Skip to content

Commit

Permalink
now detecting bandwidth-speed! h264 codec included.
Browse files Browse the repository at this point in the history
  • Loading branch information
@muaz-khan
muaz-khan committed Nov 19, 2017
1 parent 4c8766e commit dbdab26
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 14 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# [getStats.js](https://github.com/muaz-khan/getStats)
# [getStats.js](https://github.com/muaz-khan/getStats) | WebRTC getStats API

# [Single Page Demo](https://www.webrtc-experiment.com/getStats/) or [Multi User P2P Demo](https://rtcmulticonnection.herokuapp.com/demos/getStats.html)

Expand Down
121 changes: 108 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Demo version: 2017.08.26 -->
<script>window.demoVersion = '2017.11.19';</script>

<!--
> Muaz Khan - www.MuazKhan.com
Expand Down Expand Up @@ -141,6 +141,11 @@ <h1>

<div class="github-stargazers"></div>

<section style="margin: 20px; text-align: center; color: red;">
<small id="demoVersion"></small>
<script>var date=new Date(window.demoVersion),month=date.toLocaleString("en-us",{month:"long"}),day=date.getUTCDate();day.toString().length<=9&&(day=day.toString().length == 1 ? "0"+day : day);var year=date.getUTCFullYear(); document.getElementById("demoVersion").innerHTML="Last Updated On: <time>"+month+" "+day+" "+year+"</time>";</script>
</section>

<div style="text-align: center; margin-bottom: 20px;">
<button id="btn-stop" disabled>Stop Camera & getStats</button>
<select id="select-iceTransportPolicy">
Expand All @@ -152,8 +157,9 @@ <h1>
<option value="tcp">TCP Only</option>
</select>
<select id="select-codec">
<option value="vp9">VP9</option>
<option value="vp8">VP8</option>
<option value="vp9">VP9</option>
<option value="h264">H264</option>
</select>
</div>

Expand All @@ -178,9 +184,9 @@ <h1>
</tr>

<tr>
<td>Available Bandwidth</td>
<td><span id="peer1-availableSendBandwidth"></span></td>
<td><span id="peer2-availableSendBandwidth"></span></td>
<td>Bandwidth Speed</td>
<td><span id="peer1-bandwidthSpeed"></span> per second</td>
<td><span id="peer2-bandwidthSpeed"></span> per second</td>
</tr>

<tr>
Expand Down Expand Up @@ -346,7 +352,7 @@ <h1>
};

offerer.createOffer(mediaConstraints).then(function (offer) {
offer.sdp = preferVP9(offer.sdp);
offer.sdp = preferSelectedCodec(offer.sdp);
offerer.setLocalDescription(offer).then(function() {
answererPeer(offer, video_stream);
}, function() {});
Expand Down Expand Up @@ -390,7 +396,7 @@ <h1>

answerer.setRemoteDescription(offer);
answerer.createAnswer(mediaConstraints).then(function (answer) {
answer.sdp = preferVP9(answer.sdp);
answer.sdp = preferSelectedCodec(answer.sdp);
answerer.setLocalDescription(answer).then(function() {
offerer.setRemoteDescription(answer);
}, function() {});
Expand Down Expand Up @@ -474,7 +480,10 @@ <h1>
document.getElementById('peer' + peer.id + '-codecsSend').innerHTML = result.audio.send.codecs.concat(result.video.send.codecs).join(', ');
document.getElementById('peer' + peer.id + '-codecsRecv').innerHTML = result.audio.recv.codecs.concat(result.video.recv.codecs).join(', ');

document.getElementById('peer' + peer.id + '-availableSendBandwidth').innerHTML = bytesToSize(result.bandwidth.availableSendBandwidth);
var bandwidthSpeed = bytesToSize((result.audio.bytesSent - bandwidthSpeedHelper[peer.id].prevAudioBytesSent) + (result.video.bytesSent - bandwidthSpeedHelper[peer.id].prevVideoBytesSent));
bandwidthSpeedHelper[peer.id].prevAudioBytesSent = result.audio.bytesSent;
bandwidthSpeedHelper[peer.id].prevVideoBytesSent = result.video.bytesSent;
document.getElementById('peer' + peer.id + '-bandwidthSpeed').innerHTML = bandwidthSpeed;

if (result.ended === true) {
result.nomore();
Expand All @@ -483,6 +492,17 @@ <h1>
window.getStatsResult = result;
}

var bandwidthSpeedHelper = {
1: {
prevAudioBytesSent: 0,
prevVideoBytesSent: 0
},
2: {
prevAudioBytesSent: 0,
prevVideoBytesSent: 0
}
};

function bytesToSize(bytes) {
var k = 1000;
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
Expand All @@ -493,16 +513,91 @@ <h1>
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

function preferVP9(sdp) {
if(codec.value === 'vp8') {
return sdp; // ignore VP9
function preferSelectedCodec(sdp) {
var info = splitLines(sdp);

if(codec.value === 'vp8' && info.vp8LineNumber === info.videoCodecNumbers[0]) {
return sdp;
}

if (sdp.indexOf('SAVPF 96 98') === -1 || sdp.indexOf('VP9/90000') === -1) {
if(codec.value === 'vp9' && info.vp9LineNumber === info.videoCodecNumbers[0]) {
return sdp;
}

return sdp.replace('SAVPF 96 98', 'SAVPF 98 96');
sdp = preferCodec(sdp, codec.value, info);

return sdp;
}

function preferCodec(sdp, codec, info) {
var preferCodecNumber = '';

if(codec === 'vp8') {
if(!info.vp8LineNumber) {
alert('This browser do not support VP8 codec.');
return;
}
preferCodecNumber = info.vp8LineNumber;
}

if(codec === 'vp9') {
if(!info.vp9LineNumber) {
alert('This browser do not support VP9 codec.');
return;
}
preferCodecNumber = info.vp9LineNumber;
}

if(codec === 'h264') {
if(!info.h264LineNumber) {
alert('This browser do not support H264 codec.');
return;
}

preferCodecNumber = info.h264LineNumber;
}

var newLine = info.videoCodecNumbersOriginal.split('SAVPF')[0] + 'SAVPF ';

var newOrder = [preferCodecNumber];
info.videoCodecNumbers.forEach(function(codecNumber) {
if(codecNumber === preferCodecNumber) return;
newOrder.push(codecNumber);
});

newLine += newOrder.join(' ');

sdp = sdp.replace(info.videoCodecNumbersOriginal, newLine);
return sdp;
}

function splitLines(sdp) {
var info = {};
sdp.split('\n').forEach(function(line) {
if (line.indexOf('m=video') === 0) {
info.videoCodecNumbers = [];
line.split('SAVPF')[1].split(' ').forEach(function(codecNumber) {
codecNumber = codecNumber.trim();
if(!codecNumber || !codecNumber.length) return;
info.videoCodecNumbers.push(codecNumber);
info.videoCodecNumbersOriginal = line;
});
}

if (line.indexOf('VP8/90000') !== -1 && !info.vp8LineNumber) {
info.vp8LineNumber = line.replace('a=rtpmap:', '').split(' ')[0];
}

if (line.indexOf('VP9/90000') !== -1 && !info.vp9LineNumber) {
info.vp9LineNumber = line.replace('a=rtpmap:', '').split(' ')[0];
}

if (line.indexOf('H264/90000') !== -1 && !info.h264LineNumber) {
info.h264LineNumber = line.replace('a=rtpmap:', '').split(' ')[0];
}
});

return info;
}
</script>

Expand Down

0 comments on commit dbdab26

Please sign in to comment.