title: Uploading a picture taken from a webcam
body: <p>How do i upload a picture that i took from a webcam, <a href="http://www.scottpreston.com/articles/1442.php" rel="nofollow">i've found a code that worked (only on Chrome)</a></p>
  
  <p>i've used the code, and when clic on Take picture, i got the  picture but i dont see it on the source?</p>
  
  <pre><code>&lt;video autoplay id="vid" style="display:none;"&gt;&lt;/video&gt;
  &lt;canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"&gt;&lt;/canvas&gt;&lt;br&gt;
  &lt;button onclick="snapshot()"&gt;Take Picture&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var video = document.querySelector("#vid");
  var canvas = document.querySelector('#canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;
  
  var onCameraFail = function (e) {
      console.log('Camera did not work.', e);
  };
  
  function snapshot() {
      if (localMediaStream) {
          ctx.drawImage(video, 0, 0);
      }
  }
  
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  window.URL = window.URL || window.webkitURL;
  navigator.getUserMedia({video:true}, function (stream) {
      video.src = window.URL.createObjectURL(stream);
      localMediaStream = stream;
  }, onCameraFail);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>How do i add it to a form that have a picture element</p>
  
  <pre><code>&lt;input name="avatar" class="avatar" type="file" required&gt;
  </code></pre>
  
  <p>as you can see, the field is required, so if it is added to that field the form will see it as a non-empty?</p>
  
  <p>Why it dont work on Opera? i use Opera 12.15</p>
  
  <p>Update: <a href="http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/" rel="nofollow">i found how to convert to canvas to image</a>, but dont know how to fill it in the image:</p>
  
  <pre><code>a = canvas.toDataURL("image/jpeg")
  document.getElementById("avatar").src = a
  </code></pre>
  
  <p>if i use the javascript console, i get the source, but if i validate the form, the form thinks that the image is still missing and it is blank.</p>
  
  <p>any ideas?</p>