Почему мои видео, созданные в JS, не воспроизводятся в Firefox? - PullRequest
Новая
       107

Почему мои видео, созданные в JS, не воспроизводятся в Firefox?

0 голосов
/ 11 сентября 2018

У меня есть веб-расширение для устройства записи экрана, которое генерирует записанное видео в качестве загрузки. В Chrome все хорошо, но ни одно из сгенерированных видео не воспроизводится в Firefox.

Я пробовал оба .webm (через кодек VP9) и .mp4 (через H264). Соответствующий код: 

recorder.addEventListener('stop', evt => {
    blob = new Blob(recorder.chunks, {'type': 'video/webm; codecs=vp9'});
    blob_url = window.URL.createObjectURL(blob);
    //...

Также пробовал 

{'type': 'video/mp4; codecs=H264'}

В Firefox я просто вижу:

enter image description here

Что я делаю не так?

[EDIT]

После полезного ответа @ epistemex я сейчас указываю webm в момент создания MediaRecorder, а не кодек. 

MediaRecorder(master_stream, {mimeType: 'video/webm'});

Потом позже 

blob = new Blob(recorder.chunks); //<-- not setting mime here now

... но Firefox по-прежнему говорит, что не может воспроизводить результирующие файлы, даже если 

MediaRecorder.isTypeSupported("video/webm") //true

[РЕДАКТИРОВАТЬ 2 - включая больше кода] 

    if (rec_prefs.rec_vid == 'screen') listen_for_stop_screen_sharing();
    recorder = new MediaRecorder(master_stream, {mimeType: 'video/webm'});
    recorder.start();
    recorder.chunks = [];
    recorder.addEventListener('dataavailable', evt => {
        recorder.chunks.push(evt.data);
    }, false);
    rec_stopped_dfd = new Promise((resolve) => {
        recorder.addEventListener('stop', evt => {
            blob = new Blob(recorder.chunks);
            blob_url = window.URL.createObjectURL(blob);
            resolve();
        }, false);
    });

Вызов recorder.stop() находится в режиме обратного вызова в ответ на нажатие кнопки: 

function stop_recording() {
    master_stream.getTracks().forEach(track => track.stop());
    if (recorder && recorder.state != 'inactive') {
        recorder.stop();

Да, я могу подтвердить, что массив не пустой. Все отлично работает в Chrome - без ошибок, консоли и т. Д.

1 Ответ

0 голосов
/ 12 сентября 2018

Firefox не поддерживает аудио / webm с использованием кодека vp9, а также контейнеры MP4, где данные кодируются с использованием H.264 (это может быть связано с лицензионными / юридическими аспектами).

Вы можете протестировать поддержку, используяMediaRecorder.isTypeSupported() для проверки поддержки: 

console.log("video/webm: ", MediaRecorder.isTypeSupported("video/webm"))
console.log("video/webm; codecs=vp9: ", MediaRecorder.isTypeSupported("video/webm; codecs=vp9"))
console.log("video/mp4; codecs=H264: ", MediaRecorder.isTypeSupported("video/mp4; codecs=H264"))

Еще одна вещь, о которой вам нужно знать, это то, что установка типа mime для Blob не влияет на данные . в любой форме - это просто метаданные.Вы должны указать mime-тип в объекте option для MediaRecorder (вы не показываете эту часть в вопросе, поэтому вы можете сделать это уже, но на всякий случай, если нет): 

const mediaRecorder = new MediaRecorder(stream, {
    mimeType: "video/webm"
  });

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

const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm";  // here: assumed support (todo)

const mediaRecorder = new MediaRecorder(stream, {
    mimeType: mime
  });

Надеюсь, это поможет!

...