如何在 Chrome 浏览器中从 MediaStream 制作 mp4

Question

MediaRecorder.isTypeSupported('video/mp4') 是 Chrome 中的 false。所以我找到了 MediaStreamRecorder https://github.com/streamproc/MediaStreamRecorder 然后我找到了

var recorder = new MediaStreamRecorder(stream, {
  mimeType: 'video/mp4',
});
// also
recorder.mimeType = 'video/mp4';

但是输出是 webm 正如我用 ffmpeg -i

检查的那样

Input #0, matroska,webm, from '/Users/otiai10/Downloads/example.mp4':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Video: vp8, yuv420p, 640x480, SAR 1:1 DAR 4:3, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)

该视频可以在 Chrome 中播放，但不能在 QuickTime Player 中播放。

Here 是此问题的更多详细信息和（不是！）工作示例。

据说muaz-khan/Ffmpeg.js可以将webm转mp4，但是文件大小很重要

是否有任何解决方法可以录制并保存为 mp4？

Answer 1

好吧，那是我的误会。

https://github.com/streamproc/MediaStreamRecorder

MediaStreamRecorder can record audio as WAV and video as either WebM or animated gif on Chrome

不可能有 mp4。

Answer 2

虽然无法在 mp4 中直接录制，但您可以将生成的 webm 文件传递给 webm-to-mp4 进行转换：

const webmToMp4 = require("webm-to-mp4")
 
const mp4 = webmToMp4(webm)

该模块可以编译为在浏览器中工作，因为它在后台使用 ffmpeg.js。

Answer 3

结帐ffmpeg.wasm

您可以通过以下方式安装它：

# Use npm
$ npm install @ffmpeg/ffmpeg @ffmpeg/core
# Use yarn
$ yarn add @ffmpeg/ffmpeg @ffmpeg/core

然后，您可以将 blob 转换为 mp4 文件。查看他们在我分享的 link 中提供的示例。

如何在 Chrome 浏览器中从 MediaStream 制作 mp4

How to make mp4 from MediaStream in Chrome browser

javascript

google-chrome

ffmpeg

mediarecorder