webRTC 使用 ffmpeg.js 将 webm 转换为 mp4

Question

我正在尝试使用 ffmpeg.js 将 webM 文件转换为 mp4。我正在录制来自 canvas 的视频（带有一些信息的叠加层）并录制视频中的音频数据。

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();

此代码按预期工作，returns webm 视频

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

现在我想要一个 mp4 文件并检查了来自 muaz-khan 的 ffmpeg.js。这些示例仅展示了当您有 2 个单流（音频和视频）时如何转换为 mp4。但是我有一个带有附加音轨的流。我可以将这样的流转换为 mp4 吗？怎么办？

Answer 1

根据提供的代码示例，您的录像机流只有一个音频轨道和一个视频轨道。

如果您的输入文件同时包含音频和视频，那么您需要为两个音轨指定输出编解码器 here，如下所示。

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'
        }
     ]
    });

Trans-coding the video inside browser is not recommend, as it will consume more CPU Time & Memory. And ffmpeg_asm.js is heavy. May be ok for 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"

因此您可以使用以下技巧直接从 chrome MediaRecorder 获取 mp4 录音

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

webRTC 使用 ffmpeg.js 将 webm 转换为 mp4

webRTC convert webm to mp4 with ffmpeg.js

ffmpeg

webrtc

mp4

mediarecorder

mediastream