Firefox не воспроизводит видео, записанное в Chrome

Question

У меня есть видео, которое было записано в Chrome с использованием этого плагина реакции: rico345100 / реагировать-мультимедиа-захвата. Это видео загружено на сервер.

Видео воспроизводится нормально в Chrome. Однако это же видео не открывается в Firefox. И наоборот, видео, записанное в Firefox, прекрасно воспроизводится как в Chrome, так и в Firefox.

                      |  Works in Firefox |  Works in Chrome |
----------------------+-------------------+------------------+
  Recorded in Firefox |         Y         |         Y        |
----------------------+-------------------+------------------+
   Recorded in Chrome |         N         |         Y        |

Как мы можем решить эту проблему?

Answer 1

Проблема в том, что Chrome (вероятно, кодирует запись как h246 несмотря на то, что вы используете библиотеку с просьбой кодировать его как vp8, Вы можете увидеть в библиотеке, которая спрашивает специально для проверки vp8 Поддержка в этой строке здесь:

реакция-мультимедиа-захват, линия 101

let types = ['video/webm;codecs=vp8', 'video/webm', ''];

Библиотека также просит пользовательский агент для кодирования video/webm в этой строке здесь:

реакция-мультимедиа-захват, линия 177

let blob = new Blob(this.mediaChunk, { type: 'video/webm' });

Тем не менее, кажется, что пользовательский агент может свободно кодировать, используя любой кодек, который ему нужен, когда он создает Blob,

Я создал игрушечный проект, чтобы имитировать, что делает библиотека и пытается диктовать кодек при создании Blob не похоже на эффект. Вот ffprobe выходные данные каждого сохраненного файла для каждого пользовательского агента:

Хром

Input #0, matroska,webm, from 'recording.chrome.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    Stream #0:1(eng): Video: h264 (Baseline), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 16.67 fps, 16.67 tbr, 1k tbn, 2k tbc (default)

Fire Fox

Input #0, matroska,webm, from 'recording.firefox.webm':
  Metadata:
    encoder         : QTmuxingAppLibWebM-0.0.1
  Duration: N/A, start: -0.001000, bitrate: N/A
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1280x720, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
    Stream #0:1(eng): Audio: opus, 48000 Hz, mono, fltp (default)

Учитывая это, лучше всего не полагаться на то, что ваш браузер закодирует запись в формате, который может воспроизводиться всеми браузерами. Вы можете либо перекодировать ваши видео в формат, который может использоваться более широким кругом пользовательских агентов, либо попросить пользователей загрузить свои видео на ваш сервер, где вы можете перекодировать их, а затем условно обработать контент, используя <source> теги.

Вы также должны прочитать эту статью MDN о поддерживаемых типах файлов: медиа-форматы для аудио и видео HTML.