MDL-78391 tiny_recordrtc: Improve codec selection

From my experimentation I have discovered that Safari does not properly
respect the standard MediaRecorder mimetype. Instead of using `codecs=`
it uses `codecs:`.

This change copies the codec array to have the list of possible codecs
include both codecs= and codecs: whilst remaining in order.

lib/editor/tiny/plugins/recordrtc/amd/src/base_recorder.js

@@ -180,13 +180,25 @@ export default class {
      * @returns {object} The options for the MediaRecorder instance.
      */
     getParsedRecordingOptions() {
-        const types = this.getSupportedTypes();
-        const options = this.getRecordingOptions();
-        const compatTypes = types.filter((type) => window.MediaRecorder.isTypeSupported(type));
+        const requestedTypes = this.getSupportedTypes();
+        const possibleTypes = requestedTypes.reduce((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;
+        }, []);
 
+        const compatTypes = possibleTypes.filter((type) => window.MediaRecorder.isTypeSupported(type));
+
+        const options = this.getRecordingOptions();
         if (compatTypes.length !== 0) {
             options.mimeType = compatTypes[0];
         }
+        window.console.info(
+            `Selected codec ${options.mimeType} from ${compatTypes.length} options.`,
+            compatTypes,
+        );
 
         return options;
     }