Added: recordrtc@5.3.0 Fixed & updated MRecordRTC

muaz-khan · Feb 26, 2016 · 3a2276e · 3a2276e
1 parent 9596ed6
commit 3a2276e
Show file tree

Hide file tree

Showing 11 changed files with 158 additions and 75 deletions.
diff --git a/MRecordRTC/README.md b/MRecordRTC/README.md
@@ -23,6 +23,12 @@ recorder.mediaType = {
    video: true, // or WhammyRecorder
    gif: true    // or GifRecorder
 };
+// mimeType is optional and should be set only in advance cases.
+recorder.mimeType = {
+    audio: 'audio/wav',
+    video: 'video/webm',
+    gif:   'image/gif'
+};
 recorder.startRecording();
 recorder.stopRecording(function(url, type) {
     document.querySelector(type).src = url;
@@ -81,6 +87,19 @@ recorder.mediaType = {
 
 =
 
+#### `mimeType`
+
+```javascript
+// mimeType is optional and should be set only in advance cases.
+recorder.mimeType = {
+    audio: 'audio/wav',  // audio/ogg or audio/webm or audio/wav
+    video: 'video/webm', // video/webm or video/vp8
+    gif:   'image/gif'
+};
+```
+
+=
+
 #### `getDataURL`
 
 ```javascript
@@ -196,18 +215,6 @@ recorder.video = recorder.canvas = {
 
 =
 
-[RecordRTC](https://www.webrtc-experiment.com/RecordRTC/) is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
-
-1. [RecordRTC to Node.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-Nodejs)
-2. [RecordRTC to PHP](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-PHP)
-3. [RecordRTC to ASP.NET MVC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-to-ASPNETMVC)
-4. [RecordRTC & HTML-2-Canvas i.e. Canvas/HTML Recording!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/Canvas-Recording)
-5. [MRecordRTC i.e. Multi-RecordRTC!](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/MRecordRTC)
-6. [RecordRTC on Ruby!](https://github.com/cbetta/record-rtc-experiment)
-7. [RecordRTC over Socket.io](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/RecordRTC-over-Socketio)
-
-=
-
 ## License
 
-[RecordRTC.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://plus.google.com/+MuazKhan).
+[RecordRTC.js](https://github.com/muaz-khan/RecordRTC) is released under [MIT licence](https://www.webrtc-experiment.com/licence/) . Copyright (c) [Muaz Khan](https://www.MuazKhan.com/).
diff --git a/MRecordRTC/index.html b/MRecordRTC/index.html
@@ -194,7 +194,7 @@ <h2 class="header">
 
                 mRecordRTC.addStream(stream);
                 mRecordRTC.startRecording();
-            }, function(errro) {
+            }, function(error) {
                 alert(JSON.stringify(error));
             });
         };
@@ -311,6 +311,12 @@ <h2 class="header">
    video: true,
    gif: true
 };
+// mimeType is optional and should be set only in advance cases.
+recorder.mimeType = {
+    audio: 'audio/wav',
+    video: 'video/webm',
+    gif:   'image/gif'
+};
 recorder.startRecording();
 recorder.stopRecording(function(url, type) {
     document.querySelector(type).src = url;

diff --git a/README.md b/README.md
@@ -91,7 +91,7 @@ E.g.
 
 ```html
 <!-- use 5.2.6 or any other version -->
-<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.2.9/RecordRTC.js"></script>
+<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.3.0/RecordRTC.js"></script>
 ```
 
 There are some other NPM packages regarding RecordRTC:

diff --git a/RecordRTC.js b/RecordRTC.js
@@ -1,6 +1,6 @@
 'use strict';
 
-// Last time updated: 2016-02-25 9:01:21 AM UTC
+// Last time updated: 2016-02-26 8:45:42 AM UTC
 
 // Open-Sourced: https://github.com/muaz-khan/RecordRTC
 
@@ -67,10 +67,6 @@ function RecordRTC(mediaStream, config) {
     }
 
     function initRecorder(initCallback) {
-        if (!config.disableLogs) {
-            console.debug('initializing ' + config.type + ' stream recorder.');
-        }
-
         if (initCallback) {
             config.initCallback = function() {
                 initCallback();
@@ -82,6 +78,10 @@ function RecordRTC(mediaStream, config) {
 
         mediaRecorder = new Recorder(mediaStream, config);
         mediaRecorder.record();
+
+        if (!config.disableLogs) {
+            console.debug('Initialized recorderType:', mediaRecorder.constructor.name, 'for output-type:', config.type);
+        }
     }
 
     function stopRecording(callback) {
@@ -759,8 +759,8 @@ function GetRecorderType(mediaStream, config) {
         recorder = config.recorderType;
     }
 
-    if (!config.disableLogs && isChrome && recorder === MediaStreamRecorder) {
-        console.debug('Using MediaRecorder API in chrome!');
+    if (!config.disableLogs && !!recorder && !!recorder.name) {
+        console.debug('Using recorderType:', recorder.name || recorder.constructor.name);
     }
 
     return recorder;
@@ -780,9 +780,15 @@ function GetRecorderType(mediaStream, config) {
  * var recorder = new MRecordRTC();
  * recorder.addStream(MediaStream);
  * recorder.mediaType = {
- *     audio: true,
- *     video: true,
- *     gif: true
+ *     audio: true, // or StereoAudioRecorder or MediaStreamRecorder
+ *     video: true, // or WhammyRecorder or MediaStreamRecorder
+ *     gif: true    // or GifRecorder
+ * };
+ * // mimeType is optional and should be set only in advance cases.
+ * recorder.mimeType = {
+ *     audio: 'audio/wav',
+ *     video: 'video/webm',
+ *     gif:   'image/gif'
  * };
  * recorder.startRecording();
  * @see For further information:
@@ -833,6 +839,11 @@ function MRecordRTC(mediaStream) {
     this.startRecording = function() {
         var mediaType = this.mediaType;
         var recorderType;
+        var mimeType = this.mimeType || {
+            audio: null,
+            video: null,
+            gif: null
+        };
 
         if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && mediaStream && mediaStream.getAudioTracks && mediaStream.getAudioTracks().length && mediaStream.getVideoTracks().length) {
             // Firefox is supporting both audio/video in single blob
@@ -850,7 +861,8 @@ function MRecordRTC(mediaStream) {
                 sampleRate: this.sampleRate,
                 numberOfAudioChannels: this.numberOfAudioChannels || 2,
                 disableLogs: this.disableLogs,
-                recorderType: recorderType
+                recorderType: recorderType,
+                mimeType: mimeType.audio
             });
             if (!mediaType.video) {
                 this.audioRecorder.startRecording();
@@ -862,13 +874,33 @@ function MRecordRTC(mediaStream) {
             if (typeof mediaType.video === 'function') {
                 recorderType = mediaType.video;
             }
-            this.videoRecorder = new RecordRTC(mediaStream, {
+
+            var newStream = mediaStream;
+
+            if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') {
+                var videoTrack = mediaStream.getVideoTracks()[0];
+
+                if (!!navigator.mozGetUserMedia) {
+                    newStream = new MediaStream();
+                    newStream.addTrack(videoTrack);
+
+                    if (recorderType && recorderType === WhammyRecorder) {
+                        // Firefox is NOT supporting webp-encoding yet
+                        recorderType = MediaStreamRecorder;
+                    }
+                } else {
+                    newStream = new MediaStream([videoTrack]);
+                }
+            }
+
+            this.videoRecorder = new RecordRTC(newStream, {
                 type: 'video',
                 video: this.video,
                 canvas: this.canvas,
                 frameInterval: this.frameInterval || 10,
                 disableLogs: this.disableLogs,
-                recorderType: recorderType
+                recorderType: recorderType,
+                mimeType: mimeType.video
             });
             if (!mediaType.audio) {
                 this.videoRecorder.startRecording();
@@ -896,7 +928,8 @@ function MRecordRTC(mediaStream) {
                 frameRate: this.frameRate || 200,
                 quality: this.quality || 10,
                 disableLogs: this.disableLogs,
-                recorderType: recorderType
+                recorderType: recorderType,
+                mimeType: mimeType.gif
             });
             this.gifRecorder.startRecording();
         }
@@ -1428,22 +1461,21 @@ function MediaStreamRecorder(mediaStream, config) {
         mimeType: 'video/webm'
     };
 
-    // if user chosen only audio option; and he tried to pass MediaStream with
-    // both audio and video tracks;
-    // using a dirty workaround to generate audio-only stream so that we can get audio/ogg output.
-    if (!!navigator.mozGetUserMedia && config.type && config.type === 'audio') {
-        if (mediaStream.getVideoTracks && mediaStream.getVideoTracks().length) {
-            var context = new AudioContext();
-            var mediaStreamSource = context.createMediaStreamSource(mediaStream);
-
-            var destination = context.createMediaStreamDestination();
-            mediaStreamSource.connect(destination);
-
-            mediaStream = destination.stream;
+    if (config.type === 'audio') {
+        if (mediaStream.getVideoTracks().length && mediaStream.getAudioTracks().length) {
+            var stream;
+            if (!!navigator.mozGetUserMedia) {
+                stream = new MediaStream();
+                stream.addTrack(mediaStream.getAudioTracks()[0]);
+            } else {
+                // webkitMediaStream
+                stream = new MediaStream(mediaStream.getAudioTracks());
+            }
+            mediaStream = stream;
         }
 
         if (!config.mimeType || config.mimeType.indexOf('audio') === -1) {
-            config.mimeType = 'audio/ogg';
+            config.mimeType = isChrome ? 'audio/webm' : 'audio/ogg';
         }
     }
 
@@ -1530,7 +1562,6 @@ function MediaStreamRecorder(mediaStream, config) {
             if (mediaRecorder.state !== 'inactive' && mediaRecorder.state !== 'stopped') {
                 mediaRecorder.stop();
             }
-            // self.record(0);
         };
 
         // void start(optional long mTimeSlice)
@@ -1663,7 +1694,11 @@ function MediaStreamRecorder(mediaStream, config) {
     this.resume = function() {
         if (this.dontFireOnDataAvailableEvent) {
             this.dontFireOnDataAvailableEvent = false;
+
+            var disableLogs = config.disableLogs;
+            config.disableLogs = true;
             this.record();
+            config.disableLogs = disableLogs;
             return;
         }
 

diff --git a/RecordRTC.min.js b/RecordRTC.min.js
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "recordrtc",
-  "version": "5.2.9",
+  "version": "5.3.0",
   "authors": [
         {
             "name": "Muaz Khan",

diff --git a/dev/GetRecorderType.js b/dev/GetRecorderType.js
@@ -57,8 +57,8 @@ function GetRecorderType(mediaStream, config) {
         recorder = config.recorderType;
     }
 
-    if (!config.disableLogs && isChrome && recorder === MediaStreamRecorder) {
-        console.debug('Using MediaRecorder API in chrome!');
+    if (!config.disableLogs && !!recorder && !!recorder.name) {
+        console.debug('Using recorderType:', recorder.name || recorder.constructor.name);
     }
 
     return recorder;

diff --git a/dev/MRecordRTC.js b/dev/MRecordRTC.js
@@ -12,9 +12,15 @@
  * var recorder = new MRecordRTC();
  * recorder.addStream(MediaStream);
  * recorder.mediaType = {
- *     audio: true,
- *     video: true,
- *     gif: true
+ *     audio: true, // or StereoAudioRecorder or MediaStreamRecorder
+ *     video: true, // or WhammyRecorder or MediaStreamRecorder
+ *     gif: true    // or GifRecorder
+ * };
+ * // mimeType is optional and should be set only in advance cases.
+ * recorder.mimeType = {
+ *     audio: 'audio/wav',
+ *     video: 'video/webm',
+ *     gif:   'image/gif'
  * };
  * recorder.startRecording();
  * @see For further information:
@@ -65,6 +71,11 @@ function MRecordRTC(mediaStream) {
     this.startRecording = function() {
         var mediaType = this.mediaType;
         var recorderType;
+        var mimeType = this.mimeType || {
+            audio: null,
+            video: null,
+            gif: null
+        };
 
         if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && mediaStream && mediaStream.getAudioTracks && mediaStream.getAudioTracks().length && mediaStream.getVideoTracks().length) {
             // Firefox is supporting both audio/video in single blob
@@ -82,7 +93,8 @@ function MRecordRTC(mediaStream) {
                 sampleRate: this.sampleRate,
                 numberOfAudioChannels: this.numberOfAudioChannels || 2,
                 disableLogs: this.disableLogs,
-                recorderType: recorderType
+                recorderType: recorderType,
+                mimeType: mimeType.audio
             });
             if (!mediaType.video) {
                 this.audioRecorder.startRecording();
@@ -94,13 +106,33 @@ function MRecordRTC(mediaStream) {
             if (typeof mediaType.video === 'function') {
                 recorderType = mediaType.video;
             }
-            this.videoRecorder = new RecordRTC(mediaStream, {
+
+            var newStream = mediaStream;
+
+            if (isMediaRecorderCompatible() && !!mediaType.audio && typeof mediaType.audio === 'function') {
+                var videoTrack = mediaStream.getVideoTracks()[0];
+
+                if (!!navigator.mozGetUserMedia) {
+                    newStream = new MediaStream();
+                    newStream.addTrack(videoTrack);
+
+                    if (recorderType && recorderType === WhammyRecorder) {
+                        // Firefox is NOT supporting webp-encoding yet
+                        recorderType = MediaStreamRecorder;
+                    }
+                } else {
+                    newStream = new MediaStream([videoTrack]);
+                }
+            }
+
+            this.videoRecorder = new RecordRTC(newStream, {
                 type: 'video',
                 video: this.video,
                 canvas: this.canvas,
                 frameInterval: this.frameInterval || 10,
                 disableLogs: this.disableLogs,
-                recorderType: recorderType
+                recorderType: recorderType,
+                mimeType: mimeType.video
             });
             if (!mediaType.audio) {
                 this.videoRecorder.startRecording();
@@ -128,7 +160,8 @@ function MRecordRTC(mediaStream) {
                 frameRate: this.frameRate || 200,
                 quality: this.quality || 10,
                 disableLogs: this.disableLogs,
-                recorderType: recorderType
+                recorderType: recorderType,
+                mimeType: mimeType.gif
             });
             this.gifRecorder.startRecording();
         }