fix(desktop): NV12 stride alignment for correct YUV rendering

Author: richiemcilroy

apps/desktop/src-tauri/src/frame_ws.rs

@@ -30,10 +30,10 @@ fn pack_nv12_frame_ref(
     data: &[u8],
     width: u32,
     height: u32,
+    y_stride: u32,
     frame_number: u32,
     target_time_ns: u64,
 ) -> Vec<u8> {
-    let y_stride = width;
     let metadata_size = 28;
     let mut output = Vec::with_capacity(data.len() + metadata_size);
     output.extend_from_slice(data);
@@ -90,6 +90,7 @@ fn pack_ws_frame_ref(frame: &WSFrame) -> Vec<u8> {
             &frame.data,
             frame.width,
             frame.height,
+            frame.stride,
             frame.frame_number,
             frame.target_time_ns,
         ),

apps/desktop/src/routes/editor/context.ts

@@ -80,7 +80,7 @@ export const getPreviewResolution = (
 	quality: EditorPreviewQuality,
 ): XY<number> => {
 	const scale = previewQualityScale[quality];
-	const width = (Math.max(2, Math.round(OUTPUT_SIZE.x * scale)) + 1) & ~1;
+	const width = (Math.max(4, Math.round(OUTPUT_SIZE.x * scale)) + 3) & ~3;
 	const height = (Math.max(2, Math.round(OUTPUT_SIZE.y * scale)) + 1) & ~1;
 
 	return { x: width, y: height };

apps/desktop/src/routes/screenshot-editor/context.tsx

@@ -38,7 +38,7 @@ function convertNv12ToRgba(
 	const ySize = yStride * height;
 	const yPlane = nv12Data;
 	const uvPlane = nv12Data.subarray(ySize);
-	const uvStride = width;
+	const uvStride = yStride;
 
 	for (let row = 0; row < height; row++) {
 		const yRowOffset = row * yStride;
@@ -285,7 +285,7 @@ function createScreenshotEditorContext() {
 				if (!width || !height) return;
 
 				const ySize = yStride * height;
-				const uvSize = width * (height / 2);
+				const uvSize = yStride * (height / 2);
 				const totalSize = ySize + uvSize;
 
 				const nv12Data = new Uint8ClampedArray(buffer, 0, totalSize);

apps/desktop/src/utils/frame-worker.ts

@@ -231,7 +231,7 @@ function parseFrameMetadata(bytes: Uint8Array): FrameMetadata | null {
 			if (!width || !height) return null;
 
 			const ySize = yStride * height;
-			const uvSize = width * (height / 2);
+			const uvSize = yStride * (height / 2);
 			const totalSize = ySize + uvSize;
 
 			if (bytes.byteLength - 28 < totalSize) {
@@ -303,7 +303,7 @@ function convertNv12ToRgba(
 	const ySize = yStride * height;
 	const yPlane = nv12Data;
 	const uvPlane = nv12Data.subarray(ySize);
-	const uvStride = width;
+	const uvStride = yStride;
 
 	for (let row = 0; row < height; row++) {
 		const yRowOffset = row * yStride;

apps/desktop/src/utils/socket.ts

@@ -62,7 +62,7 @@ function convertNv12ToRgbaMainThread(
 	const ySize = yStride * height;
 	const yPlane = nv12Data;
 	const uvPlane = nv12Data.subarray(ySize);
-	const uvStride = width;
+	const uvStride = yStride;
 
 	for (let row = 0; row < height; row++) {
 		const yRowOffset = row * yStride;
@@ -308,7 +308,7 @@ export function createImageDataWS(
 
 		if (width > 0 && height > 0) {
 			const ySize = yStride * height;
-			const uvSize = width * (height / 2);
+			const uvSize = yStride * (height / 2);
 			const totalSize = ySize + uvSize;
 
 			const frameData = new Uint8ClampedArray(buffer, 0, totalSize);
@@ -351,7 +351,7 @@ export function createImageDataWS(
 
 		if (width > 0 && height > 0) {
 			const ySize = yStride * height;
-			const uvSize = width * (height / 2);
+			const uvSize = yStride * (height / 2);
 			const totalSize = ySize + uvSize;
 
 			const frameData = new Uint8ClampedArray(buffer, 0, totalSize);
@@ -669,7 +669,7 @@ export function createImageDataWS(
 
 				if (width > 0 && height > 0) {
 					const ySize = yStride * height;
-					const uvSize = width * (height / 2);
+					const uvSize = yStride * (height / 2);
 					const totalSize = ySize + uvSize;
 
 					const frameData = new Uint8ClampedArray(buffer, 0, totalSize);
@@ -735,7 +735,7 @@ export function createImageDataWS(
 
 				if (width > 0 && height > 0) {
 					const ySize = yStride * height;
-					const uvSize = width * (height / 2);
+					const uvSize = yStride * (height / 2);
 					const totalSize = ySize + uvSize;
 
 					const nv12Data = new Uint8ClampedArray(buffer, 0, totalSize);

apps/desktop/src/utils/webgpu-renderer.ts

@@ -380,7 +380,7 @@ export function renderNv12FrameWebGPU(
 	const ySize = yStride * height;
 	const uvWidth = width / 2;
 	const uvHeight = height / 2;
-	const uvStride = width;
+	const uvStride = yStride;
 	const uvSize = uvStride * uvHeight;
 
 	if (data.byteLength < ySize + uvSize) {