在哪里可以找到Firefox 或Chrome 支持的所有 MIME 类型的列表？到目前为止，我看到的所有示例都仅使用 video/webm。
【问题讨论】：
标签： google-chrome firefox mime-types web-mediarecorder
我还没有看到任何关于 Firefox 的综合列表，但我已经设法找到了链接到 this test set 的东西（通过 Google 网络更新部分的 post on the MediaRecorder API）阐明一些事情。
基本上，以下是（在撰写本文时）Chrome 中视频/音频可接受的 MIME 类型：
video/x-matroska;codecs=avc1
音频/网络
（2019 年 2 月 10 日编辑：更新以包含 brianchirls' 链接查找）
【讨论】：
audio/wav，所以没有数据丢失的记录？有人在需求期间严重懈怠......
我在我的utils.js 中创建了这个小功能以获得最佳支持的编解码器，支持多种可能的命名变化（例如：firefox 支持video/webm;codecs:vp9 但不支持video/webm;codecs=vp9）
您可以根据需要按优先级重新排序 videoTypes、audioTypes 和 codecs 数组，因此您将始终选择下一个支持的类型。
编辑：添加对音频的支持，修复 mimetype 重复
/**
* @param {"audio" | "video"} media String "video" or "audio"
* @param {string[]} types String array of types
* @param {string[]} codecs String array of codecs
*
* @return {string[]} Array of accepted "mimetype;codec"
*/
function getSupportedMimeTypes(media, types, codecs) {
const isSupported = MediaRecorder.isTypeSupported;
const supported = [];
types.forEach((type) => {
const mimeType = `${media}/${type}`;
codecs.forEach((codec) => [
`${mimeType};codecs=${codec}`,
`${mimeType};codecs:${codec}`,
`${mimeType};codecs=${codec.toUpperCase()}`,
`${mimeType};codecs:${codec.toUpperCase()}`
].forEach(variation => {
if(isSupported(variation))
supported.push(variation);
}));
if (isSupported(mimeType))
supported.push(mimeType);
});
return supported;
};
// Usage ------------------
const videoTypes = ["webm", "ogg", "mp4", "x-matroska"];
const audioTypes = ["webm", "ogg", "mp3", "x-matroska"];
const codecs = ["vp9", "vp9.0", "vp8", "vp8.0", "avc1", "av1", "h265", "h.265", "h264", "h.264", "opus", "pcm", "aac", "mpeg", "mp4a"];
const supportedVideos = getSupportedMimeTypes("video", videoTypes, codecs);
const supportedAudios = getSupportedMimeTypes("audio", audioTypes, codecs);
console.log('-- Top supported Video : ', supportedVideos[0])
console.log('-- Top supported Audio : ', supportedAudios[0])
console.log('-- All supported Videos : ', supportedVideos)
console.log('-- All supported Audios : ', supportedAudios)【讨论】：
MediaSource，尽管结果有点令人沮丧......你有〜5个选择......
对于 Firefox，可接受的 mimetypes 可以在 MediaRecorder.cpp 中找到并使用 MediaRecorder.isTypeSupported(...) 确认
例子：
21:31:27.189 MediaRecorder.isTypeSupported('video/webm;codecs=vp8')
21:31:27.135 true
21:31:41.598 MediaRecorder.isTypeSupported('video/webm;codecs=vp8.0')
21:31:41.544 true
21:32:10.477 MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
21:32:10.431 false
21:31:50.534 MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
21:31:50.479 true
21:31:59.198 MediaRecorder.isTypeSupported('audio/webm')
21:31:59.143 false
【讨论】：
audio/webm 会为您返回 false。在我的浏览器中，它返回 true
MediaRecorder 支持常见的音频编解码器：
MediaRecorder.isTypeSupported('audio/webm;codecs=opus'); // true on chrome, true on firefox => SO OPUS IT IS!
MediaRecorder.isTypeSupported('audio/ogg;codecs=opus'); // false on chrome, true on firefox
MediaRecorder.isTypeSupported('audio/webm;codecs=vorbis'); // false on chrome, false on firefox
MediaRecorder.isTypeSupported('audio/ogg;codecs=vorbis'); // false on chrome, false on firefox
Firefox 在第一个实现中使用 Vorbis 进行音频录制，但它 之后搬到 Opus。
原来如此！
这可能会引起人们的兴趣：
【讨论】：
抱歉，无法添加 cmets；但认为重要的是要注意： 通过 ScriptProcessor 或 audioWorklet 记录原始样本的实现存在缺陷，原因有很多，one here - 主要是因为它将您连接到输出节点，并且时钟“校正”发生在您看到数据之前。
所以缺乏音频/wav 或其他原始格式真的很致命。
但也许......似乎 'audio/webm;codecs=pcm' 在 chrome 中受支持。
【讨论】：
基于 @MillenniumFennec 的 answer（+ audio + 删除重复项 + 其他一些改进）：
function getAllSupportedMimeTypes(...mediaTypes) {
if (!mediaTypes.length) mediaTypes.push(...['video', 'audio'])
const FILE_EXTENSIONS = ['webm', 'ogg', 'mp4', 'x-matroska']
const CODECS = ['vp9', 'vp9.0', 'vp8', 'vp8.0', 'avc1', 'av1', 'h265', 'h.265', 'h264', 'h.264', 'opus']
return [...new Set(
FILE_EXTENSIONS.flatMap(ext =>
CODECS.flatMap(codec =>
mediaTypes.flatMap(mediaType => [
`${mediaType}/${ext};codecs:${codec}`,
`${mediaType}/${ext};codecs=${codec}`,
`${mediaType}/${ext};codecs:${codec.toUpperCase()}`,
`${mediaType}/${ext};codecs=${codec.toUpperCase()}`,
`${mediaType}/${ext}`,
]),
),
),
)].filter(variation => MediaRecorder.isTypeSupported(variation))
}
console.log(getAllSupportedMimeTypes('video', 'audio'))【讨论】：
支持类型
基于之前的答案（感谢@Fennec），我创建了一个 jsfiddle 来列出所有支持的类型：https://jsfiddle.net/luiru72/rfhLcu26/5/。我还添加了一个不存在的编解码器（“notatall”）。
在这个脚本的结果中，如果你从Firefox调用它，你会发现：
video/webm;codecs:vp9.0
video/webm;codecs=vp8
video/webm;codecs:vp8
video/webm;codecs:notatall
请注意，您不会找到 "video/webm;codecs=vp9.0"，也不会找到 "video/webm;codecs=notatall" .
这是因为 Firefox 上的 isTypeSupported 能够理解请求“video/webm;codecs=vp9.0”或“video/webm;codecs=notatall”并响应它不支持；但它无法理解请求“video/webm;codecs:vp9.0”或“video/webm;codecs:notatall”，因此 Firefox 上的 isTypeSupported（截至版本 92.0，2021-09-14）响应它支持。
媒体记录器
我创建了另一个 jsfiddle 来试验 MediaRecorder：https://jsfiddle.net/luiru72/b9q4nsdv/42/
如果您尝试在 Firefox 上使用错误的语法“video/webm;codecs:vp9,opus”或“video/webm;codecs:notatall,opus”创建 MediaRecorder，您不会收到错误，您只会收到用 VP8 和 Opus 编码的视频。如果你使用 MediaInfo https://sourceforge.net/projects/mediainfo/ 之类的工具打开文件，你会发现它是用 VP8，Opus 编码的。
如果您指定“video/webm;codecs=vp8”，则会收到错误消息，因为 vp8 无法对音频进行编码。您需要同时指定：“video/webm;codecs=vp8,opus”，或者您可以只依赖默认值，仅指定容器格式“video/webm”。这样，你现在就得到了用 VP8,Opus 编码的文件，但是实际的视频和音频编码器默认值可能会随着时间而改变，所以如果你想确定使用 VP8 和 Opus，你需要指定它们。
关键要点：
您应该使用语法：video/webm;codecs=vp8，而不是 video/webm;codecs:vp8
在创建 MediaRecorder 时，应格外小心：例如，在 Firefox 上，支持 video/webm;codecs=vp8，但在创建 MediaRecorder 时应使用“ video/webm" 或 "video/webm;codecs=vp8,opus
如果您指定了不正确的语法，例如 Firefox 中的 video/webm;codecs:vp9,opus，您不会收到错误，您只会得到一个以 VP8,opus 编码的文件.如果您使用 MediaInfo 之类的程序打开它，您只会意识到它的格式与预期的格式不同，该程序能够向您显示已使用的编解码器
【讨论】：
我今天找到了一个解决方案，其中涉及使用
var canRecordVp9 = MediaRecorder.isTypeSupported('video/webm;codecs=vp9');
区分Chrome（和Opera）和Firefox，然后做
if (canRecordVp9)
{
mediaRecorder = new MediaRecorder(stream, {mimeType : 'video/webm;codecs=vp9'});
} else
{
mediaRecorder = new MediaRecorder(stream);
}
相应地构造 MediaRecorder。
然后，在抓取 blob 时：
if (canRecordVp9)
{
blob = new Blob([myArrayBuffer], { "type" : "video/webm;codecs=vp9" });
} else
{
blob = new Blob([myArrayBuffer], { "type" : "video/webm" });
}
最后，使用 FileReader 将 blob 作为 dataUrl 获取： `
var reader = new FileReader();
reader.onload = function(event)
{
var blobDataUrl = event.target.result;
}
reader.readAsDataURL(blob);`
然后我将 blobDataUrl 保存为 webm 文件，在 Chrome 中录制的视频在 Firefox 中可以正常工作，反之亦然。
【讨论】：