title: WebRTC getUserMedia() works only on Firefox
body: <p>I'm working on a mobile web project that needs to access the camera and take a photo and then manipulate it. The problem is that we need to take the photo directly from the browser, and not open the native camera app to take it. </p>
  
  <p>Ok, I use WebRTC for this task. I access to <code>getUserMedia()</code> and play a "video" that is the real time camera view. This task is for Android and iOS.</p>
  
  <p>This works perfectly on Firefox. I assume that in Safari this will be impossible to achieve since <code>getUserMedia()</code> is still not supported by this browser, but Google Chrome have support but I'm unable to make it work on Chrome.</p>
  
  <p>The problem on Chrome seems to be a bug that user is unable to select rear or front camera, so the image never displays, it always is a black image.</p>
  
  <p>My code is very simple, I take it from <a href="https://davidwalsh.name/browser-camera" rel="nofollow noreferrer">https://davidwalsh.name/browser-camera</a> but theorically it works on all browsers, but I can't make it work on Chrome. This is the code:</p>
  
  <pre><code>&lt;video id="video" width="480" height="640" autoplay controls&gt;&lt;/video&gt;
  &lt;button id="snap"&gt;Capture&lt;/button&gt;
  &lt;canvas id="canvas" width="480" height="740"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
  // Grab elements, create settings, etc.
  var video = document.getElementById('video');
  var i = 0;
  // Get access to the camera!
  if(navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
      // Not adding `{ audio: true }` since we only want video now
      navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
          video.src = window.URL.createObjectURL(stream);
          video.play();
      });
  }
  else if(navigator.getUserMedia) { // Standard
      navigator.getUserMedia({ video: true }, function(stream) {
          video.src = stream;
          video.play();
      }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
      navigator.webkitGetUserMedia({ video: true }, function(stream){
      alert(window.webkitURL);
      alert(window.webkitURL.createObjectURL(stream));
          video.src = window.webkitURL.createObjectURL(stream);
          video.play();
      }, errBack);
  } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
      navigator.mozGetUserMedia({ video: true }, function(stream){
          video.src = window.URL.createObjectURL(stream);
          video.play();
      }, errBack);
  }
  
  // Elements for taking the snapshot
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var video = document.getElementById('video');
  
  // Trigger photo take
  document.getElementById("snap").addEventListener("click", function() {
      context.drawImage(video, 0, 0, 640, 480);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I make it work on Chrome? How can I make that Chrome ask to user what camera he needs to use (rear / front)? I've found over internet a user that tells Chrome has a bug selecting the camera, so I think this is the problem.</p>
  
  <blockquote>
    <p>Note that on Chrome Desktop it works perfectly, since there is only one camera and has not to delegate on the user to choose what camera should use. But on mobile devices with two cameras is impossible to choose how.</p>
  </blockquote>
  
  <p>Thank you.</p>
  
  <p>I'm not using polyfills. The duplicate mark is not solving my issue. I need some help with this. I need a canonical answer with a solution to the problem. Thank you for your time! I offer a bounty. </p>