I am trying to implement a video editor using ffmpeg-wasm in CRA react app.
Package dependencies :
"@ffmpeg/ffmpeg": "^0.12.10",
"@ffmpeg/util": "^0.12.1",
Below is a sample class that I am trying to implement:
import React, {useRef, useState} from 'react';
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { toBlobURL, fetchFile } from "@ffmpeg/util";
function Trimmer() {
const [loaded, setLoaded] = useState(false);
const ffmpegRef = useRef(new FFmpeg());
const videoRef = useRef<HTMLVideoElement | null>(null)
const messageRef = useRef<HTMLParagraphElement | null>(null)
const load = async () => {
const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm";
const ffmpeg = ffmpegRef.current;
ffmpeg.on("log", ({ message }) => {
if (messageRef.current) messageRef.current.innerHTML = message;
});
// toBlobURL is used to bypass CORS issue, urls with the same
// domain can be used directly.
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
wasmURL: await toBlobURL(
`${baseURL}/ffmpeg-core.wasm`,
"application/wasm"
),
workerURL: await toBlobURL(
`${baseURL}/ffmpeg-core.worker.js`,
"text/javascript"
),
});
setLoaded(true);
};
const transcode = async () => {
const videoURL = "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi";
const ffmpeg = ffmpegRef.current;
await ffmpeg.writeFile("input.avi", await fetchFile(videoURL));
await ffmpeg.exec(["-i", "input.avi", "output.mp4"]);
const fileData = await ffmpeg.readFile('output.mp4');
const data = new Uint8Array(fileData);
if (videoRef.current) {
videoRef.current.src = URL.createObjectURL(
new Blob([data.buffer], { type: 'video/mp4' })
)
}
};
return loaded ? (
<>
<video ref={videoRef} controls></video>
<br />
<button onClick={transcode}>Transcode avi to mp4</button>
<p ref={messageRef}></p>
</>
) : (
<button onClick={load}>Load ffmpeg-core</button>
);
}
export default Trimmer;
I have installed the dependencies and when trying to start the application, it throws an error given below:
index.js:1 ./node_modules/@ffmpeg/ffmpeg/dist/umd/ffmpeg.js 55:4
Module parse failed: Unexpected character '#' (55:4)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| new Error("failed to import ffmpeg-core.js");
| class i {
> #e = null;
| #t = {};
| #s = {};
- React - 16.14.0
- NPM - 6.14.5
- Babel Loader - 8.1.0