import React, { useState, useEffect, useRef } from “react”;
import Hls from “hls.js”;
import { createFFmpeg, fetchFile } from “@ffmpeg/ffmpeg”;
const VideoTrimmer = () => {
const [video, setVideo] = useState(null);
const [ffmpeg, setFfmpeg] = useState(null);
const [isReady, setIsReady] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [progress, setProgress] = useState(0);
const [startTime, setStartTime] = useState(0);
const [endTime, setEndTime] = useState(0);
const [downloadLink, setDownloadLink] = useState(“”);
const [duration, setDuration] = useState(0);
const [videoChunks, setVideoChunks] = useState();
const videoRef = useRef(null);
const hlsUrl = “https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8”;
// Initialize FFmpeg and HLS
useEffect(() => {
const initializeFFmpeg = async () => {
const ffmpegInstance = createFFmpeg({
log: true,
progress: ({ ratio }) => {
setProgress(Math.round(ratio * 100));
},
});
try {
await ffmpegInstance.load();
setFfmpeg(ffmpegInstance);
setIsReady(true);
} catch (error) {
console.error(“Failed to load FFmpeg:”, error);
}
};
initializeFFmpeg();
setupHls();
}, );
const setupHls = () => {
if (Hls.isSupported()) {
const hls = new Hls({
xhrSetup: function (xhr) {
xhr.responseType = “arraybuffer”;
},
});
hls.on(Hls.Events.MEDIA_ATTACHED, () => {
console.log(“HLS media attached”);
});
hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
console.log(
“Manifest parsed, found " + data.levels.length + " quality levels”
);
videoRef.current.play();
});
hls.on(Hls.Events.FRAG_LOADED, (event, data) => {
const fragment = data.frag;
const payload = data.payload;
// Store video chunks for later processing
setVideoChunks((prev) => [
…prev,
{
sequence: fragment.sn,
startTime: fragment.start,
duration: fragment.duration,
data: new Uint8Array(payload.byteLength),
},
]);
// Copy payload data to our chunk object
new Uint8Array(payload).forEach((byte, i) => {
videoChunks[videoChunks.length - 1].data[i] = byte;
});
});
hls.loadSource(hlsUrl);
hls.attachMedia(videoRef.current);
setVideo(hls);
} else if (videoRef.current.canPlayType(“application/vnd.apple.mpegurl”)) {
// For Safari browsers
videoRef.current.src = hlsUrl;
}
};
const handleLoadedMetadata = () => {
setDuration(videoRef.current.duration);
setEndTime(videoRef.current.duration);
};
const handleTrim = async () => {
if (!isReady || !ffmpeg) {
alert(“FFmpeg is not ready yet”);
return;
}
setIsLoading(true);
setProgress(0);
try {
// We need to download the HLS segments that cover our trim range
const relevantChunks = videoChunks.filter(
(chunk) =>
(chunk.startTime >= startTime && chunk.startTime <= endTime) ||
(chunk.startTime + chunk.duration >= startTime &&
chunk.startTime + chunk.duration <= endTime)
);
if (relevantChunks.length === 0) {
alert(“No video data available for the selected range”);
setIsLoading(false);
return;
}
// Combine chunks into a temporary video file
const tempFileName = “temp_video.mp4”;
ffmpeg.FS(
“writeFile”,
tempFileName,
await fetchFile(new Blob(relevantChunks.map((chunk) => chunk.data)))
);
// Trim the video using FFmpeg
await ffmpeg.run(
“-i”,
tempFileName,
“-ss”,
startTime.toString(),
“-to”,
endTime.toString(),
“-c:v”,
“copy”,
“-c:a”,
“copy”,
“output.mp4”
);
// Read the output file
const data = ffmpeg.FS(“readFile”, “output.mp4”);
// Create a download link
const url = URL.createObjectURL(
new Blob([data.buffer], { type: “video/mp4” })
);
setDownloadLink(url);
// Clean up
ffmpeg.FS(“unlink”, tempFileName);
ffmpeg.FS(“unlink”, “output.mp4”);
} catch (error) {
console.error(“Error during trimming:”, error);
alert(“Error during video trimming”);
}
setIsLoading(false);
};
const updateVideoPosition = (time) => {
if (videoRef.current) {
videoRef.current.currentTime = time;
}
};
return (
HLS Video Trimmer
Start Time: {startTime.toFixed(2)}s
End Time: {endTime.toFixed(2)}s
<input
type=“range”
min=“0”
max={duration}
step=“0.1”
value={startTime}
onChange={(e) => {
const value = parseFloat(e.target.value);
if (value < endTime) {
setStartTime(value);
updateVideoPosition(value);
}
}}
className=“w-full”
/>
<input
type=“range”
min=“0”
max={duration}
step=“0.1”
value={endTime}
onChange={(e) => {
const value = parseFloat(e.target.value);
if (value > startTime) {
setEndTime(value);
updateVideoPosition(value);
}
}}
className=“w-full”
/>
<button
onClick={() => updateVideoPosition(startTime)}
className=“px-4 py-2 bg-blue-500 text-white rounded”
disabled={isLoading}
>
Preview Start
<button
onClick={() => updateVideoPosition(endTime)}
className=“px-4 py-2 bg-blue-500 text-white rounded”
disabled={isLoading}
>
Preview End
<button
onClick={handleTrim}
className=“px-4 py-2 bg-green-500 text-white rounded”
disabled={isLoading || !isReady}
>
{isLoading ?
Processing (${progress}%) : “Trim Video”}{downloadLink && (
)}
{!isReady &&
Loading FFmpeg…
});
};
export default VideoTrimmer;
getting this message error
[fferr] [mov,mp4,m4a,3gp,3g2,mj2 @ 0x1a65940] Format mov,mp4,m4a,3gp,3g2,mj2 detected only with low score of 1, misdetection possible!
bf288058-73f8-4a6a-a608-ffabac80179d:49 [fferr] [mov,mp4,m4a,3gp,3g2,mj2 @ 0x1a65940] moov atom not found
bf288058-73f8-4a6a-a608-ffabac80179d:49 [fferr] temp_video.mp4: Invalid data found when processing input
bf288058-73f8-4a6a-a608-ffabac80179d:49 [ffout] FFMPEG_END
videotrimmer.js:125 [info] run FS.readFile output.mp4