Merge pull request #42 from muaz-khan/experimental

Merge RecordRTC Experimental Branch

Author: muaz-khan

Canvas-Recording/index.html

@@ -94,24 +94,33 @@ <h3>Content is edit-able.</h3>
     <br />
 
     <pre>
-        var recorder = RecordRTC(document.documentElement, { type: 'canvas' }); recorder.startRecording(); recorder.stopRecording(function(url) { window.open(url); });
-    </pre>
+var recorder = RecordRTC(document.documentElement, {
+    type: 'canvas'
+});
+recorder.startRecording();
+recorder.stopRecording(function(url) {
+    window.open(url);
+});
+</pre>
 </div>
 
 <div style="position: fixed;left: 20%;right: 20%;text-align: center;">
     <button id="start" contenteditable="false">Start Canvas Recording</button>
     <button id="stop" disabled contenteditable="false">Stop</button>
 </div>
 
-<script src="https://4dbefa02675a4cdb7fc25d009516b060a84a3b4b.googledrive.com/host/0B6GWd_dUUTT8WjhzNlloZmZtdzA/screenshot.js">
-</script>
-<script src="https://cdn.webrtc-experiment.com/RecordRTC.js">
-</script>
+<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, {
-    type: 'canvas'
+    recorderType: CanvasRecorder
 });
 
 document.getElementById('start').onclick = function() {
@@ -133,5 +142,10 @@ <h3>Content is edit-able.</h3>
         video.play();
     });
 };
+
+window.onbeforeunload = function() {
+    document.getElementById('start').disabled = false;
+    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>

Gruntfile.js

@@ -20,6 +20,8 @@ module.exports = function(grunt) {
                 src: [
                     'dev/head.js',
                     'dev/RecordRTC.js',
+                    'dev/RecordRTC-Configuration.js',
+                    'dev/GetRecorderType.js',
                     'dev/MRecordRTC.js',
                     'dev/Cross-Browser-Declarations.js',
                     'dev/Storage.js',

README.md

@@ -117,6 +117,12 @@ var recordRTC;
 function successCallback(stream) {
     // RecordRTC usage goes here
 
+    var options = {
+      mimeType: 'video/webm', // or video/mp4 or audio/ogg
+      audioBitsPerSecond: 128000,
+      videoBitsPerSecond: 128000,
+      bitsPerSecond: 128000 // if this line is provided, skip above two
+    };
     recordRTC = RecordRTC(MediaStream);
     recordRTC.startRecording();
 }
@@ -529,6 +535,58 @@ If you passed invalid value then you'll get blank audio.
 
 You can pass custom sample-rate values only on Mac (or additionally maybe on Windows 10).
 
+## `mimeType`
+
+This option allows you set MediaRecorder output format (currently works only in Firefox; Chrome support coming soon):
+
+```javascript
+var options = {
+  mimeType 'video/webm', // or video/mp4 or audio/ogg
+  bitsPerSecond: 128000
+};
+var recorder = RecordRTC(mediaStream, options);
+```
+
+Note: For chrome, it will simply auto-set `type:audio or video` parameters to keep supporting `StereoAudioRecorder.js` and `WhammyRecorder.js`.
+
+That is, you can skip passing `type:audio` parameter when you're using `mimeType` parameter.
+
+## `bitsPerSecond`
+
+The chosen bitrate for the audio and video components of the media. If this is specified along with one or the other of the above properties, this will be used for the one that isn't specified.
+
+```javascript
+var options = {
+  mimeType 'video/webm', // or video/mp4 or audio/ogg
+  bitsPerSecond: 128000
+};
+var recorder = RecordRTC(mediaStream, options);
+```
+
+## `audioBitsPerSecond`
+
+The chosen bitrate for the audio component of the media.
+
+```javascript
+var options = {
+  mimeType 'audio/ogg',
+  audioBitsPerSecond: 128000
+};
+var recorder = RecordRTC(mediaStream, options);
+```
+
+## `videooBitsPerSecond`
+
+The chosen bitrate for the video component of the media.
+
+```javascript
+var options = {
+  mimeType 'video/webm', // or video/mp4
+  videooBitsPerSecond: 128000
+};
+var recorder = RecordRTC(mediaStream, options);
+```
+
 ## `onAudioProcessStarted`
 
 Note: "initRecorder" is preferred over this old hack. Both works similarly.

RecordRTC-to-PHP/index.html

@@ -194,7 +194,7 @@ <h2 class="header">
                     }
 
                     if(button.recordRTC) {
-                        if(button.recordRTC.length && button.RecordRTC instanceof Array) {
+                        if(button.recordRTC.length) {
                             button.recordRTC[0].stopRecording(function(url) {
                                 if(!button.recordRTC[1]) {
                                     button.recordingEndedCallback(url);