HTML 5 Web Capture Quirks

Today I've been playing around with HTML 5 Web Camera capture and for the most part its been quite easy. HTML5Rocks has a good intro post which covers many things.

Now it came to testing and everything worked as expected in Chrome and Firefox however in Microsoft Edge (We all test in MS Edge don't we.... ) I found an odd behavior. 

I'm being quite lazy and wanting a 640 x 480px image, so 4:3 aspect ratio which I then take a smaller portion from. Below is what it looks like in Chrome:

However in Edge I was getting:

Originally my source was just:

navigator.getUserMedia({video:true}, (stream) => {

So I decided to add explicit constraints:

 var constraints = {
                video: {

                    width: 640,
                    height: 480,
                }
            };
navigator.getUserMedia(constraints, (stream) => {

However the results were still the same. I then started digging around any Edge documentation I could find and found my way to the initial edge announcement of user media support Midway through this they talk about the various constraints they support and what their defaults are. Turns out these are different than Chrome and Firefox.

Edge by default has an aspect ratio of 1.7777777778 (16:9) and this overrides the height and width I was providing.  To get everything consistent I then simply modified my constraints object to ensure it includes the aspect ratio and everything start behaving itself :)

  var constraints = {
                video: {

                    minWidth: 640,
                    minHeight: 480,
                    aspectRatio: 1.33333333
                }
            };
            navigator.getUserMedia(constraints, (stream) => {

Don't you love browser implementation quirks ;)