ffmpegwasm / ffmpeg.wasm

FFmpeg for browser, powered by WebAssembly
https://ffmpegwasm.netlify.app
MIT License
14.01k stars 816 forks source link

ffmpeg.FS('readFile', 'output.mp4') error. Check if the path exists #513

Open dalpat49 opened 1 year ago

dalpat49 commented 1 year ago

import React, { useRef } from 'react'; import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg/dist/ffmpeg.min.js';

const VideoTextEditor = () => { const videoFileRef = useRef(null); const fontFileRef = useRef(null);

const addTextAtTime = async (videoFile, fontFile, outputPath, text, timeInSeconds) => { const ffmpegInstance = createFFmpeg({ log: true }); await ffmpegInstance.load(); return new Promise(async(resolve, reject) => { ffmpegInstance.FS('writeFile', 'input.mp4', new Uint8Array(videoFile, 0, videoFile.byteLength)); ffmpegInstance.FS('writeFile', 'font.ttf', new Uint8Array(fontFile, 0, fontFile.byteLength));

  ffmpegInstance.run(
    '-i', 'input.mp4',
    '-vf', `drawtext=fontfile=font.ttf:text='${text}':fontsize=24:fontcolor=white:x=(w-text_w)/2:y=(h-text_h)/2:enable='between(t,${timeInSeconds},${timeInSeconds + 1})'`,
    'output.mp4'
  )
    .then(() => {  
      const outputFileName = 'output.mp4';
      // ffmpegInstance.FS('mkdir', '/input');
      const data = ffmpegInstance.FS('readFile', outputFileName);
      const outputUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
      console.log(outputUrl);

      resolve(outputUrl);
    })
    .catch((error) => {
      reject(error);
    });
});

};

const handleAddText = () => { const videoFile = videoFileRef.current.files[0]; const fontFile = fontFileRef.current.files[0];

if (!videoFile || !fontFile) {
  console.error('Please select a video file and a font file.');
  return;
}

const videoPath = URL.createObjectURL(videoFile);
const outputPath = '/path/to/output/video.mp4';
const text = 'Your text here';
const timeInSeconds = 10; // Add text at 10 seconds mark

addTextAtTime(videoFile, fontFile, outputPath, text, timeInSeconds)
  .then((outputUrl) => {
    console.log('Text added successfully at the specified time.');
    // Use the outputUrl as needed (e.g., display the video in a <video> element)
  })
  .catch((error) => {
    console.error('Error adding text:', error);
  });

};

return (

); };

export default VideoTextEditor;

this is my code in react and i am getting the above error again and again in ffmpeg. whyyy???? any help....

jessis99 commented 1 year ago

hi, have you been able to solve the problem yet? i have the same problem, but i write the code in angular and not in react.