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 );