Firefox和Chrome中MediaRecorder支持的所有MIME类型?

laik7k3q  于 2023-08-01  发布在  Go
关注(0)|答案(8)|浏览(153)

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

hfsqlsce

hfsqlsce1#

我还没有看到任何形式的全面清单,但我 * 有 * 设法找到一些东西(通过post on the MediaRecorder API从谷歌的网页更新部分),链接到this test set,似乎揭示了一些事情。
基本上,看起来以下是(在撰写本文时)Chrome中视频/音频的可接受MIME类型:

  • 视频/webm
  • video/webm;codecs=vp8
  • video/webm;codecs=vp9
  • video/webm;codecs=vp8.0
  • video/webm;codecs=vp9.0
  • video/webm;codecs=h264
  • video/webm;codecs=H264
  • video/webm;codecs=avc1
  • 视频/webm;编解码器= vp 8,opus
  • 视频/WEBM;编解码器= VP 8、OPUS
  • video/webm;codecs=vp9,opus
  • 视频/webm;编解码器= vp 8,vp 9,opus
  • video/webm;codecs=h264,opus
  • video/webm;codecs=h264,vp9,opus
  • 视频/x-matroska;编解码器= avc 1
  • 音频/webm
  • 音频/网络;编解码器=opus

(编辑于2019-02-10:更新以包括brianchirls'链接查找)

xkftehaa

xkftehaa2#

我在utils.js中创建了这个小函数,以获得最佳支持的编解码器,并支持多种可能的命名变体(例如:firefox支持video/webm;codecs:vp9,但不支持video/webm;codecs=vp9
您可以根据需要按优先级重新排序videoTypesaudioTypescodecs阵列,因此您将始终落在下一个支持的类型上。
编辑:添加对音频的支持,修复了mimetype重复

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.toUpperCase()}`,
        // /!\ false positive /!\
        // `${mimeType};codecs:${codec}`,
        // `${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 = ["should-not-be-supported","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)

字符串

w8f9ii69

w8f9ii693#

对于Firefox,可以在MediaRecorder.cpp中找到接受的mimetype,并使用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

字符串

lo8azlld

lo8azlld4#

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。

所以OPUS它是!

这可能证明有意义:

  • MediaRecorder目前在Safari上进行实验(2020年8月)。
  • 犬的作品
  • caniuse MediaRecorder
drkbr07n

drkbr07n5#

只需执行下面的代码片段(基于@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'))

字符串

svujldwt

svujldwt6#

抱歉,无法添加评论;但我认为有必要指出通过ScriptProcessor或audioWorklet记录原始样本的实现存在缺陷,原因有很多,one here-主要是因为它将您连接到输出节点,并且时钟“校正”发生在您看到数据之前。
所以缺乏音频/wav或其他原始格式真的很要命。
但也许... seems 'audio/webm; chrome支持codecs=pcm'。

kuhbmx9i

kuhbmx9i7#

ISTYPE支持
基于前面的答案(感谢@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”either.
这是因为Firefox上的isTypeSupported能够理解请求“video/webm; codecs=vp9.0”或“video/webm; codecs=notatall”,并且它响应不支持它;但是它不能理解请求“video/webm;编解码器:vp9.0”或“video/webm; codecs:notatall”,所以Firefox上的isTypeSupported(从版本92.0,2021-09-14起)响应它是受支持的。
媒体记录器
我创建了另一个jsfiddle来实验MediaRecorder:https://jsfiddle.net/luiru72/b9q4nsdv/42/
如果您尝试在Firefox上使用错误的语法“video/webm;编解码器:VP 9,opus或video/webm; codecs:notatall,opus”,你不会得到一个错误,你只会得到一个用VP 8和Opus编码的视频。如果您使用MediaInfo https://sourceforge.net/projects/mediainfo/等工具打开该文件,您会发现它是用VP 8,Opus编码的。
如果指定“video/webm; codecs= vp 8”,你会得到一个错误,因为vp 8不能编码音频。您需要同时指定:“video/webm; codecs= vp 8,opus”,或者你可以只依赖默认值,只指定容器格式“video/webm”。通过这种方式,您现在可以获得使用VP 8,Opus编码的文件,但实际的视频和音频编码器默认值可能会随着时间的推移而更改,因此如果您想确保使用VP 8和Opus,则需要指定它们。
关键要点:
1.你应该使用语法:video/webm; codecs=vp8,not
video/webm;编解码器:vp 8**
1.创建MediaRecorder时,您应该格外小心:例如,在Firefox上,video/webm;支持codecs= vp 8,但在创建MediaRecorder时,应使用“video/webm”或“video/webm;编解码器= vp 8,opus
1.如果指定了不正确语法,例如video/webm; codecs:vp 9,opus在Firefox中,你不会得到一个错误,你只是得到一个用VP 8,opus编码的文件。只有当您使用MediaInfo之类的程序打开它时,您才会意识到它的格式与预期的格式不同,该程序能够向您显示已使用的编解码器

mjqavswn

mjqavswn8#

我今天找到了一个解决方案,它涉及使用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。
然后,当抓取斑点时: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中也能正常工作,反之亦然。

相关问题