Recorder

/*! licensed under MIT, https://github.com/sofish */
var Recorder = (function(R, win, doc) {

  // detect CaptureApi
  R._api = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;

  if(!R._api) return alert(':( Your device doesn\'t have native support of Caputure Api.');

  /* play vedio|audio
   * @param el {DOM Element} video/audio element to capture the stream
   * @param type {String} media type, the value can be: 'video', 'audio', or 'both'
   * @param callback {Function} callback to run when the media's metadata is load
   */
  R.play = function(el, type, callback) {

    // only capturing video/audio
    if(!(el && ['VIDEO', 'AUDIO'].indexOf(el.nodeName.toUpperCase()) !== -1)) return;

    var error, success, constraints;

    // notice user when an error occurred
    error = function() {
      alert('an error occurred when the browser trying to record the view stream!');
    }

    // set the video source to the stream when success to connect
    success = function(stream) {
      win.URL = win.URL || win.webkitURL;
      el.src = win.URL ? win.URL.createObjectURL(stream) : stream;
      // render callback when the metadata of the video is loaded

      el.addEventListener('loadedmetadata', function(e) {
        callback && callback(e);
        !el.autoplay && el.play();
      }, false);
    }

    // decide what to capture
    switch (type) {
      case 'video': constraints = { video: true }
        break;
      case 'audio': constraints = { audio: true }
        break;
      default : constraints = {
        video: true,
        audio: true
      }
    }

    // SPECIFIC: navigator.getUserMedia ( constraints, successCallback, errorCallback );
    // NOTE: resolve wrapping error:
    //  `NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object`
    navigator.getUserMedia ? navigator.getUserMedia(constraints, success, error) :
      navigator[R._api.name](constraints, success, error);
  }

  /* take picture
   * @param video {DOM Element} the video element
   * @return Image {String: DataURL}
   */
  R.snapshot = function(video) {

    if (!(video && video.videoHeight)) return;

    // using canvas to generate snapshot
    var canvas = doc.createElement('canvas')
      , ctx = canvas.getContext('2d');

    canvas.height = video.videoHeight;
    canvas.width = video.videoWidth;

    ctx.drawImage(video, 0, 0);
    return canvas.toDataURL('image/png');
  }

  return R;

})(Recorder || {}, window, document);