Added msr@1.3.1 Fixed MediaRecorder implementation

streamproc · May 5, 2016 · ce029d2 · ce029d2
1 parent bebc368
commit ce029d2
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 103 deletions.
diff --git a/AudioStreamRecorder/MediaRecorderWrapper.js b/AudioStreamRecorder/MediaRecorderWrapper.js
@@ -98,6 +98,9 @@ function MediaRecorderWrapper(mediaStream) {
             });
 
             self.ondataavailable(blob);
+
+            // record next interval
+            self.start(timeSlice);
         };
 
         mediaRecorder.onerror = function(error) {
@@ -133,7 +136,19 @@ function MediaRecorderWrapper(mediaStream) {
         // 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(timeSlice || 3.6e+6);
+        mediaRecorder.start(3.6e+6);
+
+        setTimeout(function() {
+            if (!mediaRecorder) {
+                return;
+            }
+
+            if (mediaRecorder.state === 'recording') {
+                // "stop" method auto invokes "requestData"!
+                mediaRecorder.requestData();
+                mediaRecorder.stop();
+            }
+        }, timeSlice);
 
         // Start recording. If timeSlice has been provided, mediaRecorder will
         // raise a dataavailable event containing the Blob of collected data on every timeSlice milliseconds.
@@ -254,8 +269,6 @@ function MediaRecorderWrapper(mediaStream) {
         return true;
     }
 
-    var self = this;
-
     // this method checks if media stream is stopped
     // or any track is ended.
     (function looper() {

diff --git a/MediaStreamRecorder.js b/MediaStreamRecorder.js
@@ -1,4 +1,4 @@
-// Last time updated: 2016-05-05 5:44:00 AM UTC
+// Last time updated: 2016-05-05 6:31:59 AM UTC
 
 // links:
 // Open-Sourced: https://github.com/streamproc/MediaStreamRecorder
@@ -50,6 +50,11 @@ function MediaStreamRecorder(mediaStream) {
             Recorder = GifRecorder;
         }
 
+        // audio/wav is supported only via StereoAudioRecorder
+        if (this.mimeType === 'audio/wav') {
+            Recorder = StereoAudioRecorder;
+        }
+
         // allows forcing StereoAudioRecorder.js on Edge/Firefox
         if (this.recorderType) {
             Recorder = this.recorderType;
@@ -127,7 +132,14 @@ function MediaStreamRecorder(mediaStream) {
         console.log('Resumed recording.', this.mimeType || mediaRecorder.mimeType);
     };
 
-    this.recorderType = null; // StereoAudioRecorder || WhammyRecorder || MediaRecorderWrapper || GifRecorder
+    // StereoAudioRecorder || WhammyRecorder || MediaRecorderWrapper || GifRecorder
+    this.recorderType = null;
+
+    // video/webm or audio/webm or audio/ogg or audio/wav
+    this.mimeType = 'video/webm';
+
+    // logs are enabled by default
+    this.disableLogs = false;
 
     // Reference to "MediaRecorder.js"
     var mediaRecorder;
@@ -680,6 +692,9 @@ function MediaRecorderWrapper(mediaStream) {
             });
 
             self.ondataavailable(blob);
+
+            // record next interval
+            self.start(timeSlice);
         };
 
         mediaRecorder.onerror = function(error) {
@@ -715,7 +730,19 @@ function MediaRecorderWrapper(mediaStream) {
         // 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(timeSlice || 3.6e+6);
+        mediaRecorder.start(3.6e+6);
+
+        setTimeout(function() {
+            if (!mediaRecorder) {
+                return;
+            }
+
+            if (mediaRecorder.state === 'recording') {
+                // "stop" method auto invokes "requestData"!
+                mediaRecorder.requestData();
+                mediaRecorder.stop();
+            }
+        }, timeSlice);
 
         // Start recording. If timeSlice has been provided, mediaRecorder will
         // raise a dataavailable event containing the Blob of collected data on every timeSlice milliseconds.
@@ -836,8 +863,6 @@ function MediaRecorderWrapper(mediaStream) {
         return true;
     }
 
-    var self = this;
-
     // this method checks if media stream is stopped
     // or any track is ended.
     (function looper() {

diff --git a/MediaStreamRecorder.min.js b/MediaStreamRecorder.min.js
diff --git a/README.md b/README.md
@@ -70,26 +70,22 @@ Then link single/standalone "MediaStreamRecorder.js" file:
 
 <!-- or bower -->
 <script src="./bower_components/msr/MediaStreamRecorder.js"></script>
-```
-
-## Otherwise, you can "directly" link standalone file from CDN:
 
-```html
+<!-- CDN -->
 <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
 
-<!-- or -->
-
-https://cdn.rawgit.com/streamproc/MediaStreamRecorder/master/MediaStreamRecorder.js
+<!-- or link specific release -->
+<script src="https://github.com/streamproc/MediaStreamRecorder/releases/download/1.3.1/MediaStreamRecorder.js"></script>
 ```
 
-## Record audio+video in Firefox in single WebM
+## Record audio+video
 
 ```html
 <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
 <script>
 var mediaConstraints = {
-    audio: !!navigator.mozGetUserMedia, // don't forget audio!
-    video: true                         // don't forget video!
+    audio: true,    // don't forget audio!
+    video: true     // don't forget video!
 };
 
 navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
@@ -111,44 +107,11 @@ function onMediaError(e) {
 </script>
 ```
 
-## Record audio+video in Chrome
-
-`MultiStreamRecorder.js` records both audio/video and returns both blobs in single `ondataavailable` event.
+## Record audio/wav
 
 ```html
 <script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
 <script>
-var mediaConstraints = {
-    audio: true,
-    video: true
-};
-
-navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
-
-function onMediaSuccess(stream) {
-    var multiStreamRecorder = new MultiStreamRecorder(stream);
-    multiStreamRecorder.video = yourVideoElement; // to get maximum accuracy
-    multiStreamRecorder.audioChannels = 1;
-    multiStreamRecorder.ondataavailable = function (blobs) {
-        // blobs.audio
-        // blobs.video
-    };
-    multiStreamRecorder.start(3 * 1000);
-}
-
-function onMediaError(e) {
-    console.error('media error', e);
-}
-</script>
-```
-
-## Record only audio in Chrome/Firefox
-
-```html
-<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
-```
-
-```javascript
 var mediaConstraints = {
     audio: true
 };
@@ -157,42 +120,7 @@ navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
 
 function onMediaSuccess(stream) {
     var mediaRecorder = new MediaStreamRecorder(stream);
-    mediaRecorder.mimeType = 'audio/ogg';
-    mediaRecorder.audioChannels = 1;
-    mediaRecorder.ondataavailable = function (blob) {
-        // POST/PUT "Blob" using FormData/XHR2
-        var blobURL = URL.createObjectURL(blob);
-        document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
-    };
-    mediaRecorder.start(3000);
-}
-
-function onMediaError(e) {
-    console.error('media error', e);
-}
-```
-
-## Record only-video in chrome
-
-```html
-<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
-<script>
-var mediaConstraints = {
-    video: true
-};
-
-navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
-
-function onMediaSuccess(stream) {
-    var mediaRecorder = new MediaStreamRecorder(stream);
-    mediaRecorder.mimeType = 'video/webm';
-	
-    // for gif recording
-    // mediaRecorder.mimeType = 'image/gif';
-	
-    mediaRecorder.width = 320;
-    mediaRecorder.height = 240;
-	
+    mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
     mediaRecorder.ondataavailable = function (blob) {
         // POST/PUT "Blob" using FormData/XHR2
         var blobURL = URL.createObjectURL(blob);
@@ -464,11 +392,12 @@ videoRecorder.mimeType = 'video/webm';
 videoRecorder.mimeType = 'video/mp4';
 
 // audio:
-audioRecorder.mimeType = 'audio/ogg';
-audioRecorder.mimeType = 'audio/wav';
+audioRecorder.mimeType = 'audio/webm'; // MediaRecorderWrapper
+audioRecorder.mimeType = 'audio/ogg'; // MediaRecorderWrapper
+audioRecorder.mimeType = 'audio/wav'; // StereoAudioRecorder
 
 // gif:
-gifRecorder.mimeType = 'image/gif';
+gifRecorder.mimeType = 'image/gif'; // GifRecorder
 ```
 
 ## bitsPerSecond

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "msr",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "authors": [
         {
             "name": "Muaz Khan",
@@ -13,7 +13,7 @@
         "type": "git",
         "url": "https://github.com/streamproc/MediaStreamRecorder.git"
     },
-    "description": "Cross-Browser recording of audio/video media streams; targets WebRTC/getUserMedia/WebAudio/etc. Works both on Chrome/Firefox/Opera on desktop & android.",
+    "description": "Cross-Browser recording of audio/video media streams; targets WebRTC/getUserMedia/WebAudio/etc.",
     "main": "MediaStreamRecorder.js",
     "keywords": [
         "recorder",

diff --git a/common/MediaStreamRecorder.js b/common/MediaStreamRecorder.js
@@ -26,6 +26,11 @@ function MediaStreamRecorder(mediaStream) {
             Recorder = GifRecorder;
         }
 
+        // audio/wav is supported only via StereoAudioRecorder
+        if (this.mimeType === 'audio/wav') {
+            Recorder = StereoAudioRecorder;
+        }
+
         // allows forcing StereoAudioRecorder.js on Edge/Firefox
         if (this.recorderType) {
             Recorder = this.recorderType;
@@ -103,7 +108,14 @@ function MediaStreamRecorder(mediaStream) {
         console.log('Resumed recording.', this.mimeType || mediaRecorder.mimeType);
     };
 
-    this.recorderType = null; // StereoAudioRecorder || WhammyRecorder || MediaRecorderWrapper || GifRecorder
+    // StereoAudioRecorder || WhammyRecorder || MediaRecorderWrapper || GifRecorder
+    this.recorderType = null;
+
+    // video/webm or audio/webm or audio/ogg or audio/wav
+    this.mimeType = 'video/webm';
+
+    // logs are enabled by default
+    this.disableLogs = false;
 
     // Reference to "MediaRecorder.js"
     var mediaRecorder;

diff --git a/demos/audio-recorder.html b/demos/audio-recorder.html
@@ -56,6 +56,11 @@ <h1>
 
             <br>
 
+            <select id="audio-mimeType" style="font-size:22px;vertical-align: middle;margin-right: 5px;">
+                <option>audio/webm</option>
+                <option>audio/wav</option>
+            </select>
+
             <button id="start-recording">Start</button>
             <button id="stop-recording" disabled>Stop</button>
 
@@ -134,7 +139,7 @@ <h1>
 
                 mediaRecorder = new MediaStreamRecorder(stream);
                 mediaRecorder.stream = stream;
-                mediaRecorder.mimeType = 'audio/ogg';
+                mediaRecorder.mimeType = document.getElementById('audio-mimeType').value;
                 mediaRecorder.audioChannels = !!document.getElementById('left-channel').checked ? 1 : 2;
                 mediaRecorder.ondataavailable = function(blob) {
                     var a = document.createElement('a');
@@ -190,15 +195,14 @@ <h1>
 // cdn.webrtc-experiment.com/MediaStreamRecorder.js
 
 var mediaConstraints = {
-    audio: !!navigator.mozGetUserMedia, // if firefox (don't use for chrome)
-    video: true  // if firefox or chrome
+    audio: true
 };
 
 navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
 
 function onMediaSuccess(stream) {
     var mediaRecorder = new MediaStreamRecorder(stream);
-    mediaRecorder.mimeType = 'video/webm';
+    mediaRecorder.mimeType = 'audio/webm'; // audio/webm or audio/ogg or audio/wav
     mediaRecorder.ondataavailable = function (blob) {
         // POST/PUT "Blob" using FormData/XHR2
         var blobURL = URL.createObjectURL(blob);

diff --git a/demos/video-recorder.html b/demos/video-recorder.html
@@ -198,7 +198,7 @@ <h1>
 // cdn.webrtc-experiment.com/MediaStreamRecorder.js
 
 var mediaConstraints = {
-    audio: !!navigator.mozGetUserMedia, // if firefox (don't use for chrome)
+    audio: true,
     video: true  // if firefox or chrome
 };
 

diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "msr",
   "preferGlobal": false,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": {
     "name": "Muaz Khan",
     "email": "muazkh@gmail.com",
     "url": "http://www.muazkhan.com/"
   },
-  "description": "Cross-Browser recording of audio/video media streams; targets WebRTC/getUserMedia/WebAudio/etc. Works both on Chrome/Firefox/Opera on desktop & android.",
+  "description": "Cross-Browser recording of audio/video media streams; targets WebRTC/getUserMedia/WebAudio/etc.",
   "scripts": {
     "start": "node server.js"
   },