
// /**
//  * CanvasRecorder.js
//  * To record canvas effitiently using MediaRecorder
//  * @param {HTMLElement} canvas
//  * @param {number} videoBitsPerSec
//  * @param {object} callback
//  */
// function CanvasRecorder(canvas, videoBitsPerSec, callback) {
//   this.start = startRecording;
//   this.stop = stopRecording;
//   this.pause = pauseRecording;
//   this.resume = resumeRecording;
//   this.requestData = requestData;
//   this.getState = function() {
//     if (mediaRecorder) {
//       return mediaRecorder.state;
//     } else {
//       return false;
//     }
//   };

//   // this.save = download;

//   let recordedBlobs = [];
//   let supportedType = null;
//   let mediaRecorder = null;
//   const ctx = canvas.getContext('2d');
//   const stream = canvas.captureStream();
//   if (typeof stream == undefined || !stream) {
//     return;
//   }

//   /**
//      * startRecording
//      */
//   function startRecording() {
//     const types = [     
//       'video/webm\;codecs=vp8',     
//       'video/webm',
//       'video/webm,codecs=vp9',
//       'video/vp8',
//       'video/webm\;codecs=daala',
//       'video/webm\;codecs=h264',
//       'video/mpeg',
//       'video/mp4',
//     ];

//     for (const i in types) {
//       if (MediaRecorder.isTypeSupported(types[i])) {
//         supportedType = types[i];
//         break;
//       }
//     }
//     if (supportedType == null) {
//       // console.log('No supported type found for MediaRecorder');
//     }
//     const options = {
//       mimeType: supportedType,
//       videoBitsPerSecond: videoBitsPerSec || 2500000, // 2.5Mbps
//     };

//     recordedBlobs = [];
//     try {
//       mediaRecorder = new MediaRecorder(stream, options);
//     } catch (e) {
//       alert('MediaRecorder is not supported by this browser.');
//       // console.error('Exception while creating MediaRecorder:', e);
//       return;
//     }

//     //  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
//     mediaRecorder.onstop = handleStop;
//     mediaRecorder.ondataavailable = handleDataAvailable;
//     mediaRecorder.start(1000); // collect 100ms of data blobs
//     // console.log('MediaRecorder started', mediaRecorder);
//   }

//   /**
//    * handleDataAvailable
//    * @param {object} event
//    */
//   function handleDataAvailable(event) {
//     if (event.data && event.data.size > 0) {
//       // recordedBlobs.push(event.data);
//       // config.onDataAvailable(event.data);
//       callback(event.data);
//     }
//   }

//   /**
//    * request data
//    * @param {object} event
//    */
//   function requestData() {
//    if( mediaRecorder) {
//     mediaRecorder.requestData();
//    }
//   }

//   /**
//    * handleStop
//    * @param {object} event
//    */
//   function handleStop(event) {
    
//   }


//   /**
//    * stopRecording
//    */
//   function stopRecording() {
//     if (mediaRecorder && (mediaRecorder.state === 'recording' ||
//               mediaRecorder.state === 'paused')) {
//       mediaRecorder.stop();
//       // console.log('Recorded Blobs: ', recordedBlobs);
//       // video.controls = true;
//     }
//   }

//   /**
//    * pauseRecording
//    */
//   function pauseRecording() {
//     if (mediaRecorder && mediaRecorder.state === 'recording') {
//       mediaRecorder.pause();
//     }
//   }


//   /**
//    * resume recording
//    */
//   function resumeRecording() {
//     if (mediaRecorder && mediaRecorder.state === 'paused') {
//       mediaRecorder.resume();
//     }
//   }

//   // /**
//   //    * download
//   //    * @param {string} fileName
//   //    */
//   // function download(fileName) {
//   //   const name = fileName || 'recording.webm';
//   //   const blob = new Blob(recordedBlobs, {type: supportedType});
//   //   const url = window.URL.createObjectURL(blob);
//   //   const a = document.createElement('a');
//   //   a.style.display = 'none';
//   //   a.href = url;
//   //   a.download = name;
//   //   document.body.appendChild(a);
//   //   a.click();
//   //   setTimeout(() => {
//   //     document.body.removeChild(a);
//   //     window.URL.revokeObjectURL(url);
//   //   }, 100);
//   // }
// }

