title: How can I capture an image via the user's webcam using getUserMedia?
body: <p>I want to make a program on the web which will capture an image via the user's webcam. </p>
  
  <p>I am using the <code>getUserMedia</code> Web API. Here is my code, but it does not work. How can I change it to capture the webcam image? </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;video autoplay="true" id="videoElement"&gt;
  
      &lt;/video&gt;
  &lt;/div&gt;
  &lt;script&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>There is the JS:</p>
  
  <pre><code>var video = document.querySelector("#videoElement");
  
  navigator.getUserMedia, elem = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
  
  console.log(navigator.getUserMedia);
  
  if (navigator.getUserMedia) {
      navigator.getUserMedia({video: true}, handleVideo, videoError);
  }
  
  function handleVideo(stream) {
      video.src = window.URL.createObjectURL(stream);
  }
  
  function videoError(e) {
      // do something
  }
  </code></pre>