MDL-78391 atto_recordrtc: Improve MacOS codec compatability

lib/editor/atto/plugins/recordrtc/yui/build/moodle-atto_recordrtc-recording/moodle-atto_recordrtc-recording-debug.js

@@ -189,9 +189,31 @@ M.atto_recordrtc.commonmodule = {
         }
     },
 
+    getFileExtension: function(type) {
+        if (type === 'audio') {
+            if (window.MediaRecorder.isTypeSupported('audio/webm')) {
+                return 'webm';
+            } else if (window.MediaRecorder.isTypeSupported('audio/ogg')) {
+                return 'ogg';
+            } else if (window.MediaRecorder.isTypeSupported('audio/mp4')) {
+                return 'mp4';
+            }
+        } else {
+            if (window.MediaRecorder.isTypeSupported('audio/webm')) {
+                return 'webm';
+            } else if (window.MediaRecorder.isTypeSupported('audio/mp4')) {
+                return 'mp4';
+            }
+        }
+
+        window.console.warning('Unknown file type for MediaRecorder API');
+        return '';
+    },
+
     // Upload recorded audio/video to server.
     upload_to_server: function(type, callback) {
         var xhr = new window.XMLHttpRequest();
+        var fileExtension = this.getFileExtension(type);
 
         // Get src media of audio/video tag.
         xhr.open('GET', cm.player.get('src'), true);
@@ -204,8 +226,8 @@ M.atto_recordrtc.commonmodule = {
 
                 // Generate filename with random ID and file extension.
                 var fileName = (Math.random() * 1000).toString().replace('.', '');
-                fileName += (type === 'audio') ? '-audio.ogg'
-                                               : '-video.webm';
+                fileName += (type === 'audio') ? '-audio.' + fileExtension
+                                               : '-video.' + fileExtension;
 
                 // Create FormData to send to PHP filepicker-upload script.
                 var formData = new window.FormData(),
@@ -471,25 +493,51 @@ M.atto_recordrtc.abstractmodule = {
 
         if (recType === 'audio') {
             types = [
+                // Firefox and Chrome both support webm and ogg.
                 'audio/webm;codecs=opus',
-                'audio/ogg;codecs=opus'
+                'audio/ogg;codecs=opus',
+
+                // Safari supports mp4.
+                'audio/mp4;codecs=opus',
+                'audio/mp4;codecs=wav',
+                'audio/mp4;codecs=mp3',
             ];
             options = {
                 audioBitsPerSecond: window.parseInt(cm.editorScope.get('audiobitrate'))
             };
         } else {
             types = [
+                // Support webm as a preference.
+                // This container supports both vp9, and vp8.
+                // It does not support AVC1/h264 at all.
+                // It is supported by Chromium, and Firefox browsers, but not Safari.
                 'video/webm;codecs=vp9,opus',
-                'video/webm;codecs=h264,opus',
-                'video/webm;codecs=vp8,opus'
+                'video/webm;codecs=vp8,opus',
+
+                // Fall back to mp4 if webm is not available.
+                // The mp4 container supports v9, and h264 but neither of these are supported for recording on other
+                // browsers.
+                // In addition to this, we can record in v9, but VideoJS does not support an mp4 containern with v9 codec
+                // for playback. We leave it as a final option as a just-in-case.
+                'video/mp4;codecs=h264,opus',
+                'video/mp4;codecs=h264,wav',
+                'video/mp4;codecs=v9,opus',
             ];
             options = {
                 audioBitsPerSecond: window.parseInt(cm.editorScope.get('audiobitrate')),
                 videoBitsPerSecond: window.parseInt(cm.editorScope.get('videobitrate'))
             };
         }
 
-        var compatTypes = types.filter(function(type) {
+        var possibleTypes = types.reduce(function(result, type) {
+            result.push(type);
+            // Safari seems to use codecs: instead of codecs=.
+            // It is safe to add both, so we do, but we want them to remain in order.
+            result.push(type.replace('=', ':'));
+            return result;
+        }, []);
+
+        var compatTypes = possibleTypes.filter(function(type) {
             return window.MediaRecorder.isTypeSupported(type);
         });