title: How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue
body: <p>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 <code>&lt;video autoplay id=&quot;video&quot;&gt;&lt;/video&gt;</code> element.  However, when running in iOS 11, it results in an <code>OverconstrainedError</code> to be thrown:</p>
  
  <pre><code>{message: &quot;Invalid constraint&quot;, constraint: &quot;&quot;}
  </code></pre>
  <ul>
  <li>The code runs fine in Android and successfully opens the camera.</li>
  <li>I've attempted multiple valid configurations with no luck.</li>
  </ul>
  <p>I know iOS 11 just came out so it may be a bug, but any thoughts?  Has anyone else run into this?</p>
  <p><strong>Code:</strong></p>
  <pre><code>var video = document.getElementById('video');
  if(navigator.mediaDevices &amp;&amp; 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);
           });
  }
  </code></pre>
  <hr />
  <h3>Edit 1</h3>
  <p>I've run <code>navigator.mediaDevices.getSupportedConstraints()</code> and it returns the following:</p>
  
  <pre><code>{
      aspectRatio: true,
      deviceid: true,
      echoCancellation: false,
      facingMode: true,
      frameRate: true,
      groupId: true,
      height: true,
      sampleRate: false,
      sampleSize: false,
      volume: true,
      width: true
  }
  </code></pre>
  <p>I've tried configurations omitting the <code>video</code> property, but had no luck.</p>