detect internet connection type on my mobile

Question

I need to send video to my clients on their mobile but each client connect to internet in different way there is slow connection and there is fast and i have 2 version from video so i can send the small one to slow connection and the large to fast.

setInterval(function(){
    if(navigator.onLine){
        $("body").html("Connected.");
    }else{
        $("body").html("Not connected.");
    }
},1000);

the code above return if connected or not.

the question now is:

Is there way to detect internet connection type on my mobile? such as 3G, WIFI ... etc.

Answer 1

You can only do that if the platform exposes some specific API, but it's not part of the regular browser API exposed to JavaScript. So the short answer is: no.

An alternative would be to make a request to a file of a known size and see how long it takes to transfer, from which you can deduce the speed of the connection, but this means extra traffic, so be sure to choose the file well (it should be small, so as to not generate too much mobile traffic, but not too small that you don't get any useful info from downloading it).

Unfortunately though, that might not tell you much, because, being mobile, the client is likely to switch from one connection to a completely different one at any second. Even more, on the exact same connection, the time it takes to receive data from the server can be drastically different from one second to the next, depending on many factors that affect mobile clients. So if this is a video application, this really should be controlled by the server, and the server should decide to throttle down the quality of the video if it sees that too few packets are being sent. There are media servers that do just that, such as Red5 , Wowza or Adobe Media Server .

Answer 2

You can code something similar to this .

var imageAddr = "http://www.tranquilmusic.ca/images/cats/Cat2.JPG" + "?n=" + Math.random();
    var startTime, endTime;
    var downloadSize = 5616998;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }
    startTime = (new Date()).getTime();
    download.src = imageAddr;

    function showResults() {
        var duration = (endTime - startTime) / 1000; //Math.round()
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        alert("Your connection speed is: \n" + 
               speedBps + " bps\n"   + 
               speedKbps + " kbps\n" + 
               speedMbps + " Mbps\n" );
    }​

You can use this code to detect the client internet speed. There's no way you could detect connection type. A 256+ kb file would be sufficient to detect the speed.

Answer 3

One way is to request a file and see how long it takes to download. See this for an example.

If your clients are on a mobile device, every additional byte that your site downloads may cost them. Also, there are many factors that influence how long downloading a file will take, and the "connection type" is just one of them.

However, this method should give you a good approximation.

Answer 4

The original question doesn't differentiate between connection speed for (A) downloads and (B) uploads (yes, he needs to send video to the end user, but perhaps it's a video that the user just uploaded). The accepted answer is useful for measuring download speeds.

For upload speeds, you might consider embedding a base64-encoded image in a hidden form field for a hidden form. Also make a hidden iframe and target the hidden form into the hidden iframe. Submit the hidden form via javascript, storing the current time in a JS variable. On the resulting page, when onload fires, communicate via javascript between the iframe and its parent window, sending the time when the onload event fired. Compare the start time with the end time, and divide by the amount of bytes transmitted.

You'll need to have the document in the iframe be on the same domain as the document in the window that contains the iframe, in order to adhere to the browser's same-origin policy.