HTML5 Camera and Microphone Demo

HTML5 Camera and Microphone Demo

by rasata

HTML

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

CSS

video {
    height:300px;
    width:300px
}

JavaScript

var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');

  function snapshot() {
      ctx.drawImage(video, 0, 0);
      document.querySelector('img').src = canvas.toDataURL('image/webp');
  }

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

  navigator.webkitGetUserMedia({
      "video": true,
          "audio": true
  },

  function (s) {
      video.src = window.webkitURL.createObjectURL(s);
  },

  function (e) {
      console.log(e);
  });