google-chrome - Firefox 和 Chrome 中 MediaRecorder 支持的所有 MIME 类型？

Question

在哪里可以找到Firefox或支持的所有 MIME 类型的列表Chrome？到目前为止我看到的所有例子video/webm都只使用。

score 52 · Accepted Answer

我还没有看到任何关于 Firefox 的综合列表，但我设法找到了一些东西（通过谷歌网络更新部分的 MediaRecorder API 上的一篇文章）链接到这个测试集，这似乎对一些事情有所了解。

从本质上讲，以下是（在撰写本文时）Chrome 中视频/音频接受的 MIME 类型：

视频/网络
视频/webm；编解码器=vp8
视频/webm；编解码器=vp9
视频/webm；编解码器=vp8.0
视频/webm；编解码器=vp9.0
视频/webm；编解码器=h264
视频/webm；编解码器=H264
视频/webm；编解码器=avc1
视频/webm；编解码器=vp8，作品
视频/WEBM；编解码器=VP8，OPUS
视频/webm；编解码器=vp9，作品
视频/webm；编解码器=vp8,vp9,opus
视频/webm；编解码器=h264，作品
视频/webm；编解码器=h264,vp9,opus
视频/x-matroska；编解码器=avc1
音频/网络
音频/webm；编解码器=作品

（2019-02-10 编辑：更新以包括brinchirls 的链接查找）

score 20 · Accepted Answer

我做了这个小功能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)

score 12 · Accepted Answer

对于 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

score 8 · Accepted Answer

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。

所以它是！

这可能会引起人们的兴趣：

MediaRecorder 目前在 Safari 上是实验性的（2020 年 8 月。）
犬类作品
caniuse MediaRecorder

score 4 · Accepted Answer

抱歉，无法添加评论；但认为重要的是要注意：通过 ScriptProcessor 或 audioWorklet 记录原始样本的实现存在缺陷，原因有很多，这里有一个- 主要是因为它将您连接到输出节点，并且时钟“校正”发生在您看到数据之前。

所以缺乏音频/wav 或其他原始格式真的很致命。

但也许......似乎 'audio/webm;codecs=pcm' 在 chrome 中受支持。

score 2 · Accepted Answer

基于@MillenniumFennec的回答（+ 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'))

score 1 · Accepted Answer

支持类型

基于之前的答案（感谢@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 ” , 作品
如果您指定了不正确的语法，例如Firefox 中的video/webm;codecs:vp9,opus，您不会收到错误，您只会得到一个以 VP8,opus 编码的文件。如果您使用 MediaInfo 之类的程序打开它，您只会意识到它的格式与预期的格式不同，该程序能够向您显示已使用的编解码器

score 0 · Accepted Answer

我今天找到了一个解决方案，其中涉及使用 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 中可以正常工作，反之亦然。

google-chrome - Firefox 和 Chrome 中 MediaRecorder 支持的所有 MIME 类型？

8 回答 8

Related

Reference