ffmpegwasm / ffmpegwasm/ffmpeg.wasm

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

Open
#513 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
C
Stars
17.8k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

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 element)
})
.catch((error) => {
console.error('Error adding text:', error);
});
};

return (




Add Text

);
};

export default VideoTextEditor;

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.