RecordRTC v5.2.1 (Fixes Firefox 44.1 recording issues)

closed #46
muaz-khan · Oct 8, 2015 · a96250b · a96250b
1 parent 5e444dc
commit a96250b
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 135 deletions.
diff --git a/AudioVideo-on-Firefox.html b/AudioVideo-on-Firefox.html
@@ -50,6 +50,8 @@
         document.createElement('footer');
     </script>
     <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
+    <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
+    <script src="https://cdn.rawgit.com/webrtc/adapter/master/adapter.js"></script>
 </head>
 
 <body>
@@ -72,9 +74,9 @@ <h1>
         <div class="github-stargazers"></div>
 
         <blockquote>
-            This <a href="https://www.webrtc-experiment.com/">WebRTC</a> experiment records both audio/video in single WebM/mp4 container/format using MediaRecorder API! It currently works only on Firefox &gt;= 29.
+            This <a href="https://www.webrtc-experiment.com/">WebRTC</a> experiment records both audio/video in single WebM/mp4 container/format using MediaRecorder API! It currently works only on Firefox &gt;= 29. This demo records only video tracks if you're testing in Chrome.
             <br />
-            <br /> For chrome, please try <a href="https://www.webrtc-experiment.com/RecordRTC/">https://www.webrtc-experiment.com/RecordRTC/</a>.
+            <br /> Main demo is available here: <a href="https://www.webrtc-experiment.com/RecordRTC/">https://www.webrtc-experiment.com/RecordRTC/</a>.
         </blockquote>
 
         <div class="github-stargazers"></div>
@@ -93,6 +95,10 @@ <h2 id="download-url"></h2>
         </section>
 
         <script>
+        function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
+            navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
+        }
+
         var videoElement = document.getElementById('video');
         var downloadURL = document.getElementById('download-url');
 
@@ -105,7 +111,7 @@ <h2 id="download-url"></h2>
 
             captureUserMedia(function(stream) {
                 window.audioVideoRecorder = window.RecordRTC(stream, {
-                    type: 'video' // don't forget this; otherwise you'll get video/webm instead of audio/ogg
+                    type: 'video'
                 });
                 window.audioVideoRecorder.startRecording();
             });
