webRTC使用ffmpeg.js将webm转换为mp4 [英] webRTC convert webm to mp4 with ffmpeg.js

问题描述

我正在尝试使用ffmpeg.js将webM文件转换为mp4。
我正在从画布（覆盖有一些信息）录制视频并录制视频中的音频数据。

I am trying to convert webM files to mp4 with ffmpeg.js. I am recording a video from canvas(overlayer with some information) and recording the audio data from the video.

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

此代码按预期工作并返回一个网络视频

This code works as expected and returns a webm video

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

现在我想要一个mp4文件，并检查了 ffmpeg.js 来自muaz-khan。
示例只显示如何转换为mp4，当您有2个单个流（音频和视频）。但我有一个流附加的音轨。我可以将这样的流转换成mp4吗？如何做？

Now I want a mp4 file and checked the ffmpeg.js from muaz-khan. The examples just show how to convert to mp4 when you have 2 single streams (audio and video). But I have one stream with an additional audio track. Can I convert such a stream to mp4? How can that be done?

推荐答案

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

As per the provided code sample, your recorder stream is having only one audio & one video tracks.

如果您的输入文件同时具有Audio&视频，那么您需要为两个曲目指定输出编解码器 here 如下。

If your input file is having both Audio & Video, then you need to specify output codec for both tracks here as following.

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

不推荐在浏览器内部转换视频，因为它将消耗更多的CPU时间&记忆。而ffmpeg_asm.js很重。您可以使用POC：）

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）广泛应用于这些天。

What is your use case? webm(vp8/vp9) is widely using these days.

Chrome将支持以下mime类型：

Chrome will support following mime types:

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

所以你可以直接从chrome MediaRecorder获得mp4录音与以下hack

So you can get mp4 recording directly from chrome MediaRecorder with following hack

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！