如何使用Javascript将MPEG音频和视频合并到MP4中？

Question

我正在尝试将音频与视频结合起来，并将最终文件下载为视频。我怎样才能做到这一点 ？我尝试了以下方法并抛出错误

async function mergeVideo(video, audio) {
    let { createFFmpeg, fetchFile } = FFmpeg;
    let ffmpeg = createFFmpeg();
    await ffmpeg.load();
    ffmpeg.FS('writeFile', 'video.mp4', await fetchFile(video));
    ffmpeg.FS('writeFile', 'audio.mp4', await fetchFile(audio));
    await ffmpeg.run('-i', 'video.mp4', '-i', 'audio.mp4', '-c', 'copy', 'output.mp4');
    let data = await ffmpeg.FS('readFile', 'output.mp4');
    return new Uint8Array(data.buffer);
};

(()=>{
  mergeVideo("video here","audio here");
})();

<script src='https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js'></script>

Answer 1

所以我有点好奇，决定检查一下你的错误。事实证明，您的错误与使用

SharedArrayBuffer

对象的浏览器安全限制有关。这是因为 FFmpeg 使用

SharedArrayBuffer

进行其内部操作。因此，为了解决这个问题，您可能需要以某种方式在主线程和 FFmpeg.js 使用的 Web Worker 之间交换数据。

我不太熟悉 FFmpeg，而且它很快就会变得非常复杂。另一种解决方案是使用在线平台。我主要使用 Cloudinary 只是因为它可以轻松地进行视频操作。

const cloudinary = require('cloudinary').v2; // Make sure to require the Cloudinary library and configure it with your API credentials


cloudinary.config({
  cloud_name: "cloud_name",
  api_key: "api_key",
  api_secret: "api_secret"
});


audio = cloudinary.uploader.upload("sea-turtle.mp4", { resource_type: "video", public_id: "sample_video_file"});


video = cloudinary.uploader.upload("audio.mp3", { resource_type: "auto", public_id: "sample_audio"});


result = cloudinary.video("sample_video_file", {transformation: [
  {overlay: "audio:sample_audio"},
  {flags: "layer_apply"}
  ]})
console.log(result)

在这里，我只是定义我自己的 Cloudinary 凭据，然后将我的视频和音频文件上传到云端。然后我只需在转换参数中将音频叠加添加到视频中。如果您想使用此功能，只需将

sample_video_file

替换为您的视频的公共 ID，将

sample_audio

替换为您的音频。请记住将

"audio:..."

保留在您的覆盖参数中，否则它将无法工作。

希望这有帮助！