Input and Supported Formats
This tool accepts a single video file of up to 30 MiB as input. Relying on standard decoding in local browser environments, it supports only MIME types video/mp4 and video/webm (or .mp4 and .webm extensions), rejecting other formats or oversized files.
When a valid file is selected, an Object URL is assigned to an HTML5 <video> element to read and decode data entirely in the browser context.
When metadata loads, handleMetadataLoaded checks for positive finite values for playback duration and usable dimensions (videoWidth, videoHeight), while the built-in 2-second sample generator provides a known duration fallback if metadata duration is initially non-finite.
The built-in testing generator dynamically records a 160 px by 90 px Canvas displaying a moving rectangle into a WebM video using MediaRecorder, allowing verification without preparing external media.
However, browser decoding variations mean exact frame accuracy cannot be guaranteed across all formats.
Setting Start and End Positions
Once video metadata loads and duration is established, users can set clip start and end boundaries using slider components in 0.1-second increments.
Handlers verify that the selected start time does not exceed the end time, that timestamps remain within the source bounds, and that the interval satisfies 0 < duration <= 30 seconds.
Displayed positions are formatted via formatTime as minutes:seconds with a single decimal place for tenths of a second (such as 1:23.4), rather than milliseconds.
Adjusting timestamps in 0.1-second steps does not guarantee exact matching with source keyframes. During extraction, createVideoFrameTimes spaces timestamps across the interval based on the chosen FPS, and seekVideoFrame updates currentTime, waiting up to 10 seconds for seeked or loadeddata events while checking readyState >= 2 (HAVE_CURRENT_DATA) and a 0.001-second tolerance before drawing.
Width, FPS, and Processing Limits
Canvas rendering and frame manipulation demand substantial browser CPU and memory resources. Before starting conversion, validateMediaExport validates input parameters using Number.isFinite and Number.isInteger to enforce execution bounds.
Output width must stay between 100 and 640 pixels, with height scaled to preserve aspect ratio, capped at 1,000,000 pixels per frame.
Selectable FPS options are 5, 10, 15, or 24, and extraction duration cannot exceed 30 seconds. For GIF output, total frames are capped at 300, and cumulative pixels (width x height x frames) cannot exceed 50,000,000 pixels.
While rejecting parameters outside these limits helps mitigate workload before encoding begins, upfront checks cannot completely prevent browser tab crashes, interface freezes, or out-of-memory errors on constrained devices.
GIF Frames and Color Reduction
For GIF animation export, this tool uses the gifenc library to encode frames. After preparing a Canvas with willReadFrequently: true at validated dimensions, seekVideoFrame repositions the video to capture frames via ctx.drawImage and ctx.getImageData.
Because GIF supports up to 256 indexed colors per frame, quantize generates a reduced palette for each frame, and applyPalette remaps RGBA pixel data to palette indices.
The resulting indexed frame is written with writeFrame using infinite looping (repeat: 0). Because GIF frame delays round to hundredths of a second (10 ms units), playback timing can deviate from the chosen FPS, and seeking may not align identically with source frames.
Color shifts can also appear between frames. Processing yields via setTimeout every 4 frames, though interface lag remains possible.
The exported GIF contains no audio.
Real-Time, Silent WebM
WebM output records real-time playback rendered onto a Canvas rather than extracting still frames. It verifies MediaRecorder MIME types in order of preference: video/webm;codecs=vp9, video/webm;codecs=vp8, and base video/webm, with no MP4 export support.
During recording, the video element is muted and played at 1x speed while recordCanvasVideo captures the Canvas stream via captureStream and requests a video bitrate of 5,000,000 bps.
A recursive setTimeout loop measures elapsed time and draws frames with ctx.drawImage until the target duration elapses, at which point the recorder stops and outputs a WebM Blob.
Configured FPS and 5,000,000 bps parameters represent recording requests rather than guaranteed output metrics; system load and timer throttling can cause frame drops or timing variations.
Output WebM video requires waiting for full playback duration, does not guarantee preservation of source metadata, and contains no audio.
Saving, Reselection, and Environment Differences
When encoding finishes, binary data is assembled into a Blob and assigned an Object URL for preview and downloading as trimmed_animation.gif or trimmed_video.webm.
File size is formatted in MiB if above 1024 x 1024 bytes or KiB if below. Previous Object URLs are released via revokeObjectURL when selecting new files, clicking Clear, or unmounting the component.
An integer generation counter and AbortController track task validity; if the generation changes during asynchronous waits, pending UI updates from older runs are discarded.
While these mechanisms invalidate stale results and signal cancellation, they cannot guarantee immediate termination of in-flight seek operations or completely eliminate browser race conditions and memory leaks.
Performance and format compatibility depend on browser and OS capabilities.