Added [email protected] Fixed tinny bugs in MediaRecorderWrapper.js

streamproc · May 15, 2016 · 62ab10e · 62ab10e
1 parent ce029d2
commit 62ab10e
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 28 deletions.
diff --git a/AudioStreamRecorder/MediaRecorderWrapper.js b/AudioStreamRecorder/MediaRecorderWrapper.js
@@ -22,7 +22,7 @@ function MediaRecorderWrapper(mediaStream) {
      * @example
      * recorder.record();
      */
-    this.start = function(timeSlice) {
+    this.start = function(timeSlice, __disableLogs) {
         if (!self.mimeType) {
             self.mimeType = 'video/webm';
         }
@@ -46,12 +46,13 @@ function MediaRecorderWrapper(mediaStream) {
         }
 
         self.blob = null;
+        self.dontFireOnDataAvailableEvent = false;
 
         var recorderHints = {
             mimeType: self.mimeType
         };
 
-        if (!self.disableLogs) {
+        if (!self.disableLogs && !__disableLogs) {
             console.log('Passing following params over MediaRecorder API.', recorderHints);
         }
 
@@ -99,8 +100,12 @@ function MediaRecorderWrapper(mediaStream) {
 
             self.ondataavailable(blob);
 
+            self.dontFireOnDataAvailableEvent = true;
+            mediaRecorder.stop();
+            mediaRecorder = null;
+
             // record next interval
-            self.start(timeSlice);
+            self.start(timeSlice, '__disableLogs');
         };
 
         mediaRecorder.onerror = function(error) {
@@ -146,7 +151,7 @@ function MediaRecorderWrapper(mediaStream) {
             if (mediaRecorder.state === 'recording') {
                 // "stop" method auto invokes "requestData"!
                 mediaRecorder.requestData();
-                mediaRecorder.stop();
+                // mediaRecorder.stop();
             }
         }, timeSlice);
 
@@ -176,7 +181,14 @@ function MediaRecorderWrapper(mediaStream) {
         if (mediaRecorder.state === 'recording') {
             // "stop" method auto invokes "requestData"!
             mediaRecorder.requestData();
-            mediaRecorder.stop();
+
+            setTimeout(function() {
+                self.dontFireOnDataAvailableEvent = true;
+                if (mediaRecorder.state === 'recording') {
+                    mediaRecorder.stop();
+                }
+                mediaRecorder = null;
+            }, 2000);
         }
     };
 

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -33,6 +33,7 @@ module.exports = function(grunt) {
                     'VideoStreamRecorder/WhammyRecorderHelper.js',
                     'VideoStreamRecorder/GifRecorder.js',
                     'VideoStreamRecorder/lib/whammy.js',
+                    'common/ConcatenateBlobs.js',
                     'common/amd.js'
                 ],
                 dest: 'MediaStreamRecorder.js'

diff --git a/MediaStreamRecorder.js b/MediaStreamRecorder.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-05-05 6:31:59 AM UTC
+// Last time updated: 2016-05-15 5:22:54 AM UTC
 
 // links:
 // Open-Sourced: https://github.com/streamproc/MediaStreamRecorder
@@ -106,11 +106,9 @@ function MediaStreamRecorder(mediaStream) {
                 return;
             }
 
-            var bigBlob = new Blob(mediaRecorder.blobs, {
-                type: mediaRecorder.blobs[0].type || this.mimeType
+            ConcatenateBlobs(mediaRecorder.blobs, mediaRecorder.blobs[0].type, function(concatenatedBlob) {
+                invokeSaveAsDialog(concatenatedBlob);
             });
-
-            invokeSaveAsDialog(bigBlob);
             return;
         }
         invokeSaveAsDialog(file, fileName);
@@ -616,7 +614,7 @@ function MediaRecorderWrapper(mediaStream) {
      * @example
      * recorder.record();
      */
-    this.start = function(timeSlice) {
+    this.start = function(timeSlice, __disableLogs) {
         if (!self.mimeType) {
             self.mimeType = 'video/webm';
         }
@@ -640,12 +638,13 @@ function MediaRecorderWrapper(mediaStream) {
         }
 
         self.blob = null;
+        self.dontFireOnDataAvailableEvent = false;
 
         var recorderHints = {
             mimeType: self.mimeType
         };
 
-        if (!self.disableLogs) {
+        if (!self.disableLogs && !__disableLogs) {
             console.log('Passing following params over MediaRecorder API.', recorderHints);
         }
 
@@ -693,8 +692,12 @@ function MediaRecorderWrapper(mediaStream) {
 
             self.ondataavailable(blob);
 
+            self.dontFireOnDataAvailableEvent = true;
+            mediaRecorder.stop();
+            mediaRecorder = null;
+
             // record next interval
-            self.start(timeSlice);
+            self.start(timeSlice, '__disableLogs');
         };
 
         mediaRecorder.onerror = function(error) {
@@ -740,7 +743,7 @@ function MediaRecorderWrapper(mediaStream) {
             if (mediaRecorder.state === 'recording') {
                 // "stop" method auto invokes "requestData"!
                 mediaRecorder.requestData();
-                mediaRecorder.stop();
+                // mediaRecorder.stop();
             }
         }, timeSlice);
 
@@ -770,7 +773,14 @@ function MediaRecorderWrapper(mediaStream) {
         if (mediaRecorder.state === 'recording') {
             // "stop" method auto invokes "requestData"!
             mediaRecorder.requestData();
-            mediaRecorder.stop();
+
+            setTimeout(function() {
+                self.dontFireOnDataAvailableEvent = true;
+                if (mediaRecorder.state === 'recording') {
+                    mediaRecorder.stop();
+                }
+                mediaRecorder = null;
+            }, 2000);
         }
     };
 
@@ -2113,6 +2123,69 @@ if (typeof MediaStreamRecorder !== 'undefined') {
     MediaStreamRecorder.Whammy = Whammy;
 }
 
+// Last time updated at Nov 18, 2014, 08:32:23
+
+// Latest file can be found here: https://cdn.webrtc-experiment.com/ConcatenateBlobs.js
+
+// Muaz Khan    - www.MuazKhan.com
+// MIT License  - www.WebRTC-Experiment.com/licence
+// Source Code  - https://github.com/muaz-khan/ConcatenateBlobs
+// Demo         - https://www.WebRTC-Experiment.com/ConcatenateBlobs/
+
+// ___________________
+// ConcatenateBlobs.js
+
+// Simply pass array of blobs.
+// This javascript library will concatenate all blobs in single "Blob" object.
+
+(function() {
+    window.ConcatenateBlobs = function(blobs, type, callback) {
+        var buffers = [];
+
+        var index = 0;
+
+        function readAsArrayBuffer() {
+            if (!blobs[index]) {
+                return concatenateBuffers();
+            }
+            var reader = new FileReader();
+            reader.onload = function(event) {
+                buffers.push(event.target.result);
+                index++;
+                readAsArrayBuffer();
+            };
+            reader.readAsArrayBuffer(blobs[index]);
+        }
+
+        readAsArrayBuffer();
+
+        function concatenateBuffers() {
+            var byteLength = 0;
+            buffers.forEach(function(buffer) {
+                byteLength += buffer.byteLength;
+            });
+
+            var tmp = new Uint16Array(byteLength);
+            var lastOffset = 0;
+            buffers.forEach(function(buffer) {
+                // BYTES_PER_ELEMENT == 2 for Uint16Array
+                var reusableByteLength = buffer.byteLength;
+                if (reusableByteLength % 2 != 0) {
+                    buffer = buffer.slice(0, reusableByteLength - 1)
+                }
+                tmp.set(new Uint16Array(buffer), lastOffset);
+                lastOffset += reusableByteLength;
+            });
+
+            var blob = new Blob([tmp.buffer], {
+                type: type
+            });
+
+            callback(blob);
+        }
+    };
+})();
+
 // https://github.com/streamproc/MediaStreamRecorder/issues/42
 if (typeof module !== 'undefined' /* && !!module.exports*/ ) {
     module.exports = MediaStreamRecorder;

diff --git a/MediaStreamRecorder.min.js b/MediaStreamRecorder.min.js
diff --git a/README.md b/README.md
@@ -75,7 +75,7 @@ Then link single/standalone "MediaStreamRecorder.js" file:
 <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
 
 <!-- or link specific release -->
-<script src="https://github.com/streamproc/MediaStreamRecorder/releases/download/1.3.1/MediaStreamRecorder.js"></script>
+<script src="https://github.com/streamproc/MediaStreamRecorder/releases/download/1.3.2/MediaStreamRecorder.js"></script>
 ```
 
 ## Record audio+video

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "msr",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "authors": [
         {
             "name": "Muaz Khan",
@@ -62,7 +62,7 @@
         "grunt-contrib-concat": "0.5.1",
         "grunt-contrib-csslint": "0.4.0",
         "grunt-contrib-uglify": "0.9.1",
-        "grunt-htmlhint": "0.4.1",
+        "grunt-htmlhint": "0.9.13",
         "grunt-jsbeautifier": "0.2.10",
         "grunt-bump": "0.3.1"
       }

diff --git a/common/ConcatenateBlobs.js b/common/ConcatenateBlobs.js
@@ -0,0 +1,62 @@
+// Last time updated at Nov 18, 2014, 08:32:23
+
+// Latest file can be found here: https://cdn.webrtc-experiment.com/ConcatenateBlobs.js
+
+// Muaz Khan    - www.MuazKhan.com
+// MIT License  - www.WebRTC-Experiment.com/licence
+// Source Code  - https://github.com/muaz-khan/ConcatenateBlobs
+// Demo         - https://www.WebRTC-Experiment.com/ConcatenateBlobs/
+
+// ___________________
+// ConcatenateBlobs.js
+
+// Simply pass array of blobs.
+// This javascript library will concatenate all blobs in single "Blob" object.
+
+(function() {
+    window.ConcatenateBlobs = function(blobs, type, callback) {
+        var buffers = [];
+
+        var index = 0;
+
+        function readAsArrayBuffer() {
+            if (!blobs[index]) {
+                return concatenateBuffers();
+            }
+            var reader = new FileReader();
+            reader.onload = function(event) {
+                buffers.push(event.target.result);
+                index++;
+                readAsArrayBuffer();
+            };
+            reader.readAsArrayBuffer(blobs[index]);
+        }
+
+        readAsArrayBuffer();
+
+        function concatenateBuffers() {
+            var byteLength = 0;
+            buffers.forEach(function(buffer) {
+                byteLength += buffer.byteLength;
+            });
+
+            var tmp = new Uint16Array(byteLength);
+            var lastOffset = 0;
+            buffers.forEach(function(buffer) {
+                // BYTES_PER_ELEMENT == 2 for Uint16Array
+                var reusableByteLength = buffer.byteLength;
+                if (reusableByteLength % 2 != 0) {
+                    buffer = buffer.slice(0, reusableByteLength - 1)
+                }
+                tmp.set(new Uint16Array(buffer), lastOffset);
+                lastOffset += reusableByteLength;
+            });
+
+            var blob = new Blob([tmp.buffer], {
+                type: type
+            });
+
+            callback(blob);
+        }
+    };
+})();
diff --git a/common/MediaStreamRecorder.js b/common/MediaStreamRecorder.js
@@ -82,11 +82,9 @@ function MediaStreamRecorder(mediaStream) {
                 return;
             }
 
-            var bigBlob = new Blob(mediaRecorder.blobs, {
-                type: mediaRecorder.blobs[0].type || this.mimeType
+            ConcatenateBlobs(mediaRecorder.blobs, mediaRecorder.blobs[0].type, function(concatenatedBlob) {
+                invokeSaveAsDialog(concatenatedBlob);
             });
-
-            invokeSaveAsDialog(bigBlob);
             return;
         }
         invokeSaveAsDialog(file, fileName);

diff --git a/demos/audio-recorder.html b/demos/audio-recorder.html
@@ -120,6 +120,8 @@ <h1>
             document.querySelector('#save-recording').onclick = function() {
                 this.disabled = true;
                 mediaRecorder.save();
+
+                // alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
             };
 
             var mediaRecorder;

diff --git a/demos/video-recorder.html b/demos/video-recorder.html
@@ -35,8 +35,8 @@
     <article>
         <header style="text-align: center;">
             <h1>
-                    <a href="https://www.webrtc-experiment.com/">WebRTC</a> Video Recording using <a href="https://github.com/streamproc/MediaStreamRecorder" target="_blank">MediaStreamRecorder</a>
-                </h1>
+                <a href="https://www.webrtc-experiment.com/">WebRTC</a> Video Recording using <a href="https://github.com/streamproc/MediaStreamRecorder" target="_blank">MediaStreamRecorder</a>
+            </h1>
             <p>
                 <a href="https://www.webrtc-experiment.com/">HOME</a>
                 <span> &copy; </span>
@@ -117,6 +117,8 @@ <h1>
             document.querySelector('#save-recording').onclick = function() {
                 this.disabled = true;
                 mediaRecorder.save();
+
+                // alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');
             };
 
             var mediaRecorder;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "msr",
   "preferGlobal": false,
-  "version": "1.3.1",
+  "version": "1.3.2",
   "author": {
     "name": "Muaz Khan",
     "email": "[email protected]",
@@ -68,7 +68,7 @@
     "grunt-contrib-concat": "0.5.1",
     "grunt-contrib-csslint": "0.4.0",
     "grunt-contrib-uglify": "0.9.1",
-    "grunt-htmlhint": "0.4.1",
+    "grunt-htmlhint": "0.9.13",
     "grunt-jsbeautifier": "0.2.10",
     "grunt-bump": "0.3.1"
   }