added audioMimeType and videoMimeType settings for H264 support (fixes …

…#92)
collab-project · Sep 28, 2016 · eff65de · eff65de
1 parent ca2d50a
commit eff65de
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -4,6 +4,7 @@ videojs-record changelog
 1.5.0 - (unreleased)
 --------------------
 
+- Add `audioMimeType` and `videoMimeType` settings for H264 support (#92)
 - Listen for `tap` events to support touch on mobile (#71)
 - Bump required version for videojs-wavesurfer to 1.2.4 and wavesurfer.js to
   1.2.0 for access to their `exportImage` method (#91)

diff --git a/README.md b/README.md
@@ -166,13 +166,15 @@ The available options for this plugin are:
 | `maxLength` | float | `10` | Maximum length of the recorded clip. |
 | `frameWidth` | float | `320` | Width of the recorded video frames. Use [media constraints](#media-constraints) to change the camera resolution width. |
 | `frameHeight` | float | `240` | Height of the recorded video frames. Use [media constraints](#media-constraints) to change the camera height. |
+| `videoMimeType` | string | `'video/webm'` | The mime type for the video recorder. Use `video/mp4` (Firefox) or `video/webm;codecs=H264` (Chrome 52 and newer) for MP4. A full list of supported mime-types in the Chrome browser is listed [here](https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/fast/mediarecorder/MediaRecorder-isTypeSupported.html). |
+| `videoRecorderType` | string or function | `'auto'` | Video recorder type to use. This allows you to specify an alternative recorder class, e.g. `WhammyRecorder`. Defaults to `auto` which let's recordrtc specify the best available recorder type. |
 | `audioEngine` | string | `recordrtc` | Audio recording library to use. Legal values are `recordrtc`, `libvorbis.js`, `lamejs`, `opus-recorder` and `recorder.js`. |
-| `audioRecorderType` | string or function | `auto` | Audio recorder type to use. This allows you to specify an alternative recorder class, e.g. `StereoAudioRecorder`. Defaults to `auto` which let's recordrtc specify the best available recorder type. Currently this setting is only used with the 'recordrtc' `audioEngine`. |
+| `audioRecorderType` | string or function | `'auto'` | Audio recorder type to use. This allows you to specify an alternative recorder class, e.g. `StereoAudioRecorder`. Defaults to `auto` which let's recordrtc specify the best available recorder type. Currently this setting is only used with the 'recordrtc' `audioEngine`. |
+| `audioMimeType` | string | `'auto'` | The mime type for the audio recorder. Defaults to `auto` which will pick the best option available in the browser (e.g. either `audio/wav`, `audio/ogg` or `audio/webm`). A full list of supported mime-types in the Chrome browser is listed [here](https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/fast/mediarecorder/MediaRecorder-isTypeSupported.html).|
 | `audioBufferSize` | float | `4096` | The size of the audio buffer (in sample-frames per second). Legal values: 0, 256, 512, 1024, 2048, 4096, 8192 and 16384. |
 | `audioSampleRate` | float | `44100` | The audio sample rate (in sample-frames per second) at which the `AudioContext` handles audio. Legal values are in the range of 22050 to 96000. |
 | `audioChannels` | float | `2` | Number of audio channels. Using a single channel results in a smaller filesize. |
 | `audioWorkerURL` | string | `''` | URL for the audio worker, for example: `/opus-recorder/oggopusEncoder.js`. Currently only used for opus-recorder and lamejs. |
-| `videoRecorderType` | string or function | `auto` | Video recorder type to use. This allows you to specify an alternative recorder class, e.g. `WhammyRecorder`. Defaults to `auto` which let's recordrtc specify the best available recorder type. |
 | `animationFrameRate` | float | `200` | Frame rate for animated GIF (in frames per second). |
 | `animationQuality` | float | `10` | Sets quality of color quantization (conversion of images to the maximum 256 colors allowed by the GIF specification). Lower values (minimum = 1) produce better colors, but slow processing significantly. The default produces good color mapping at reasonable speeds. Values greater than 20 do not yield significant improvements in speed. |
 

diff --git a/src/js/videojs.record.js b/src/js/videojs.record.js
@@ -145,7 +145,7 @@
             var now = new Date();
             fileObj.lastModifiedDate = now;
 
-            // guess extension name from mime-type, e.g. audio/ogg, but
+            // guess extension name from mime type, e.g. audio/ogg, but
             // any extension is valid here
             var fileExtension = '.' + fileObj.type.split('/')[1];
 
@@ -191,6 +191,7 @@
             this.engine = new MRecordRTC();
             this.engine.mediaType = this.mediaType;
             this.engine.disableLogs = !this.debug;
+            this.engine.mimeType = this.mimeType;
 
             // audio settings
             this.engine.bufferSize = this.bufferSize;
@@ -382,6 +383,7 @@
             this.videoFrameWidth = this.options_.options.frameWidth;
             this.videoFrameHeight = this.options_.options.frameHeight;
             this.videoRecorderType = this.options_.options.videoRecorderType;
+            this.videoMimeType = this.options_.options.videoMimeType;
 
             // audio settings
             this.audioEngine = this.options_.options.audioEngine;
@@ -390,6 +392,7 @@
             this.audioBufferSize = this.options_.options.audioBufferSize;
             this.audioSampleRate = this.options_.options.audioSampleRate;
             this.audioChannels = this.options_.options.audioChannels;
+            this.audioMimeType = this.options_.options.audioMimeType;
 
             // animation settings
             this.animationFrameRate = this.options_.options.animationFrameRate;
@@ -721,6 +724,16 @@
                 this.engine.audioChannels = this.audioChannels;
                 this.engine.audioWorkerURL = this.audioWorkerURL;
 
+                // mime type
+                this.engine.mimeType = {
+                    video: this.videoMimeType,
+                    gif: 'image/gif'
+                };
+                if (this.audioMimeType !== null)
+                {
+                    this.engine.mimeType.audio = this.audioMimeType;
+                }
+
                 // video/canvas settings
                 this.engine.video = {
                     width: this.videoFrameWidth,
@@ -1942,6 +1955,14 @@
         frameHeight: 240,
         // Enables console logging for debugging purposes.
         debug: false,
+        // The mime type for the video recorder. Default to 'video/webm'.
+        // Use 'video/mp4' (Firefox) or 'video/webm;codecs=H264' (Chrome 52 and
+        // newer) for MP4.
+        videoMimeType: 'video/webm',
+        // Video recorder type to use. This allows you to specify an alternative
+        // recorder class, e.g. WhammyRecorder. Defaults to 'auto' which let's
+        // recordrtc specify the best available recorder type.
+        videoRecorderType: 'auto',
         // Audio recording library to use. Legal values are 'recordrtc',
         // 'libvorbis.js', 'opus-recorder', 'lamejs' and 'recorder.js'.
         audioEngine: 'recordrtc',
@@ -1950,6 +1971,10 @@
         // recordrtc specify the best available recorder type. Currently this
         // setting is only used with the 'recordrtc' audioEngine.
         audioRecorderType: 'auto',
+        // The mime type for the audio recorder. Defaults to 'auto' which will pick
+        // the best option available in the browser (e.g. either 'audio/wav',
+        // 'audio/ogg' or 'audio/webm').
+        audioMimeType: 'auto',
         // The size of the audio buffer (in sample-frames) which needs to
         // be processed each time onprocessaudio is called.
         // From the spec: This value controls how frequently the audioprocess event is
@@ -1973,10 +1998,6 @@
         audioChannels: 2,
         // URL for the audio worker.
         audioWorkerURL: '',
-        // Video recorder type to use. This allows you to specify an alternative
-        // recorder class, e.g. WhammyRecorder. Defaults to 'auto' which let's
-        // recordrtc specify the best available recorder type.
-        videoRecorderType: 'auto',
         // Frame rate in frames per second.
         animationFrameRate: 200,
         // Sets quality of color quantization (conversion of images to the