Все типы MIME, поддерживаемые MediaRecorder в Firefox и Chrome?

Question

Все типы MIME, поддерживаемые MediaRecorder в Firefox и Chrome?

Где я могу найти список всех типов MIME, которые поддерживаются Firefox или же Chrome? Все примеры, которые я видел до сих пор, используют video/webm только.

72

google-chrome firefox mime-types web-mediarecorder

Источник

user4364358 19 янв '17 в 10:45

9 ответов

Другие вопросы по тегам google-chrome firefox mime-types web-mediarecorder

user2123178 17 фев '17 в 21:44 2017-02-17 21:44 · Answer 1 · 2017-02-17 21:44

Я еще не видел какого-либо исчерпывающего списка для Firefox, но мне удалось найти что-то (через сообщение об API MediaRecorder из раздела веб-обновлений Google), которое ссылается на этот набор тестов, который, кажется, проливает свет на некоторые вещи.

По сути, похоже, что (на момент написания) были приняты MIME-типы для видео / аудио в Chrome:

видео / WebM
видео / 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, опус
видео / WebM, кодеки =h264, опус
видео / WebM, кодеки =h264,vp9, опус
видео / х-Matroska; кодеки = AVC1
аудио / WebM
аудио / WebM; кодеки = опус

user12594730 03 ноя '20 в 06:05 2020-11-03 06:05 · Answer 2 · 2020-11-03 06:05

Я сделал эту небольшую функцию в своем utils.js чтобы получить лучший поддерживаемый кодек с поддержкой нескольких возможных вариантов именования (пример: firefox служба поддержки video/webm;codecs:vp9 но нет video/webm;codecs=vp9

Вы можете изменить порядок VIDEO_CODECS массив по приоритету, поэтому вы всегда можете перейти к следующему поддерживаемому кодеку.

         function getSupportedMimeTypes() {
  const VIDEO_TYPES = [
    "webm", 
    "ogg",
    "mp4",
    "x-matroska"
  ];
  const VIDEO_CODECS = [
    "vp9",
    "vp9.0",
    "vp8",
    "vp8.0",
    "avc1",
    "av1",
    "h265",
    "h.265",
    "h264",
    "h.264",
    "opus",
  ];

  const supportedTypes = [];
  VIDEO_TYPES.forEach((videoType) => {
    const type = `video/${videoType}`;
    VIDEO_CODECS.forEach((codec) => {
        const variations = [
        `${type};codecs=${codec}`,
        `${type};codecs:${codec}`,
        `${type};codecs=${codec.toUpperCase()}`,
        `${type};codecs:${codec.toUpperCase()}`
      ]
      variations.forEach(variation => {
        if(MediaRecorder.isTypeSupported(variation)) 
            supportedTypes.push(variation);
      })
    });
    if (MediaRecorder.isTypeSupported(type)) supportedTypes.push(type);
  });
  return supportedTypes;
}

const supportedMimeTypes = getSupportedMimeTypes();
console.log('Best supported mime types by priority : ', supportedMimeTypes[0])
console.log('All supported mime types ordered by priority : ', supportedMimeTypes)

user5318303 03 июл '21 в 16:04 2021-07-03 16:04 · Answer 3 · 2021-07-03 16:04

На основе local dev «s ответ (+ audio, удаление дубликатов и некоторые другие улучшения):

17

Источник

user5318303 03 июл '21 в 16:04

user5040168 15 июн '18 в 19:35 2018-06-15 19:35 · Answer 4 · 2018-06-15 19:35

Для Firefox принятые миметипы можно найти в 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

user1717535 25 авг '20 в 20:58 2020-08-25 20:58 · Answer 5 · 2020-08-25 20:58

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 г.)
Caniuse Opus
caniuse MediaRecorder

user7071220 22 окт '19 в 17:54 2019-10-22 17:54 · Answer 6 · 2019-10-22 17:54

Извините, не могу добавлять комментарии; но счел важным отметить: реализация записи сырых сэмплов через ScriptProcessor или audioWorklet ошибочна по ряду причин, одна из которых здесь - в основном потому, что она соединяет вас с выходным узлом, а "коррекция" часов происходит до того, как вы увидите данные.

Так что отсутствие аудио /wav или другого необработанного формата действительно убивает.

Но может быть.... кажется, что 'audio/webm;codecs=pcm' поддерживается в Chrome.

user85785 12 сен '23 в 03:23 2023-09-12 03:23 · Answer 7 · 2023-09-12 03:23

Что я использую для обнаружения поддерживаемых форматов:

      const containers = ['webm', 'ogg', 'mp4', 'x-matroska', '3gpp', '3gpp2', 
                    '3gp2', 'quicktime', 'mpeg', 'aac', 'flac', 'wav']
const codecs = ['vp9', 'vp8', 'avc1', 'av1', 'h265', 'h.265', 'h264',             
                'h.264', 'opus', 'pcm', 'aac', 'mpeg', 'mp4a'];

