title: How to record a video using webrtc
body: <p>I need to record a video using the laptop camera on my website built using nodejs. For this I am using webRTC. So far I could take a photo using the laptop camera but I need to record a video. Could some one help as to how the code would go? My current code is as follows:</p>
  
  <pre><code>&lt;video id="video"&gt;&lt;/video&gt;
  &lt;button id="startbutton"&gt;Take photo&lt;/button&gt;
  &lt;button id="pausebutton"&gt;Pause&lt;/button&gt;
  &lt;button id="resumebutton"&gt;Resume&lt;/button&gt;
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
  &lt;script type="text/javascript"&gt;
  (function() {
  
    var streaming = false,
        video        = document.querySelector('#video'),
        canvas       = document.querySelector('#canvas'),
        //photo        = document.querySelector('#photo'),
        startbutton  = document.querySelector('#startbutton'),
        width = 620,
        height = 50;
  
    navigator.getMedia = ( navigator.getUserMedia ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia ||
                           navigator.msGetUserMedia);
  
    navigator.getMedia(
      {
        video: true,
        audio: false
      },
      function(stream) {
        if (navigator.mozGetUserMedia) {
          video.mozSrcObject = stream;
        } else {
          var vendorURL = window.URL || window.webkitURL;
          video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
      },
      function(err) {
        console.log("An error occured! " + err);
      }
    );
  
    video.addEventListener('canplay', function(ev){
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth/width);
        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);
  
    function takepicture() {
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(video, 0, 0, width, height);
      var data = canvas.toDataURL('image/png');
     // photo.setAttribute('src', data);
    }
  
  
    function pausevideo() {
      canvas.width = width;
      canvas.height = height;
      video.pause();
    }
    function resumevideo() {
      canvas.width = width;
      canvas.height = height;
      video.play();
    }
  
  
    startbutton.addEventListener('click', function(ev){
        takepicture();
      ev.preventDefault();
    }, false);
  
    pausebutton.addEventListener('click', function(ev){
        pausevideo();
      ev.preventDefault();
    }, false);
  
    resumebutton.addEventListener('click', function(ev){
        resumevideo();
      ev.preventDefault();
    }, false);
  
  
  })();
  &lt;/script&gt;
  </code></pre>