React中用FFmpeg转音频为视频后文件仅9字节且报FS错误

在React项目中使用FFmpeg将音频转换为视频并上传至Firebase Storage，转换后的视频成功保存至存储桶，但文件大小仅9字节，同时出现ErrnoError: FS error。已确认使用新版FFmpeg语法，但问题仍存在。

工具代码： #

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { storage } from '../firebase'; 

export async function generateAndStoreVideo(audioPath, imagePath, userId) {
  try {
    const ffmpeg = new FFmpeg({ log: true });
    await ffmpeg.load();

    console.log('Fetching audio and image...');
    ffmpeg.writeFile( 'input.mp3', await fetchFile(audioPath));
    ffmpeg.writeFile('input.jpg', await fetchFile(imagePath));
    
    console.log('Running FFmpeg...');
    await ffmpeg.exec(['-i', 'sound.mp3', '-i', 'image.png', 'output.mp4']
    );

    console.log('FFmpeg completed!');
    
    const data = ffmpeg.readFile( 'output.mp4');
    const videoBlob = new Blob([data.buffer], { type: 'video/mp4' });

    console.log('Uploading video to Firebase...');
    const videoRef = ref(storage, `videos/${userId}/${Date.now()}_generated_video.mp4`);
    const uploadSnapshot = await uploadBytes(videoRef, videoBlob);

    const videoURL = await getDownloadURL(uploadSnapshot.ref);

    console.log('Video uploaded successfully! URL:', videoURL);

    return videoURL;
  } catch (error) {
    console.error('Error generating or uploading video:', error);
    throw new Error('Video generation or upload failed.');
  }
}

错误信息： #

ErrnoError: FS error
    at handleError (http://localhost:3000/static/js/bundle.js:98427:58)
    at http://localhost:3000/static/js/bundle.js:98450:7

问题修复： #

• 文件名不匹配：代码中写入的文件是input.mp3和input.jpg，但FFmpeg命令里引用的是sound.mp3和image.png，导致FFmpeg找不到输入文件，生成了空的output.mp4（9字节）。需将命令中的文件名改为与写入的一致。
• 异步操作未等待：ffmpeg.writeFile是异步方法，必须添加await，否则可能文件还未写入完成就执行转换命令，引发文件读取错误。
• readFile未异步等待：ffmpeg.readFile同样是异步操作，需添加await才能获取到正确的文件数据，否则生成的Blob内容为空。

修复后的完整代码： #

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';
import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
import { storage } from '../firebase'; 

export async function generateAndStoreVideo(audioPath, imagePath, userId) {
  try {
    const ffmpeg = new FFmpeg({ log: true });
    await ffmpeg.load();

    console.log('Fetching audio and image...');
    // 等待文件写入完成
    await ffmpeg.writeFile('input.mp3', await fetchFile(audioPath));
    await ffmpeg.writeFile('input.jpg', await fetchFile(imagePath));
    
    console.log('Running FFmpeg...');
    // 使用正确的输入文件名
    await ffmpeg.exec(['-i', 'input.mp3', '-i', 'input.jpg', 'output.mp4']);

    console.log('FFmpeg completed!');
    
    // 等待读取文件完成
    const data = await ffmpeg.readFile('output.mp4');
    const videoBlob = new Blob([data.buffer], { type: 'video/mp4' });

    console.log('Uploading video to Firebase...');
    const videoRef = ref(storage, `videos/${userId}/${Date.now()}_generated_video.mp4`);
    const uploadSnapshot = await uploadBytes(videoRef, videoBlob);

    const videoURL = await getDownloadURL(uploadSnapshot.ref);

    console.log('Video uploaded successfully! URL:', videoURL);

    return videoURL;
  } catch (error) {
    console.error('Error generating or uploading video:', error);
    throw new Error('Video generation or upload failed.');
  }
}

内容的提问来源于stack exchange，提问作者Yuri