Added recordrtc@5.2.9 Closed #93

Now you can pass recorderType over MRecordRTC: recorder.mediaType = { audio: StereoAudioRecorder, video: WhammyRecorder, gif: true // or GifRecorder };
muaz-khan · Feb 25, 2016 · cd483dc · cd483dc
1 parent 1167425
commit cd483dc
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 55 deletions.
diff --git a/MRecordRTC/README.md b/MRecordRTC/README.md
@@ -1,5 +1,9 @@
 ## [MRecordRTC](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/MRecordRTC) i.e. Multi-RecordRTC! / [Demo](https://www.webrtc-experiment.com/RecordRTC/MRecordRTC/)
 
+[RecordRTC Documentation](http://RecordRTC.org/) / [RecordRTC Wiki Pages](https://github.com/muaz-khan/RecordRTC/wiki) / [RecordRTC Demo](https://www.webrtc-experiment.com/RecordRTC/) / [WebRTC Experiments](https://www.webrtc-experiment.com/)
+
+[![npm](https://img.shields.io/npm/v/recordrtc.svg)](https://npmjs.org/package/recordrtc) [![downloads](https://img.shields.io/npm/dm/recordrtc.svg)](https://npmjs.org/package/recordrtc) [![Build Status: Linux](https://travis-ci.org/muaz-khan/RecordRTC.png?branch=master)](https://travis-ci.org/muaz-khan/RecordRTC)
+
 This [WebRTC](https://www.webrtc-experiment.com/) experiment is using [RecordRTC.js](https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC) to record multiple audio/video/gif streams.
 
 1. It simplifies coding for multi-streams recording i.e. audio+video recording
@@ -10,14 +14,14 @@ This [WebRTC](https://www.webrtc-experiment.com/) experiment is using [RecordRTC
 =
 
 ```html
-<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
+<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
 <script>
 var recorder = new MRecordRTC();
 recorder.addStream(MediaStream);
 recorder.mediaType = {
-   audio: true,
-   video: true,
-   gif: true
+   audio: true, // or StereoAudioRecorder
+   video: true, // or WhammyRecorder
+   gif: true    // or GifRecorder
 };
 recorder.startRecording();
 recorder.stopRecording(function(url, type) {
@@ -57,6 +61,26 @@ MRecordRTC.getFromDisk('audio', function(dataURL) {
 
 =
 
+#### `mediaType`
+
+```javascript
+// normally
+recorder.mediaType = {
+   audio: true,
+   video: true,
+   gif: true
+};
+
+// or advance cases:
+recorder.mediaType = {
+   audio: StereoAudioRecorder, // or MediaStreamRecorder
+   video: WhammyRecorder, // or MediaStreamRecorder
+   gif: GifRecorder // or TRUE
+};
+```
+
+=
+
 #### `getDataURL`
 
 ```javascript

diff --git a/MRecordRTC/index.html b/MRecordRTC/index.html
@@ -1,7 +1,7 @@
 <!--
 > Muaz Khan     - www.MuazKhan.com
 > MIT License   - www.WebRTC-Experiment.com/licence
-> Documentation - github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC/MRecordRTC
+> Documentation - github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC
 -->
 <!DOCTYPE html>
 <html lang="en">
@@ -14,7 +14,7 @@
     <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
     <meta name="author" content="Muaz Khan">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="stylesheet" href="//cdn.webrtc-experiment.com/style.css">
+    <link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
 
     <style>
     audio {
@@ -57,12 +57,9 @@
     </script>
 
     <!-- script used for audio/video/gif recording -->
-    <script src="//cdn.webrtc-experiment.com/RecordRTC.js">
-    </script>
-    <script src="//cdn.webrtc-experiment.com/gif-recorder.js">
-    </script>
-    <script src="//cdn.webrtc-experiment.com/getMediaElement.js">
-    </script>
+    <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
+    <script src="https://cdn.webrtc-experiment.com/gif-recorder.js"></script>
+    <script src="https://cdn.webrtc-experiment.com/getMediaElement.js"></script>
 
     <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
     <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
@@ -153,17 +150,17 @@ <h2 class="header">
 
         var mRecordRTC = new MRecordRTC();
         mRecordRTC.mediaType = {
-            audio: true,
-            video: true
+            audio: true, // or StereoAudioRecorder or MediaStreamRecorder
+            video: true  // or WhammyRecorder      or MediaStreamRecorder
         };
 
         if (webrtcDetectedBrowser === 'edge') {
             // Microsoft Edge currently supports only audio and gif recording
             mRecordRTC.mediaType = {
-                audio: true
+                audio: StereoAudioRecorder
             };
         }
-        //mRecordRTC.bufferSize = 16384;
+        // mRecordRTC.bufferSize = 16384;
 
         document.querySelector('#start').onclick = function() {
             this.disabled = true;
@@ -302,13 +299,52 @@ <h2 class="header">Using MRecordRTC...</h2>
             <h2 class="header">
                 How to use <a href="https://github.com/muaz-khan/RecordRTC/tree/master/MRecordRTC">MRecordRTC</a>?</h2>
             <pre>
-                &lt;script src="//cdn.webrtc-experiment.com/RecordRTC.js"&gt;&lt;/script&gt;
-            </pre>
+&lt;script src="https://cdn.webrtc-experiment.com/RecordRTC.js"&gt;&lt;/script&gt;
+</pre>
         </section>
         <section class="experiment">
             <pre>
-                var recorder = new MRecordRTC(); recorder.addStream(MediaStream); recorder.mediaType = { audio: true, video: true, gif: true }; recorder.startRecording(); recorder.stopRecording(function(url, type) { document.querySelector(type).src = url; }); recorder.getBlob(function(blobs) { blobs.audio --- audio blob blobs.video --- video blob blobs.gif --- gif blob }); // or var blobs = recorder.getBlob(); var audioBlob = blobs.audio; var videoBlob = blobs.video; var gifBlob = blobs.gif; // invoke save-as dialog // for all recorded blobs recorder.save(); recorder.writeToDisk(); // get all blobs from disk MRecordRTC.getFromDisk('all', function(dataURL, type) { type == 'audio' type == 'video' type == 'gif' }); // or get just single blob MRecordRTC.getFromDisk('audio', function(dataURL) { // only audio blob is returned from disk! });
-            </pre>
+var recorder = new MRecordRTC();
+recorder.addStream(MediaStream);
+recorder.mediaType = {
+   audio: true,
+   video: true,
+   gif: true
+};
+recorder.startRecording();
+recorder.stopRecording(function(url, type) {
+    document.querySelector(type).src = url;
+});
+
+recorder.getBlob(function(blobs) {
+   blobs.audio --- audio blob
+   blobs.video --- video blob
+   blobs.gif   --- gif blob
+});
+// or
+var blobs = recorder.getBlob();
+var audioBlob = blobs.audio;
+var videoBlob = blobs.video;
+var gifBlob = blobs.gif;
+
+// invoke save-as dialog
+// for all recorded blobs
+recorder.save();
+
+recorder.writeToDisk();
+
+// get all blobs from disk
+MRecordRTC.getFromDisk('all', function(dataURL, type) {
+   type == 'audio'
+   type == 'video'
+   type == 'gif'
+});
+
+// or get just single blob
+MRecordRTC.getFromDisk('audio', function(dataURL) {
+   // only audio blob is returned from disk!
+});
+</pre>
 
         </section>
 
@@ -318,6 +354,12 @@ <h2 class="header">
             </p>
         </section>
 
+        <section class="experiment own-widgets">
+            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/issues" target="_blank">RecordRTC Issues</a>
+            </h2>
+            <div id="github-issues"></div>
+        </section>
+
         <section class="experiment">
             <h2 class="header" id="feedback">Feedback</h2>
             <div>
@@ -328,7 +370,7 @@ <h2 class="header" id="feedback">Feedback</h2>
         </section>
 
         <section class="experiment own-widgets latest-commits">
-            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/WebRTC-Experiment/commits/master" target="_blank">Latest Updates</a>
+            <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RecordRTC/commits/master" target="_blank">Latest Updates</a>
             </h2>
             <div id="github-commits"></div>
         </section>
@@ -344,8 +386,10 @@ <h2 class="header" id="updates" style="color: red; padding-bottom: .1em;"><a hre
     </footer>
 
     <!-- commits.js is useless for you! -->
-    <script src="//cdn.webrtc-experiment.com/commits.js" async>
+    <script>
+        window.useThisGithubPath = 'muaz-khan/RecordRTC';
     </script>
+    <script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
 </body>
 
 </html>
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.8/RecordRTC.js"></script>
+<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.2.9/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-22 11:28:21 AM UTC
+// Last time updated: 2016-02-25 8:42:56 AM UTC
 
 // Open-Sourced: https://github.com/muaz-khan/RecordRTC
 
@@ -813,9 +813,9 @@ function MRecordRTC(mediaStream) {
      * @example
      * var recorder = new MRecordRTC();
      * recorder.mediaType = {
-     *     audio: true,
-     *     video: true,
-     *     gif  : true
+     *     audio: true, // TRUE or StereoAudioRecorder or MediaStreamRecorder
+     *     video: true, // TRUE or WhammyRecorder or MediaStreamRecorder
+     *     gif  : true  // TRUE or GifRecorder
      * };
      */
     this.mediaType = {
@@ -831,38 +831,49 @@ function MRecordRTC(mediaStream) {
      * recorder.startRecording();
      */
     this.startRecording = function() {
-        if (isMediaRecorderCompatible() && mediaStream && mediaStream.getAudioTracks && mediaStream.getAudioTracks().length && mediaStream.getVideoTracks().length) {
+        var mediaType = this.mediaType;
+        var recorderType;
+
+        if (typeof mediaType.audio !== 'function' && isMediaRecorderCompatible() && mediaStream && mediaStream.getAudioTracks && mediaStream.getAudioTracks().length && mediaStream.getVideoTracks().length) {
             // Firefox is supporting both audio/video in single blob
             this.mediaType.audio = false;
         }
 
-        if (this.mediaType.audio) {
+        if (!!mediaType.audio) {
+            if (typeof mediaType.audio === 'function') {
+                recorderType = mediaType.audio;
+            }
             this.audioRecorder = new RecordRTC(mediaStream, {
                 type: 'audio',
                 bufferSize: this.bufferSize,
                 sampleRate: this.sampleRate,
                 numberOfAudioChannels: this.numberOfAudioChannels || 2,
-                disableLogs: this.disableLogs
+                disableLogs: this.disableLogs,
+                recorderType: recorderType
             });
-            if (!this.mediaType.video) {
+            if (!mediaType.video) {
                 this.audioRecorder.startRecording();
             }
         }
 
-        if (this.mediaType.video) {
+        if (!!mediaType.video) {
+            if (typeof mediaType.video === 'function') {
+                recorderType = mediaType.video;
+            }
             this.videoRecorder = new RecordRTC(mediaStream, {
                 type: 'video',
                 video: this.video,
                 canvas: this.canvas,
                 frameInterval: this.frameInterval || 10,
-                disableLogs: this.disableLogs
+                disableLogs: this.disableLogs,
+                recorderType: recorderType
             });
-            if (!this.mediaType.audio) {
+            if (!mediaType.audio) {
                 this.videoRecorder.startRecording();
             }
         }
 
-        if (this.mediaType.audio && this.mediaType.video) {
+        if (!!mediaType.audio && !!mediaType.video) {
             var self = this;
             self.videoRecorder.initRecorder(function() {
                 self.audioRecorder.initRecorder(function() {
@@ -873,12 +884,16 @@ function MRecordRTC(mediaStream) {
             });
         }
 
-        if (this.mediaType.gif) {
+        if (!!mediaType.gif) {
+            if (typeof mediaType.gif === 'function') {
+                recorderType = mediaType.gif;
+            }
             this.gifRecorder = new RecordRTC(mediaStream, {
                 type: 'gif',
                 frameRate: this.frameRate || 200,
                 quality: this.quality || 10,
-                disableLogs: this.disableLogs
+                disableLogs: this.disableLogs,
+                recorderType: recorderType
             });
             this.gifRecorder.startRecording();
         }

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.8",
+  "version": "5.2.9",
   "authors": [
         {
             "name": "Muaz Khan",