RecordRTCPromisesHandler now added in the "RecordRTC.js"

jaymo107 · Mar 17, 2017 · 2240f35 · 2240f35
1 parent 1d20b51
commit 2240f35
Show file tree

Hide file tree

Showing 8 changed files with 291 additions and 48 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -49,7 +49,8 @@ module.exports = function(grunt) {
                     'dev/Whammy.js',
                     'dev/DiskStorage.js',
                     'dev/GifRecorder.js',
-                    'dev/MultiStreamRecorder.js'
+                    'dev/MultiStreamRecorder.js',
+                    'dev/RecordRTC.promises.js'
                 ],
                 dest: 'RecordRTC.js',
             },
@@ -90,6 +91,7 @@ module.exports = function(grunt) {
                     webkitAudioContext: true,
                     mozAudioContext: true,
                     AudioContext: true,
+                    Promise: true,
                     JSON: true,
                     typeof: true,
                     define: true

diff --git a/README.md b/README.md
@@ -852,9 +852,6 @@ In the above example; you can see that `recordRTC` instance object is used inste
 ```html
 <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
 
-<!-- link this file as well -->
-<script src="/dev/RecordRTC.promises.js"></script>
-
 <script>
 // use "RecordRTCPromisesHandler" instead of "RecordRTC"
 var recorder = new RecordRTCPromisesHandler(mediaStream, options);

diff --git a/RecordRTC.js b/RecordRTC.js
@@ -1,6 +1,6 @@
 'use strict';
 
-// Last time updated: 2017-03-16 6:13:24 PM UTC
+// Last time updated: 2017-03-17 4:24:07 AM UTC
 
 // ________________
 // RecordRTC v5.4.1
@@ -324,7 +324,7 @@ function RecordRTC(mediaStream, config) {
         startRecording: startRecording,
 
         /**
-         * This method stops the recording. It takes a single "callback" parameter. It is strongly recommended to get "blob" or "URI" inside the callback to make sure all recorders finished their job.
+         * This method stops the recording. It is strongly recommended to get "blob" or "URI" inside the callback to make sure all recorders finished their job.
          * @param {function} callback - Callback to get the recorded blob.
          * @method
          * @memberof RecordRTC
@@ -339,11 +339,11 @@ function RecordRTC(mediaStream, config) {
         stopRecording: stopRecording,
 
         /**
-         * @todo Firefox is unable to pause the recording. Fix it.
          * This method pauses the recording. You can resume recording using "resumeRecording" method.
          * @method
          * @memberof RecordRTC
          * @instance
+         * @todo Firefox is unable to pause the recording. Fix it.
          * @example
          * recorder.pauseRecording();  // pause the recording
          * recorder.resumeRecording(); // resume again
@@ -362,11 +362,11 @@ function RecordRTC(mediaStream, config) {
         resumeRecording: resumeRecording,
 
         /**
-         * @todo This method should be deprecated.
          * This method initializes the recording.
          * @method
          * @memberof RecordRTC
          * @instance
+         * @todo This method should be deprecated.
          * @example
          * recorder.initRecorder();
          */
@@ -410,11 +410,11 @@ function RecordRTC(mediaStream, config) {
         },
 
         /**
-         * @todo Figure out the difference between "reset" and "clearRecordedData" methods.
          * This method can be used to clear/reset all the recorded data.
          * @method
          * @memberof RecordRTC
          * @instance
+         * @todo Figure out the difference between "reset" and "clearRecordedData" methods.
          * @example
          * recorder.clearRecordedData();
          */
@@ -549,13 +549,13 @@ function RecordRTC(mediaStream, config) {
         },
 
         /**
-         * @todo This method should be deprecated.
          * This method appends an array of webp images to the recorded video-blob. It takes an "array" object.
          * @type {Array.<Array>}
          * @param {Array} arrayOfWebPImages - Array of webp images.
          * @method
          * @memberof RecordRTC
          * @instance
+         * @todo This method should be deprecated.
          * @example
          * var arrayOfWebPImages = [];
          * arrayOfWebPImages.push({
@@ -598,6 +598,7 @@ function RecordRTC(mediaStream, config) {
          * @instance
          * @example
          * recorder = RecordRTC(audioStream, {
+         *     type: 'audio',
          *     bufferSize:  16384
          * });
          */
@@ -610,6 +611,7 @@ function RecordRTC(mediaStream, config) {
          * @instance
          * @example
          * recorder = RecordRTC(audioStream, {
+         *     type: 'audio',
          *     sampleRate: 96000
          * });
          */
@@ -4253,11 +4255,7 @@ if (typeof RecordRTC !== 'undefined') {
  * @class
  * @example
  * var options = {
- *     mimeType: 'video/webm',
- *		video: {
- *          width: 360,
- *          height: 240
- *      }
+ *     mimeType: 'video/webm'
  * }
  * var recorder = new MultiStreamRecorder(ArrayOfMediaStreams, options);
  * recorder.record();
@@ -4269,7 +4267,7 @@ if (typeof RecordRTC !== 'undefined') {
  * });
  * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
  * @param {MediaStreams} mediaStreams - Array of MediaStreams.
- * @param {object} config - {disableLogs:true, frameInterval: 10, mimeType: "video/webm"}
+ * @param {object} config - {disableLogs:true, frameInterval: 1, mimeType: "video/webm"}
  */
 
 function MultiStreamRecorder(arrayOfMediaStreams, options) {
@@ -4347,13 +4345,20 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
 
         mediaRecorder.stop(function(blob) {
             callback(blob);
+
+            self.clearRecordedData();
         });
     };
 
     function getMixedAudioStream() {
         // via: @pehrsons
-        self.audioContext = new AudioContext();
-        var audioSources = [];
+        if (!Storage.AudioContextConstructor) {
+            Storage.AudioContextConstructor = new Storage.AudioContext();
+        }
+
+        self.audioContext = Storage.AudioContextConstructor;
+
+        self.audioSources = [];
 
         self.gainNode = self.audioContext.createGain();
         self.gainNode.connect(self.audioContext.destination);
@@ -4369,15 +4374,15 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
 
             var audioSource = self.audioContext.createMediaStreamSource(stream);
             audioSource.connect(self.gainNode);
-            audioSources.push(audioSource);
+            self.audioSources.push(audioSource);
         });
 
         if (!audioTracksLength) {
             return;
         }
 
         self.audioDestination = self.audioContext.createMediaStreamDestination();
-        audioSources.forEach(function(audioSource) {
+        self.audioSources.forEach(function(audioSource) {
             audioSource.connect(self.audioDestination);
         });
         return self.audioDestination.stream;
@@ -4410,6 +4415,8 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
             console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
         }
 
+        canvas.stream = capturedStream;
+
         return capturedStream;
     }
 
@@ -4456,6 +4463,10 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
     }
 
     function drawImage(video, idx) {
+        if (isStoppedRecording) {
+            return;
+        }
+
         var x = 0;
         var y = 0;
         var width = video.width;
@@ -4539,13 +4550,39 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
      */
     this.clearRecordedData = function() {
         videos = [];
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        isStoppedRecording = false;
-        mediaRecorder = null;
+        isStoppedRecording = true;
 
         if (mediaRecorder) {
             mediaRecorder.clearRecordedData();
         }
+
+        mediaRecorder = null;
+
+        if (self.gainNode) {
+            self.gainNode.disconnect();
+            self.gainNode = null;
+        }
+
+        if (self.audioSources.length) {
+            self.audioSources.forEach(function(source) {
+                source.disconnect();
+            });
+            self.audioSources = [];
+        }
+
+        if (self.audioDestination) {
+            self.audioDestination.disconnect();
+            self.audioDestination = null;
+        }
+
+        self.audioContext = null;
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (canvas.stream) {
+            canvas.stream.stop();
+            canvas.stream = null;
+        }
     };
 
     /**
@@ -4577,10 +4614,85 @@ function MultiStreamRecorder(arrayOfMediaStreams, options) {
         if (stream.getAudioTracks().length && self.audioContext) {
             var audioSource = self.audioContext.createMediaStreamSource(stream);
             audioSource.connect(self.audioDestination);
+            self.audioSources.push(audioSource);
         }
     };
 }
 
 if (typeof RecordRTC !== 'undefined') {
     RecordRTC.MultiStreamRecorder = MultiStreamRecorder;
 }
+
+// _____________________
+// RecordRTC.promises.js
+
+/**
+ * RecordRTCPromisesHandler adds promises support in RecordRTC
+ * @summary Promises for RecordRTC
+ * @license {@link https://github.com/muaz-khan/RecordRTC#license|MIT}
+ * @author {@link http://www.MuazKhan.com|Muaz Khan}
+ * @typedef RecordRTCPromisesHandler
+ * @class
+ * @example
+ * var recorder = new RecordRTCPromisesHandler(mediaStream, options);
+ * recorder.startRecording().then(successCB).catch(errorCB);
+ * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
+ * @param {MediaStream} mediaStream - Single media-stream object, array of media-streams, html-canvas-element, etc.
+ * @param {object} config - {type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, video: HTMLVideoElement, etc.}
+ */
+
+function RecordRTCPromisesHandler(mediaStream, options) {
+    if (!this) {
+        throw 'Use "new RecordRTCPromisesHandler()"';
+    }
+
+    var self = this;
+
+    self.recordRTC = new RecordRTC(mediaStream, options);
+
+    this.startRecording = function() {
+        return new Promise(function(resolve, reject) {
+            try {
+                self.recordRTC.startRecording();
+                resolve();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    };
+
+    this.stopRecording = function() {
+        return new Promise(function(resolve, reject) {
+            try {
+                self.recordRTC.stopRecording(function(url) {
+                    self.blob = self.recordRTC.getBlob();
+                    resolve(url);
+                });
+            } catch (e) {
+                reject(e);
+            }
+        });
+    };
+
+    this.getDataURL = function(callback) {
+        return new Promise(function(resolve, reject) {
+            try {
+                self.recordRTC.getDataURL(function(dataURL) {
+                    resolve(dataURL);
+                });
+            } catch (e) {
+                reject(e);
+            }
+        });
+    };
+
+    this.getBlob = function() {
+        return self.recordRTC.getBlob();
+    };
+
+    this.blob = null;
+}
+
+if (typeof RecordRTC !== 'undefined') {
+    RecordRTC.RecordRTCPromisesHandler = RecordRTCPromisesHandler;
+}
diff --git a/RecordRTC.min.js b/RecordRTC.min.js