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

问题描述

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

stream = new MediaStream();var videoElem = document.getElementById('video');var videoStream = videoElem.captureStream();stream.addTrack(videoStream.getAudioTracks()[0]);stream.addTrack(canvas.captureStream().getVideoTracks()[0]);var 选项 = {mimeType: 'video/webm'};记录的Blobs = [];mediaRecorder = new MediaRecorder(stream, options);mediaRecorder.onstop = handleStop;mediaRecorder.ondataavailable = handleDataAvailable;mediaRecorder.start(100);//收集 100ms 的数据函数handleDataAvailable(事件){if (event.data && event.data.size > 0) {RecordedBlobs.push(event.data);}}mediaRecorder.stop();

此代码按预期工作并返回 webm 视频

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

现在我想要一个 mp4 文件并检查了 ffmpeg.js 来自穆阿兹汗.这些示例仅展示了当您有 2 个单流(音频和视频)时如何转换为 mp4.但是我有一个带有附加音轨的流.我可以将这样的流转换为 mp4 吗?怎么做?

解决方案

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

如果您的输入文件同时包含 Audio &视频，那么你需要为两个轨道指定输出编解码器 此处如下.

worker.postMessage({类型:'命令'，参数: ['-i', 'audiovideo.webm','-c:v', 'mpeg4','-c:a', 'aac',//或 vorbis'-b:v', '6400k',//视频码率'-b:a', '4800k',//音频比特率'-严格'、'实验'、'audiovideo.mp4'],文件:[{数据:新的 Uint8Array(fileReaderData)，名称:'audiovideo.webm'}]});

<块引用>

不推荐在浏览器中转码视频，因为它会消耗更多的 CPU 时间 &记忆.ffmpeg_asm.js 很重.POC 可能没问题:)

您的用例是什么?webm(vp8/vp9) 这些天被广泛使用.

Chrome 将支持以下 MIME 类型:

"video/webm"视频/webm；编解码器=vp8"视频/webm；编解码器=vp9"视频/webm；编解码器=h264"视频/x-matroska；编解码器=avc1"

因此您可以通过以下 hack 直接从 chrome MediaRecorder 获取 mp4 录音

var options = {mimeType: 'video/webm;codecs=h264'};mediaRecorder = new MediaRecorder(stream, options);.....//在合并blob之前改变输出mimevar blob = new Blob(recordedBlobs, {type: 'video/mp4'});//并将您的文件命名为 video.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'});

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.

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

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 :)

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

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"

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屋！