webRTC конвертирует webm в mp4 с помощью ffmpeg.js

Я пытаюсь преобразовать файлы webM в mp4 с помощью ffmpeg.js. Я записываю видео с холста (наложение с некоторой информацией) и записываю аудиоданные из видео.

stream = new MediaStream();
var videoElem = document.getElementById('video');
var videoStream = videoElem.captureStream();
stream.addTrack(videoStream.getAudioTracks()[0]);
stream.addTrack(canvas.captureStream().getVideoTracks()[0]);
var options = {mimeType: 'video/webm'};
  recordedBlobs = [];
  mediaRecorder = new MediaRecorder(stream, options);
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(100); // collect 100ms of data

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}
mediaRecorder.stop();

Этот код работает должным образом и возвращает веб-видео.

var blob = new Blob(recordedBlobs, {type: 'video/webm'});

Теперь мне нужен файл mp4 и я проверил ffmpeg.js из муаз-хан. Примеры просто показывают, как преобразовать в mp4, когда у вас есть 2 отдельных потока (аудио и видео). Но у меня есть один поток с дополнительной звуковой дорожкой. Могу ли я конвертировать такой поток в mp4? Как это можно сделать?


person q-jack    schedule 06.06.2017    source источник


Ответы (1)


Согласно предоставленному образцу кода, ваш поток записывающего устройства имеет только одну аудио и одну видео дорожку.

Если ваш входной файл имеет как аудио, так и видео, вам необходимо указать выходной кодек для обоих треков здесь следующим образом.

worker.postMessage({
    type: 'command',
    arguments: [
       '-i', 'audiovideo.webm',
       '-c:v', 'mpeg4',
       '-c:a', 'aac', // or vorbis
       '-b:v', '6400k',  // video bitrate
       '-b:a', '4800k',  // audio bitrate
       '-strict', 'experimental', 'audiovideo.mp4'
     ],
    files: [
        {
            data: new Uint8Array(fileReaderData),
            name: 'audiovideo.webm'
        }
     ]
    });

Транскодирование видео в браузере не рекомендуется, так как оно потребляет больше времени процессора и памяти. И ffmpeg_asm.js тяжелый. Может быть хорошо для POC :)

Какой у вас вариант использования? webm (vp8 / vp9) широко используется в наши дни.

Chrome будет поддерживать следующие типы MIME:

"video/webm"
"video/webm;codecs=vp8"
"video/webm;codecs=vp9"
"video/webm;codecs=h264"
"video/x-matroska;codecs=avc1"

Таким образом, вы можете получить запись mp4 прямо из Chrome MediaRecorder с помощью следующего взлома

var options = {mimeType: 'video/webm;codecs=h264'}; 
mediaRecorder = new MediaRecorder(stream, options);
.....
//Before merging blobs change output mime 
var blob = new Blob(recordedBlobs, {type: 'video/mp4'});
// And name your file as video.mp4
person Ajay    schedule 06.06.2017
comment
это потрясающий хак. Теперь я экономлю много кода и могу избавиться от файла ffmpeg_asm.js. Большое тебе спасибо. - person q-jack; 07.06.2017
comment
@Ajay Таким образом, вы можете получить запись mp4 прямо из chrome MediaRecorder с помощью следующего хака $ ffmpeg -i file.mp3 output Input #0, matroska,webm, from 'file.mp3': Metadata: encoder : Chrome Duration: N/A, start: 0.000000, bitrate: N/A Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default) и $ ffprobe -v error -select_streams a:0 -show_entries stream=codec_name -of default=noprint_wrappers=1:nokey=1 file.mp3 output opus для использования подхода с вводом .wav файла. - person guest271314; 26.09.2017
comment
@Ajay, что вы имеете в виду, когда говорите напрямую о записи в mp4? Возможно, я допустил ошибку, но в моем тесте я получаю только исходное видео webm / h264, но с другим типом mime. Таким образом, видеоконтейнер не меняется. Таким образом, двоичные данные точно такие же после новой строки Blob (...), верно? Вот что я пробовал: jsfiddle.net/zqd8qf6e Разве здесь не цель, чтобы видеоконтейнер изменялся из webm в mp4 без ffmpeg.js? - person John Doe; 28.11.2017
comment
Размер BTW будет почти одинаковым в обоих форматах, не ожидайте, что это применит сжатие так же, как ffmpeg. - person Rishabh; 18.04.2018
comment
@John Doe То, что вы говорите, правильно. Взлом может изменить тип на видео / mp4. Это будет воспроизводиться в любом браузере, включая Safari и iOS. Но проблема здесь в том, что контейнер для видео по-прежнему будет WEBM. Это приводит к тому, что панель поиска не работает при воспроизведении видео в браузере. - person NME New Media Entertainment; 24.06.2020
comment
@NMENewMediaEntertainment, Итак, как решить проблему с полосой искателя? - person Jayna Tanawala; 15.12.2020