MDL-78391 atto_recordrtc: Improve MacOS codec compatability

This commit is contained in:
Andrew Nicols
2023-07-03 16:52:28 +08:00
parent b31b0f7479
commit e18af1ab61
5 changed files with 164 additions and 20 deletions
@@ -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,17 +493,35 @@ 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')),
@@ -489,7 +529,15 @@ M.atto_recordrtc.abstractmodule = {
};
}
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);
});
File diff suppressed because one or more lines are too long
@@ -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,17 +493,35 @@ 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')),
@@ -489,7 +529,15 @@ M.atto_recordrtc.abstractmodule = {
};
}
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);
});
@@ -80,17 +80,35 @@ 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')),
@@ -98,7 +116,15 @@ M.atto_recordrtc.abstractmodule = {
};
}
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);
});
@@ -187,9 +187,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);
@@ -202,8 +224,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(),