Function renderRgbaFrameCanvas2D

apps/desktop/src/utils/socket.ts:688–764

(buffer: ArrayBuffer, receivedAt: number)

	}

	function renderRgbaFrameCanvas2D(buffer: ArrayBuffer, receivedAt: number) {
		if (!directCanvas || !directCtx) return;
		if (buffer.byteLength < 24) return;

		const metadataOffset = buffer.byteLength - 24;
		const meta = new DataView(buffer, metadataOffset, 24);
		const strideBytes = meta.getUint32(0, true);
		const height = meta.getUint32(4, true);
		const width = meta.getUint32(8, true);

		if (width <= 0 || height <= 0) return;

		const expectedRowBytes = width * 4;
		const needsStrideCorrection = strideBytes !== expectedRowBytes;
		const availableLength = strideBytes * height;

		if (
			strideBytes === 0 ||
			strideBytes < expectedRowBytes ||
			buffer.byteLength - 24 < availableLength
		) {
			return;
		}

		if (!needsStrideCorrection) {
			const frameData = new Uint8ClampedArray(
				buffer,
				0,
				expectedRowBytes * height,
			);
			const renderStart = performance.now();

			if (directCanvas.width !== width || directCanvas.height !== height) {
				directCanvas.width = width;
				directCanvas.height = height;
			}

			if (
				!cachedDirectImageData ||
				cachedDirectWidth !== width ||
				cachedDirectHeight !== height
			) {
				cachedDirectImageData = new ImageData(width, height);
				cachedDirectWidth = width;
				cachedDirectHeight = height;
			}
			cachedDirectImageData.data.set(frameData);
			directCtx.putImageData(cachedDirectImageData, 0, 0);

			storeRenderedFrame(
				cachedDirectImageData.data,
				width,
				height,
				width * 4,
				false,
			);
			recordRender(
				performance.now() - renderStart,