index.html demo updated to support mp4-recording.

muaz-khan · Feb 3, 2017 · 0b25a2f · 0b25a2f
1 parent 02d524b
commit 0b25a2f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-# [RecordRTC](https://github.com/muaz-khan/RecordRTC): [WebRTC](https://www.webrtc-experiment.com/) audio/video recording
+# RecordRTC: WebRTC JavaScript Library for Audio+Video+Screen Recording
+
+# Demo: https://www.webrtc-experiment.com/RecordRTC/
 
 [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/)
 

diff --git a/RecordRTC.js b/RecordRTC.js
@@ -1,4 +1,4 @@
-// Last time updated: 2017-01-05 10:11:56 AM UTC
+// Last time updated: 2017-02-03 12:20:23 PM UTC
 
 // ________________
 // RecordRTC v5.4.0
@@ -1703,6 +1703,16 @@ function MediaStreamRecorder(mediaStream, config) {
             recorderHints = 'video/vp8';
         }
 
+        if (typeof MediaRecorder.isTypeSupported === 'function' && recorderHints.mimeType) {
+            if (!MediaRecorder.isTypeSupported(recorderHints.mimeType)) {
+                if (!config.disableLogs) {
+                    console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType);
+                }
+
+                recorderHints.mimeType = config.type === 'audio' ? 'audio/webm' : 'video/webm';
+            }
+        }
+
         // http://dxr.mozilla.org/mozilla-central/source/content/media/MediaRecorder.cpp
         // https://wiki.mozilla.org/Gecko:MediaRecorder
         // https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html
@@ -1715,7 +1725,7 @@ function MediaStreamRecorder(mediaStream, config) {
             mediaRecorder = new MediaRecorder(mediaStream);
         }
 
-        if ('canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(config.mimeType) === false) {
+        if (!MediaRecorder.isTypeSupported && 'canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(config.mimeType) === false) {
             if (!config.disableLogs) {
                 console.warn('MediaRecorder API seems unable to record mimeType:', config.mimeType);
             }

diff --git a/RecordRTC.min.js b/RecordRTC.min.js
diff --git a/dev/MediaStreamRecorder.js b/dev/MediaStreamRecorder.js
@@ -100,6 +100,16 @@ function MediaStreamRecorder(mediaStream, config) {
             recorderHints = 'video/vp8';
         }
 
+        if (typeof MediaRecorder.isTypeSupported === 'function' && recorderHints.mimeType) {
+            if (!MediaRecorder.isTypeSupported(recorderHints.mimeType)) {
+                if (!config.disableLogs) {
+                    console.warn('MediaRecorder API seems unable to record mimeType:', recorderHints.mimeType);
+                }
+
+                recorderHints.mimeType = config.type === 'audio' ? 'audio/webm' : 'video/webm';
+            }
+        }
+
         // http://dxr.mozilla.org/mozilla-central/source/content/media/MediaRecorder.cpp
         // https://wiki.mozilla.org/Gecko:MediaRecorder
         // https://dvcs.w3.org/hg/dap/raw-file/default/media-stream-capture/MediaRecorder.html
@@ -112,7 +122,7 @@ function MediaStreamRecorder(mediaStream, config) {
             mediaRecorder = new MediaRecorder(mediaStream);
         }
 
-        if ('canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(config.mimeType) === false) {
+        if (!MediaRecorder.isTypeSupported && 'canRecordMimeType' in mediaRecorder && mediaRecorder.canRecordMimeType(config.mimeType) === false) {
             if (!config.disableLogs) {
                 console.warn('MediaRecorder API seems unable to record mimeType:', config.mimeType);
             }

diff --git a/index.html b/index.html
@@ -240,6 +240,7 @@ <h2 class="header">
             var recordingMedia = recordingDIV.querySelector('.recording-media');
             var recordingPlayer = recordingDIV.querySelector('video');
             var mediaContainerFormat = recordingDIV.querySelector('.media-container-format');
+            var mimeType = 'video/webm';
 
             window.onbeforeunload = function() {
                 recordingDIV.querySelector('button').disabled = false;
@@ -329,9 +330,17 @@ <h2 class="header">
                     }
                 };
 
-                var mimeType = 'video/webm';
                 if(mediaContainerFormat.value === 'Mp4') {
-                    mimeType = 'video/mp4; codecs=h264';
+                    mimeType = 'video/webm\;codecs=h264';
+
+                    if(typeof MediaRecorder.isTypeSupported === 'function') {
+                        if(MediaRecorder.isTypeSupported('video/mpeg')) {
+                            mimeType = 'video/mpeg';
+                        }
+                        else {
+                            mimeType = 'video/webm\;codecs=h264';
+                        }
+                    }
                 }
 
                 if(recordingMedia.value === 'record-audio') {
@@ -864,8 +873,8 @@ <h2 class="header">
                 recordingDIV.querySelector('#save-to-disk').onclick = function() {
                     if(!recordRTC) return alert('No recording found.');
 
-                    var file = new File([recordRTC.getBlob()], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
-                        type: 'video/webm'
+                    var file = new File([recordRTC.getBlob()], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.' + (mimeType.indexOf('h264') != -1 ? 'mp4' : 'webm'), {
+                        type: mimeType
                     });
 
                     invokeSaveAsDialog(file, file.name);
@@ -874,15 +883,15 @@ <h2 class="header">
                 recordingDIV.querySelector('#open-new-tab').onclick = function() {
                     if(!recordRTC) return alert('No recording found.');
 
-                    var file = new File([recordRTC.getBlob()], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
-                        type: 'video/webm'
+                    var file = new File([recordRTC.getBlob()], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.' + (mimeType.indexOf('h264') != -1 ? 'mp4' : 'webm'), {
+                        type: mimeType
                     });
 
                     window.open(URL.createObjectURL(file));
                 };
 
-                var file = new File([recordRTC.getBlob()], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
-                    type: 'video/webm'
+                var file = new File([recordRTC.getBlob()], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.' + (mimeType.indexOf('h264') != -1 ? 'mp4' : 'webm'), {
+                    type: mimeType
                 });
 
                 window.open(URL.createObjectURL(file));