title: Open front camera on android chrome browser using javascript
body: <p>How to open front camera on android phone on a button click in chrome browser of android phone?</p>
  
  <p>I am working on augmented reality for web which opens rear camera on any phone by default in a browser (Basically chrome). I want to open front camera on a click of a button but i am unable to do it. Following is my code:</p>
  
  <pre><code>        &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
          "http://www.w3.org/TR/html4/loose.dtd"&gt;
          &lt;html lang="en"&gt;
          &lt;head&gt;
          &lt;script src="three.js"&gt;&lt;/script&gt;
          &lt;script src="aframe.min.js"&gt;&lt;/script&gt;
          &lt;script src="aframe-ar.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;
          &lt;/script&gt;
          &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;
          &lt;/script&gt; 
          &lt;/head&gt;
          &lt;body&gt;
          &lt;button onclick="callMe()" style="margin-top:150px; 
          padding:20px;"&gt;Click Me&lt;/button&gt;
          &lt;a-scene embedded arjs='sourceType: webcam;'&gt;&lt;a-assets&gt;
          &lt;img id="my_image" src="Samplee.jpg" draggable="true" 
          crossorigin="anonymous"&gt;&gt;&lt;img&gt;
          &lt;/a-assets &gt;
          &lt;a-image id="image_disp"  src="#my_image" rotation="90 180 0" 
          visible="true"&gt;&lt;/a-image&gt; 
          &lt;a-marker-camera preset='hiro'&gt;&lt;/a-marker-camera&gt;
          &lt;/a-scene&gt;
          &lt;/body&gt;
          &lt;script&gt;
          function callMe(){
          var video = document.querySelector('video');
          navigator.mediaDevices.enumerateDevices().
          then(function(devices) 
          {
            var userMediaConstraints = {
            audio: false,
            video: {
            facingMode: 'user',
            width: 1920, 
            height: 1080
          }
          } 
          navigator.mediaDevices.getUserMedia(userMediaConstraints)
          .then(function success(stream) {
          video.srcObject = stream;
          document.body.addEventListener('click', function(){
          video.play();
          })
          var interval = setInterval(function() {
          if (!video.videoWidth)  return;
          clearInterval(interval)
          }, 1000/50);
          }).catch(function(error) {
          console.log("Can't access user media", error);
          alert("Can't access user media :()");
          });
          }).catch(function(err) {
          console.log(err.name + ": " + err.message);
          });
          }
          &lt;/script&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>The code contains no video tag but still I am trying to get it by Id as the video tag is added by aframe-ar.js.                  </p>