Added recordrtc@5.2.4 - merged and closed #72 - Fixed #75

RecordRTC now uses MediaRecorder API in ChromeCanary and ChromeDev.
muaz-khan · Jan 8, 2016 · 94868c8 · 94868c8
1 parent 3b30e9e
commit 94868c8
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 99 deletions.
diff --git a/AudioVideo-on-Firefox.html b/AudioVideo-on-Firefox.html
@@ -51,7 +51,7 @@
     </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>
+    <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
 </head>
 
 <body>

diff --git a/Canvas-Recording/index.html b/Canvas-Recording/index.html
@@ -112,11 +112,6 @@ <h3>Content is edit-able.</h3>
 <script src="https://4dbefa02675a4cdb7fc25d009516b060a84a3b4b.googledrive.com/host/0B6GWd_dUUTT8WjhzNlloZmZtdzA/screenshot.js"></script>
 <script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
 
-<!--
-<script src="/libs/screenshot-dev.js"></script>
-<script src="/RecordRTC.js"></script>
--->
-
 <script>
 var elementToShare = document.getElementById('elementToShare');
 var recorder = RecordRTC(elementToShare, {
@@ -148,4 +143,4 @@ <h3>Content is edit-able.</h3>
     document.getElementById('stop').disabled = true;
 };
 </script>
-<a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←WebRTC Experiments Homepage</a>
+<a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid red; color: red; font-size: 1.2em; position: absolute; right: 0; text-decoration: none; top: 0;">←WebRTC Experiments Homepage</a>
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -55,7 +55,6 @@ module.exports = function(grunt) {
         },
         jshint: {
             options: {
-
                 globals: {
                     webkitIndexedDB: true,
                     mozIndexedDB: true,
@@ -109,16 +108,12 @@ module.exports = function(grunt) {
                 typed: true,
                 worker: true
             },
-            files: ['RecordRTC.js'],
-            ignore_warning: {
-                options: {
-                    '-W015': true
-                }
-            }
+            files: ['RecordRTC.js']
         },
         uglify: {
             options: {
-                mangle: false
+                mangle: false,
+                banner: '// Last time updated at <%= grunt.template.today("dddd, mmmm dS, yyyy, h:MM:ss TT") %> \n\n'
             },
             my_target: {
                 files: {

diff --git a/MRecordRTC/index.html b/MRecordRTC/index.html
@@ -65,7 +65,7 @@
     </script>
 
     <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
-    <script src="https://cdn.rawgit.com/webrtc/adapter/master/adapter.js"></script>
+    <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
 </head>
 
 <body>

diff --git a/README.md b/README.md
@@ -77,10 +77,21 @@ To use it:
 <script src="./node_modules/recordrtc/RecordRTC.js"></script>
 
 <!-- or -->
-<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
+<script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
 
 <!-- or -->
-<script src="//www.WebRTC-Experiment.com/RecordRTC.js"></script>
+<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
+```
+
+It is suggested to link specific release:
+
+* https://github.com/muaz-khan/RecordRTC/releases
+
+E.g.
+
+```html
+<!-- use 5.2.4 or any other version -->
+<script src="https://github.com/muaz-khan/RecordRTC/releases/download/5.2.4/RecordRTC.js"></script>
 ```
 
 There are some other NPM packages regarding RecordRTC:
@@ -90,14 +101,14 @@ There are some other NPM packages regarding RecordRTC:
 ## How to capture stream?
 
 ```html
-<script src="https://cdn.rawgit.com/webrtc/adapter/master/adapter.js"></script>
+<script src="https://cdn.webrtc-experiment.com/getUserMediaAdapter.js"></script>
 
 <script>
 function successCallback(stream) {
     // RecordRTC usage goes here
 }
 
-function errorCallback(errror) {
+function errorCallback(error) {
     // maybe another application is using the device
 }
 
@@ -127,7 +138,7 @@ function successCallback(stream) {
     recordRTC.startRecording();
 }
 
-function errorCallback(errror) {
+function errorCallback(error) {
     // maybe another application is using the device
 }
 
@@ -176,7 +187,7 @@ function successCallback(stream) {
     // RecordRTC usage goes here
 }
 
-function errorCallback(errror) {
+function errorCallback(error) {
     // maybe another application is using the device
 }
 

diff --git a/RecordRTC-to-PHP/index.html b/RecordRTC-to-PHP/index.html
@@ -84,7 +84,7 @@
     <script src="https://cdn.webrtc-experiment.com/getScreenId.js"></script>
 
     <!-- for Edige/FF/Chrome/Opera/etc. getUserMedia support -->
-    <script src="https://cdn.rawgit.com/webrtc/adapter/master/adapter.js"></script>
+    <script src="https://cdn.webrtc-experiment.com/gumadapter.js"></script>
 </head>
 
 <body>

diff --git a/RecordRTC.js b/RecordRTC.js
@@ -1,4 +1,4 @@
-// Last time updated at Thursday, December 3rd, 2015, 9:54:34 PM 
+// Last time updated at Friday, January 8th, 2016, 2:15:56 PM 
 
 // links:
 // Open-Sourced: https://github.com/muaz-khan/RecordRTC
@@ -219,6 +219,10 @@ function RecordRTC(mediaStream, config) {
         }
     }
 
+    function readFile(_blob) {
+        postMessage(new FileReaderSync().readAsDataURL(_blob));
+    }
+
     function getDataURL(callback, _mediaRecorder) {
         if (!callback) {
             throw 'Pass a callback function over getDataURL.';
@@ -237,10 +241,8 @@ function RecordRTC(mediaStream, config) {
             return;
         }
 
-        if (typeof Worker !== 'undefined') {
-            var webWorker = processInWebWorker(function readFile(_blob) {
-                postMessage(new FileReaderSync().readAsDataURL(_blob));
-            });
+        if (typeof Worker !== 'undefined' && !navigator.mozGetUserMedia) {
+            var webWorker = processInWebWorker(readFile);
 
             webWorker.onmessage = function(event) {
                 callback(event.data);
@@ -805,19 +807,20 @@ function GetRecorderType(mediaStream, config) {
     }
 
     // todo: enable below block when MediaRecorder in Chrome gets out of flags; and it also supports audio recording.
-    if (false && isChrome && recorder === WhammyRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
+    if (isChrome && recorder !== CanvasRecorder && recorder !== GifRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
         if (mediaStream.getVideoTracks().length) {
             recorder = MediaStreamRecorder;
-            if (!config.disableLogs) {
-                console.debug('Using MediaRecorder API in chrome!');
-            }
         }
     }
 
     if (config.recorderType) {
         recorder = config.recorderType;
     }
 
+    if (!config.disableLogs && isChrome && recorder === MediaStreamRecorder) {
+        console.debug('Using MediaRecorder API in chrome!');
+    }
+
     return recorder;
 }
 
@@ -895,7 +898,8 @@ function MRecordRTC(mediaStream) {
             this.audioRecorder = new RecordRTC(mediaStream, {
                 type: 'audio',
                 bufferSize: this.bufferSize,
-                sampleRate: this.sampleRate
+                sampleRate: this.sampleRate,
+                disableLogs: this.disableLogs
             });
             this.audioRecorder.startRecording();
         }
@@ -904,7 +908,8 @@ function MRecordRTC(mediaStream) {
             this.videoRecorder = new RecordRTC(mediaStream, {
                 type: 'video',
                 video: this.video,
-                canvas: this.canvas
+                canvas: this.canvas,
+                disableLogs: this.disableLogs
             });
             this.videoRecorder.startRecording();
         }
@@ -913,7 +918,8 @@ function MRecordRTC(mediaStream) {
             this.gifRecorder = new RecordRTC(mediaStream, {
                 type: 'gif',
                 frameRate: this.frameRate || 200,
-                quality: this.quality || 10
+                quality: this.quality || 10,
+                disableLogs: this.disableLogs
             });
             this.gifRecorder.startRecording();
         }
@@ -1407,15 +1413,6 @@ function MediaStreamRecorder(mediaStream, config) {
     this.record = function() {
         var recorderHints = config;
 
-        if (isChrome) {
-            if (!recorderHints || typeof recorderHints !== 'string') {
-                recorderHints = 'video/vp8';
-
-                // chrome currently supports only video recording
-                mediaStream = new MediaStream(mediaStream.getVideoTracks());
-            }
-        }
-
         if (!config.disableLogs) {
             console.log('Passing following config over MediaRecorder API.', recorderHints);
         }
@@ -1449,13 +1446,11 @@ function MediaStreamRecorder(mediaStream, config) {
                 return;
             }
 
-            if (isChrome && e.data && !('size' in e.data)) {
-                e.data.size = e.data.length || e.data.byteLength || 0;
+            if (!e.data) {
+                return;
             }
 
-            if (e.data && e.data.size) {
-                recordedBuffers.push(e.data);
-            }
+            recordedBuffers.push(e.data);
         };
 
         mediaRecorder.onerror = function(error) {
@@ -1507,6 +1502,35 @@ function MediaStreamRecorder(mediaStream, config) {
         }
     };
 
+    // both "bufferToDataUrl" and "dataUrlToFile" are taken from "60devs.com"
+    function bufferToDataUrl(buffer, callback) {
+        var blob = new Blob(buffer, {
+            type: 'video/webm'
+        });
+
+        var reader = new FileReader();
+        reader.onload = function() {
+            callback(reader.result);
+        };
+        reader.readAsDataURL(blob);
+    }
+
+    // returns file, that we can send to the server.
+    function dataUrlToFile(dataUrl) {
+        var binary = atob(dataUrl.split(',')[1]),
+            data = [];
+
+        for (var i = 0; i < binary.length; i++) {
+            data.push(binary.charCodeAt(i));
+        }
+
+        var File = window.File || window.Blob;
+
+        return new File([new Uint8Array(data)], 'recorded-video.webm', {
+            type: 'video/webm'
+        });
+    }
+
     /**
      * This method stops recording MediaStream.
      * @param {function} callback - Callback function, that is used to pass recorded blob back to the callee.
@@ -1547,13 +1571,19 @@ function MediaStreamRecorder(mediaStream, config) {
          *     var blob = recorder.blob;
          * });
          */
-        this.blob = new Blob(recordedBuffers, {
-            type: config.mimeType || 'video/webm'
-        });
 
-        this.recordingCallback();
+        var that = this;
+
+        bufferToDataUrl(recordedBuffers, function(dataURL) {
+            var file = dataUrlToFile(dataURL);
 
-        recordedBuffers = [];
+            that.blob = new Blob(recordedBuffers, {
+                type: config.mimeType || 'video/webm'
+            });
+
+            that.recordingCallback();
+            recordedBuffers = [];
+        });
     };
 
     /**

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

diff --git a/dev/GetRecorderType.js b/dev/GetRecorderType.js
@@ -47,18 +47,19 @@ function GetRecorderType(mediaStream, config) {
     }
 
     // todo: enable below block when MediaRecorder in Chrome gets out of flags; and it also supports audio recording.
-    if (false && isChrome && recorder === WhammyRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
+    if (isChrome && recorder !== CanvasRecorder && recorder !== GifRecorder && typeof MediaRecorder !== 'undefined' && 'requestData' in MediaRecorder.prototype) {
         if (mediaStream.getVideoTracks().length) {
             recorder = MediaStreamRecorder;
-            if (!config.disableLogs) {
-                console.debug('Using MediaRecorder API in chrome!');
-            }
         }
     }
 
     if (config.recorderType) {
         recorder = config.recorderType;
     }
 
+    if (!config.disableLogs && isChrome && recorder === MediaStreamRecorder) {
+        console.debug('Using MediaRecorder API in chrome!');
+    }
+
     return recorder;
 }
diff --git a/dev/MRecordRTC.js b/dev/MRecordRTC.js
@@ -72,7 +72,8 @@ function MRecordRTC(mediaStream) {
             this.audioRecorder = new RecordRTC(mediaStream, {
                 type: 'audio',
                 bufferSize: this.bufferSize,
-                sampleRate: this.sampleRate
+                sampleRate: this.sampleRate,
+                disableLogs: this.disableLogs
             });
             this.audioRecorder.startRecording();
         }
@@ -81,7 +82,8 @@ function MRecordRTC(mediaStream) {
             this.videoRecorder = new RecordRTC(mediaStream, {
                 type: 'video',
                 video: this.video,
-                canvas: this.canvas
+                canvas: this.canvas,
+                disableLogs: this.disableLogs
             });
             this.videoRecorder.startRecording();
         }
@@ -90,7 +92,8 @@ function MRecordRTC(mediaStream) {
             this.gifRecorder = new RecordRTC(mediaStream, {
                 type: 'gif',
                 frameRate: this.frameRate || 200,
-                quality: this.quality || 10
+                quality: this.quality || 10,
+                disableLogs: this.disableLogs
             });
             this.gifRecorder.startRecording();
         }