const supportedAudios = containers.map(format => `audio/${format}`)
  .filter(mimeType => MediaRecorder.isTypeSupported(mimeType))
const supportedAudioCodecs = supportedAudios.flatMap(audio => 
  codecs.map(codec => `${audio};codecs=${codec}`))
      .filter(mimeType => MediaRecorder.isTypeSupported(mimeType))

console.log('Supported Audio formats:', supportedAudios)
console.log('Supported Audio codecs:', supportedAudioCodecs)

const supportedVideos = containers.map(format => `video/${format}`)
  .filter(mimeType => MediaRecorder.isTypeSupported(mimeType))
const supportedVideoCodecs = supportedVideos.flatMap(video => 
  codecs.map(codec => `${video};codecs=${codec}`))
      .filter(mimeType => MediaRecorder.isTypeSupported(mimeType))

console.log('Supported Video formats:', supportedVideos)
console.log('Supported Video codecs:', supportedVideoCodecs)

Итоги 2023 года:

macOS

Сафари 16.6:

      Supported Audio formats: – ["audio/mp4"]
Supported Audio codecs: – ["audio/mp4;codecs=avc1", "audio/mp4;codecs=mp4a"]

Supported Video formats: – ["video/mp4"]
Supported Video codecs: – ["video/mp4;codecs=avc1", "video/mp4;codecs=mp4a"]

Хром 116:

      Supported Audio formats: ['audio/webm']
Supported Audio codecs: ['audio/webm;codecs=opus', 'audio/webm;codecs=pcm']

Supported Video formats: ['video/webm', 'video/x-matroska']
Supported Video codecs: ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 
'video/webm;codecs=avc1', 'video/webm;codecs=av1', 'video/webm;codecs=h264', 
'video/webm;codecs=opus', 'video/webm;codecs=pcm', 'video/x-matroska;codecs=vp9', 
'video/x-matroska;codecs=vp8', 'video/x-matroska;codecs=avc1', 
'video/x-matroska;codecs=av1', 'video/x-matroska;codecs=h264', 
'video/x-matroska;codecs=opus', 'video/x-matroska;codecs=pcm']

Окна

Все браузеры на базе Chrome и Blink, такие как Edge и Vivaldi, поддерживают ту же поддержку, что и Chrome macOS.

Фаерфокс 117:

      Supported Audio formats: ["audio/webm", "audio/ogg"]
Supported Audio codecs: ["audio/webm;codecs=opus", "audio/ogg;codecs=opus"]

Supported Video formats: ["video/webm"]
Supported Video codecs: ["video/webm;codecs=vp8", "video/webm;codecs=opus"]

user4845461 14 сен '21 в 13:35 2021-09-14 13:35 · Answer 8 · 2021-09-14 13:35

ПОДДЕРЖИВАЕМЫЕ ТИПЫ

Основываясь на предыдущих ответах (спасибо @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» .

Это связано с тем, что isTypeSupported в Firefox может понять запрос «video / webm; codecs = vp9.0» или «video / webm; codecs = notatall» и отвечает, что он не поддерживается; но он не может понять запрос "video / webm; codecs: vp9.0" или "video / webm; codecs: notatall", поэтому isTypeSupported в Firefox (начиная с версии 92.0, 2021-09-14) отвечает, что он поддерживается.

МЕДИА ЗАКАЗ

Я создал еще один jsfiddle для экспериментов с MediaRecorder: https://jsfiddle.net/luiru72/b9q4nsdv/42/

Если вы попытаетесь создать MediaRecorder в Firefox, используя неправильный синтаксис «video / webm;codecs:vp9,opus» или «video / webm;codecs:notatall,opus», вы не получите ошибку, вы просто получите закодированное видео в 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 , not video / webm;codecs:vp8
при создании MediaRecorder следует проявлять особую осторожность: например, в Firefox поддерживается video / webm; codecs =vp8 поддерживается, но при создании MediaRecorder следует использовать "video / webm" или "video / webm; codecs =vp8". , опус
если вы укажете неверный синтаксис, например video / webm;codecs:vp9,opus в Firefox, вы не получите ошибку, вы просто получите файл, который закодирован в VP8,opus. Вы поймете, что он имеет формат, отличный от предполагаемого, если вы откроете его с помощью такой программы, как MediaInfo, которая может показать вам использованные кодеки.

user8092225 29 июл '19 в 06:45 2019-07-29 06:45 · Answer 9 · 2019-07-29 06:45

Сегодня я нашел решение, которое предполагает использование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, чтобы получить большой двоичный объект как dataUrl:

var reader = new FileReader();
reader.onload = function(event)
{
    var blobDataUrl = event.target.result;
}
reader.readAsDataURL(blob);`

Затем я сохраняю blobDataUrl как файл webm, и видео, записанные в Chrome, нормально работают в Firefox, и наоборот.