<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>

  function update(stream) {
    document.querySelector('video').src = stream.url;
  }

<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>

<script>
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;

  function snapshot() {
    if (localMediaStream) {
      ctx.drawImage(video, 0, 0);
      // Chrome için webp döner
      // Diğerleri için png
      document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
  }

  video.addEventListener('click', snapshot, false);


  navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
  }, errorCallback);
</script>

function hasGetUserMedia() {
  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

if (hasGetUserMedia()) {
 //  Bağlantı media bağlantısı destekleniyor
} else {
  alert('Kullandığınız browser ne yazık ki kayıt aygıtlarını desteklemiyor');
}

<script>
  var errorCallback = function(e) {
    console.log('Medya bağlantısına erişim izni vermediniz!', e);
  };

 
  navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    video.onloadedmetadata = function(e) {
     //Veri gelmeye başlıyor yalnız Chrome da bu event geçerli değil.
    };
  }, errorCallback);
</script>