From 90d04c734ee467206ea95861042f11c86c734c9c Mon Sep 17 00:00:00 2001
From: Raj Tiwari <rajtiwariee@gmail.com>
Date: Sat, 11 Apr 2026 13:07:07 +0530
Subject: [PATCH] fix(video): prioritize h264 codec and fix pixi render blur

---
 src/components/video-editor/VideoPlayback.tsx | 9 ++++++++-
 src/hooks/useScreenRecorder.ts                | 8 ++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index acc3f2e..f52c766 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -809,7 +809,6 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			blurFilter.resolution = app.renderer.resolution;
 			blurFilter.blur = 0;
 			const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
-			videoContainer.filters = [blurFilter, motionBlurFilter];
 			blurFilterRef.current = blurFilter;
 			motionBlurFilterRef.current = motionBlurFilter;
 
@@ -1081,6 +1080,14 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					motionIntensity,
 					motionVector,
 				);
+
+				const isMotionBlurActive = (motionBlurAmountRef.current || 0) > 0 && isPlayingRef.current;
+
+				if (isMotionBlurActive && blurFilterRef.current && motionBlurFilterRef.current && videoContainerRef.current) {
+					videoContainerRef.current.filters = [blurFilterRef.current, motionBlurFilterRef.current];
+				} else if (videoContainerRef.current) {
+					videoContainerRef.current.filters = null;
+				}
 			};
 
 			app.ticker.add(ticker);
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 2b07e24..2c21aac 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -118,11 +118,15 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	}, []);
 
 	const selectMimeType = () => {
+		// H.264 first: hardware-accelerated on all modern devices, gives sharp
+		// real-time output. AV1/VP9 are great for distribution but too
+		// CPU-intensive for live 60 fps capture — they produce blurry frames
+		// when the software encoder can't keep up.
 		const preferred = [
-			"video/webm;codecs=av1",
 			"video/webm;codecs=h264",
-			"video/webm;codecs=vp9",
 			"video/webm;codecs=vp8",
+			"video/webm;codecs=vp9",
+			"video/webm;codecs=av1",
 			"video/webm",
 		];