Small adjustments

dev/mux.html

@@ -34,8 +34,8 @@
 	}
 
 	const canvas = document.createElement('canvas');
-	canvas.width = 640;
-	canvas.height = 480;
+	canvas.width = 1920;
+	canvas.height = 1080;
 	const context = canvas.getContext('2d');
 
 	let format = new Mediabunny.MkvOutputFormat({ streamable: false });
@@ -193,12 +193,17 @@ Testing... <00:17.350>One... <00:18.125>Two...
 
 	//subtitleSource.add(simpleWebvttFile);
 	//subtitleSource.close();
+	
+	const p = document.createElement('p');
+	document.body.append(p);
 
 	for (let i = 0; i < 100; i++) {
 		context.fillStyle = ['red', 'green', 'blue', 'yellow'][i % 4];
 		context.fillRect(canvas.width * Math.random(), canvas.height * Math.random(), canvas.width * Math.random(), canvas.height * Math.random());
 
 		await videoSource.add(i / 10, 1 / 10);
+
+		p.textContent = i;
 	}
 
 	let audioContext = new AudioContext();
@@ -211,5 +216,5 @@ Testing... <00:17.350>One... <00:18.125>Two...
 	await output.finalize();
 
 	console.log(target);
-	download(new Blob([target.buffer]), 'test' + format.fileExtension);
+	//download(new Blob([target.buffer]), 'test' + format.fileExtension);
 </script>

src/media-source.ts

@@ -380,8 +380,8 @@ class VideoEncoderWrapper {
 						}
 
 						if (this.splitter) {
-							const alphaFrame = this.splitter.extractAlpha(videoFrame);
 							const colorFrame = this.splitter.extractColor(videoFrame);
+							const alphaFrame = this.splitter.extractAlpha(videoFrame);
 
 							this.alphaFrameQueue.push(alphaFrame);
 							this.encoder.encode(colorFrame, finalEncodeOptions);
@@ -910,13 +910,17 @@ class ColorAlphaSplitter {
 		assert(yuv[width * height] === 128); // Where chroma data starts
 		assert(yuv[yuv.length - 1] === 128); // Assert the YUV data has been fully written
 
-		return new VideoFrame(yuv, {
-			format: 'I420',
+		// Defining this separately because TypeScript doesn't know `transfer` and I can't be bothered to do declaration
+		// merging right now
+		const init = {
+			format: 'I420' as const,
 			codedWidth: width,
 			codedHeight: height,
 			timestamp: sourceFrame.timestamp,
 			duration: sourceFrame.duration ?? undefined,
-		});
+			transfer: [yuv.buffer],
+		};
+		return new VideoFrame(yuv, init);
 	}
 
 	close() {