vahidov/gist:d2ae7286e9e4ffec5b4885e206bf3618

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style type="text/css">
    #errors {
        color: gray;
    }
    .result{
        font-size: 14px;
        -webkit-column-count: 8;
        -moz-column-count: 8;
        column-count: 9
     }
    .result li {
        display: block;
        margin: 2px 0;
    }
</style>
<script>
    window.stream = null;
    function clearStream(){
        if (window.stream) {
            window.stream.getTracks().forEach(function (track) {
                track.stop();
            });
        }
    }
    function gum(width, height, res){
        clearStream();
        //create constraints object
        var constraints = {
            audio: false,
            video: {
                width: {'exact': width},
                height: {'exact': height}
            }
        };
        setTimeout(function() {
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (mediaStream) {
                    var child = document.createElement('li');
                    child.innerHTML = width + "x" + height;
                    document.getElementById("result" + (res ? res : '')).appendChild(child);
                    window.stream = mediaStream;
                })
                .catch(function (error) {
                    var child = document.createElement('div');
                    child.innerHTML = width + "x" + height;
                    document.getElementById("errors").appendChild(child);
                    console.log('getUserMedia error!', error);
                });
        }, (stream ? 200 : 0));  //official examples had this at 200
    }
    function start() {
        document.getElementById("result").innerHTML = '';
        document.getElementById("result169").innerHTML = '';
        document.getElementById("errors").innerHTML = '';
        for (w = 120; w <= 1200; w++) {
            gum(w, Math.round(w * 0.75), null);
            gum(w, Math.round(w * 0.666666666666), '169');
        }
        clearStream();
    }
    navigator.mediaDevices.getUserMedia({video: {width: 640, height: 480}}).then(function(stream) {window.stream = stream}).catch(function(err){console.log('err');console.log(err);});
    clearStream();
</script>
<button onclick="start();return false;">Start test</button>
<div style="color: red; margin-top: 20px;">Results 4x3:</div>
<ul id="result" class="result"></ul>
<div style="color: red; margin-top: 20px;">Results 16x9:</div>
<ul id="result169" class="result"></ul>

<div style="color: red; margin-top: 20px;">Errors:</div>
<div id="errors" class="result"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	</head>
	<body>
	<style type="text/css">
	#errors {
	color: gray;
	}
	.result{
	font-size: 14px;
	-webkit-column-count: 8;
	-moz-column-count: 8;
	column-count: 9
	}
	.result li {
	display: block;
	margin: 2px 0;
	}
	</style>
	<script>
	window.stream = null;
	function clearStream(){
	if (window.stream) {
	window.stream.getTracks().forEach(function (track) {
	track.stop();
	});
	}
	}
	function gum(width, height, res){
	clearStream();
	//create constraints object
	var constraints = {
	audio: false,
	video: {
	width: {'exact': width},
	height: {'exact': height}
	}
	};
	setTimeout(function() {
	navigator.mediaDevices.getUserMedia(constraints)
	.then(function (mediaStream) {
	var child = document.createElement('li');
	child.innerHTML = width + "x" + height;
	document.getElementById("result" + (res ? res : '')).appendChild(child);
	window.stream = mediaStream;
	})
	.catch(function (error) {
	var child = document.createElement('div');
	child.innerHTML = width + "x" + height;
	document.getElementById("errors").appendChild(child);
	console.log('getUserMedia error!', error);
	});
	}, (stream ? 200 : 0)); //official examples had this at 200
	}
	function start() {
	document.getElementById("result").innerHTML = '';
	document.getElementById("result169").innerHTML = '';
	document.getElementById("errors").innerHTML = '';
	for (w = 120; w <= 1200; w++) {
	gum(w, Math.round(w * 0.75), null);
	gum(w, Math.round(w * 0.666666666666), '169');
	}
	clearStream();
	}
	navigator.mediaDevices.getUserMedia({video: {width: 640, height: 480}}).then(function(stream) {window.stream = stream}).catch(function(err){console.log('err');console.log(err);});
	clearStream();
	</script>
	<button onclick="start();return false;">Start test</button>
	<div style="color: red; margin-top: 20px;">Results 4x3:</div>
	<ul id="result" class="result"></ul>
	<div style="color: red; margin-top: 20px;">Results 16x9:</div>
	<ul id="result169" class="result"></ul>

	<div style="color: red; margin-top: 20px;">Errors:</div>
	<div id="errors" class="result"></div>
	</body>
	</html>