@@ -116,7 +122,7 @@ <h2 id="download-url"></h2>
             startRecording.disabled = false;
 
             window.audioVideoRecorder.stopRecording(function(url) {
-                downloadURL.innerHTML = '<a href="' + url + '" download="RecordRTC.webm" target="_blank">Save RecordRTC.webm to Disk!</a>';
+                downloadURL.innerHTML = '<a href="' + url + '" download="RecordRTC.webm" target="_blank">Save RecordRTC.webm to Disk!</a><hr>';
                 videoElement.src = url;
                 videoElement.muted = false;
                 videoElement.play();
@@ -131,8 +137,7 @@ <h2 id="download-url"></h2>
         };
 
         function captureUserMedia(callback) {
-            navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
-            navigator.getUserMedia({
+            captureUserMedia({
                 audio: true,
                 video: true
             }, function(stream) {
@@ -143,7 +148,7 @@ <h2 id="download-url"></h2>
 
                 callback(stream);
             }, function(error) {
-                console.error(error);
+                alert(JSON.stringify(error));
             });
         }
         </script>

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -45,7 +45,8 @@ module.exports = function(grunt) {
                     './PHP-and-FFmpeg/*.html',
                     './RecordRTC-over-Socketio/*.html',
                     './RecordRTC-to-Nodejs/static/*.html',
-                    './RecordRTC-to-PHP/*.html'
+                    './RecordRTC-to-PHP/*.html',
+                    './*.html'
                 ],
                 options: {
                     'tag-pair': true

diff --git a/RecordRTC.js b/RecordRTC.js
@@ -1,4 +1,4 @@
-// Last time updated at Monday, October 5th, 2015, 9:30:19 PM 
+// Last time updated at Thursday, October 8th, 2015, 4:58:38 PM 
 
 // links:
 // Open-Sourced: https://github.com/muaz-khan/RecordRTC
@@ -1372,8 +1372,6 @@ if (typeof AudioContext !== 'undefined') {
  */
 
 function MediaStreamRecorder(mediaStream, config) {
-    var self = this;
-
     config = config || {
         bitsPerSecond: 128000,
         mimeType: 'video/webm'
@@ -1398,7 +1396,6 @@ function MediaStreamRecorder(mediaStream, config) {
         }
     }
 
-    var dataAvailable = false;
     var recordedBuffers = [];
 
     /**
@@ -1424,6 +1421,11 @@ function MediaStreamRecorder(mediaStream, config) {
             console.log('Passing following config over MediaRecorder API.', recorderHints);
         }
 
+        if (mediaRecorder) {
+            // mandatory to make sure Firefox doesn't fails to record streams 3-4 times without reloading the page.
+            mediaRecorder = null;
+        }
+
         // http://dxr.mozilla.org/mozilla-central/source/content/media/MediaRecorder.cpp
         // https://wiki.mozilla.org/Gecko:MediaRecorder
         // https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html
@@ -1444,64 +1446,18 @@ function MediaStreamRecorder(mediaStream, config) {
 
         // Dispatching OnDataAvailable Handler
         mediaRecorder.ondataavailable = function(e) {
-            if (isChrome && e.data && !('size' in e.data)) {
-                e.data.size = e.data.length || e.data.byteLength || 0;
-            }
-
-            if (isChrome && e.data && e.data.size) {
-                recordedBuffers.push(e.data);
+            if (this.dontFireOnDataAvailableEvent) {
                 return;
             }
 
-            if (self.dontFireOnDataAvailableEvent || dataAvailable) {
-                return;
-            }
-
-            if (!e.data || !e.data.size) {
-                if (recordedBuffers.length) {
-                    self.blob = new Blob(recordedBuffers, {
-                        type: config.mimeType || 'video/webm'
-                    });
-
-                    if (self.callback) {
-                        self.callback();
-                    }
-                    return;
-                }
-
-                if (!config.disableLogs) {
-                    if (!e.data) {
-                        console.error('MediaRecorder.onDataAvailable returned nothing.', e);
-                    }
-                    console.warn('Recording of', ((e.data ? e.data.type : null) || mediaRecorder.mimeType || config.mimeType), 'failed.');
-                }
-                return;
+            if (isChrome && e.data && !('size' in e.data)) {
+                e.data.size = e.data.length || e.data.byteLength || 0;
             }
 
-            dataAvailable = true;
-
-            /**
-             * @property {Blob} blob - Recorded frames in video/webm blob.
-             * @memberof MediaStreamRecorder
-             * @example
-             * recorder.stop(function() {
-             *     var blob = recorder.blob;
-             * });
-             */
-            self.blob = new Blob([e.data], {
-                type: e.data.type || config.mimeType || 'audio/ogg'
-            });
-
-            if (bytesToSize(self.blob) === '3.69 KB') {
-                if (!config.disableLogs) {
-                    console.error('Seems recorded blob is corrupt.');
-                }
+            if (e.data && e.data.size) {
+                recordedBuffers.push(e.data);
                 return;
             }
-
-            if (self.callback) {
-                self.callback();
-            }
         };
 
         mediaRecorder.onerror = function(error) {
@@ -1538,7 +1494,7 @@ function MediaStreamRecorder(mediaStream, config) {
         // handler. "mTimeSlice < 0" means Session object does not push encoded data to
         // onDataAvailable, instead, it passive wait the client side pull encoded data
         // by calling requestData API.
-        mediaRecorder.start(0);
+        mediaRecorder.start(3 * 1000);
 
         // Start recording. If timeSlice has been provided, mediaRecorder will
         // raise a dataavailable event containing the Blob of collected data on every timeSlice milliseconds.
@@ -1568,19 +1524,34 @@ function MediaStreamRecorder(mediaStream, config) {
             return;
         }
 
-        this.callback = callback;
-
         // mediaRecorder.state === 'recording' means that media recorder is associated with "session"
         // mediaRecorder.state === 'stopped' means that media recorder is detached from the "session" ... in this case; "session" will also be deleted.
 
         if (mediaRecorder.state === 'recording') {
             // "stop" method auto invokes "requestData"!
-            // mediaRecorder.requestData();
+            mediaRecorder.requestData();
             mediaRecorder.stop();
         }
 
-        // mandatory to make sure Firefox doesn't fails to record streams 3-4 times without reloading the page.
-        mediaRecorder = null;
+        if (recordedBuffers.length) {
+            /**
+             * @property {Blob} blob - Recorded frames in video/webm blob.
+             * @memberof MediaStreamRecorder
+             * @example
+             * recorder.stop(function() {
+             *     var blob = recorder.blob;
+             * });
+             */
+            this.blob = new Blob(recordedBuffers, {
+                type: config.mimeType || 'video/webm'
+            });
+
+            if (callback) {
+                callback();
+            }
+
+            recordedBuffers = [];
+        }
     };
 
     /**
@@ -1610,7 +1581,6 @@ function MediaStreamRecorder(mediaStream, config) {
     this.resume = function() {
         if (this.dontFireOnDataAvailableEvent) {
             this.dontFireOnDataAvailableEvent = false;
-            dataAvailable = false;
             this.record();
             return;
         }
@@ -1657,6 +1627,8 @@ function MediaStreamRecorder(mediaStream, config) {
         }
     }
 
+    var self = this;
+
     // this method checks if media stream is stopped
     // or any track is ended.
     (function looper() {
@@ -1665,7 +1637,7 @@ function MediaStreamRecorder(mediaStream, config) {
         }
 
         if (isMediaStreamActive() === false) {
-            mediaRecorder.stop();
+            self.stop();
             return;
         }
 

diff --git a/RecordRTC.min.js b/RecordRTC.min.js