[SOLVED] How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue

How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue

I'm attempting to run the following code in Safari in iOS 11. It should prompt the user to give access to their devices camera and then display it in my <video autoplay id="video"></video> element. However, when running in iOS 11, it results in an OverconstrainedError to be thrown:

{message: "Invalid constraint", constraint: ""}

The code runs fine in Android and successfully opens the camera.
I've attempted multiple valid configurations with no luck.

I know iOS 11 just came out so it may be a bug, but any thoughts? Has anyone else run into this?

Code:

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({video: true})
         .then(function(stream) {
             video.src = window.URL.createObjectURL(stream);
             video.play();
         })
         .catch(function(err) {
             console.log(err);
         });
}

I've run navigator.mediaDevices.getSupportedConstraints() and it returns the following:

{
    aspectRatio: true,
    deviceid: true,
    echoCancellation: false,
    facingMode: true,
    frameRate: true,
    groupId: true,
    height: true,
    sampleRate: false,
    sampleSize: false,
    volume: true,
    width: true
}

I've tried configurations omitting the video property, but had no luck.

Solution

It appears to have been a bug that was corrected, because I just tried it again and the error message no longer appears.

Note that while the error message went away, I did have to make one more change for it to work, which was adding video.srcObject = stream; in the then callback.