Javascript - Detect Internet Speed/Bandwidth

Question

Using below script to detect internet speed of a system connected to a network. Reference javascript to detect internet speed

However, speed results on both https://fast.com/ and http://www.speedtest.net/ are different.

var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg"; 
var downloadSize = 4995374; //bytes

function ShowProgressMessage(msg) {
    if (console) {
        if (typeof msg == "string") {
            console.log(msg);
        } else {
            for (var i = 0; i < msg.length; i++) {
                console.log(msg[i]);
            }
        }
    }

    var oProgress = document.getElementById("progress");
    if (oProgress) {
        var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
        oProgress.innerHTML = actualHTML;
    }
}

function InitiateSpeedDetection() {
    ShowProgressMessage("Loading the image, please wait...");
    window.setTimeout(MeasureConnectionSpeed, 1);
};    

if (window.addEventListener) {
    window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', InitiateSpeedDetection);
}

function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }

    download.onerror = function (err, msg) {
        ShowProgressMessage("Invalid image, or error downloading");
    }

    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;

    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        ShowProgressMessage([
            "Your connection speed is:", 
            speedBps + " bps", 
            speedKbps + " kbps", 
            speedMbps + " Mbps"
        ]);
    }
}

The point here is to change video quality run time based on user's internet connection speed. I need to fetch network speed, pass it to server and based on that video quality will be changed.

How do I achieve the same ?

Answer 1

Your network speed will vary based on the bandwidth available. So you need to run the speed test at particular intervals, say for every 10 or 15 secs. But even if you are able to run these tests without compromising the performance and the strain you put on the browser. Your next objective will be to change the quality of the video to a lower quality, which again will be a head ache because it's not going to be a simple video src switch.

Adaptive bit rate streaming is the one you are looking for. There are some media servers who provide that functionality. If you are looking for something more of a open source to understand and playaround, then you can try Google Shaka Player. https://github.com/google/shaka-player .

One more thing to note is Adaptive bit rate streaming won't work in IE without any plugin help.