Function convertVideoToGif

apps/web/components/tools/MediaFormatConverter.tsx:424–583

(inputFile: File)

	};

	const convertVideoToGif = async (inputFile: File): Promise<void> => {
		try {
			const parser = await import("@remotion/media-parser");
			const _webcodecs = await import("@remotion/webcodecs");

			const _onProgress = ({
				overallProgress,
			}: {
				overallProgress: number | null;
			}) => {
				if (overallProgress !== null) {
					setProgress(Math.min(Math.round(overallProgress * 100), 99));
				}
			};

			const controller = parser.mediaParserController
				? parser.mediaParserController()
				: null;
			parserControllerRef.current = controller;

			console.log(`Starting video to GIF conversion`);
			console.log(
				`Input file: ${inputFile.name}, size: ${inputFile.size} bytes`,
			);

			const isCanvasSupported = !!document
				.createElement("canvas")
				.getContext("2d");
			if (!isCanvasSupported) {
				throw new Error(
					"Your browser doesn't support canvas operations required for GIF conversion",
				);
			}

			const metadata = await parser.parseMedia({
				src: inputFile,
				fields: {
					durationInSeconds: true,
					dimensions: true,
					videoCodec: true,
				},
			});

			console.log("Video metadata for GIF conversion:", metadata);

			const originalWidth = metadata.dimensions?.width || 1920;
			const originalHeight = metadata.dimensions?.height || 1080;
			const maxWidth = gifMaxWidth;
			const scale = originalWidth > maxWidth ? maxWidth / originalWidth : 1;
			const targetWidth = Math.floor(originalWidth * scale);
			const targetHeight = Math.floor(originalHeight * scale);

			const GifModule = await import("gif.js");
			const GIF = GifModule.default;

			const videoElement = document.createElement("video");
			videoElement.muted = true;
			videoElement.playsInline = true;