Fix incorrectly-written video rotation metadata even when rotation is baked into the video (fixes #329)

dev/convert.html

@@ -104,6 +104,8 @@
 			},
 			*/
 			video: () => ({
+				//width: 640,
+				//rotate: 90,
 				//forceTranscode: true,
 				//forceTranscode: true,
 				//width: 1280,
@@ -189,7 +191,7 @@
 			},
 			trim: {
 				//start: 0,
-				end: 10
+				end: 2
 			},
 		});
 		console.log(conversion);

src/conversion.ts

@@ -1086,6 +1086,8 @@ export class Conversion {
 			}
 
 			if (needsRerender) {
+				outputTrackRotation = 0; // Since the rotation is baked into the output
+
 				this._trackPromises.push((async () => {
 					await this._started;
 
@@ -1101,8 +1103,6 @@ export class Conversion {
 					const iterator = sink.canvases(this._startTimestamp, this._endTimestamp);
 					const frameRate = trackOptions.frameRate;
 
-					outputTrackRotation = 0; // Since the rotation is baked into the output
-
 					let lastCanvas: HTMLCanvasElement | OffscreenCanvas | null = null;
 					let lastCanvasTimestamp: number | null = null;
 					let lastCanvasEndTimestamp: number | null = null;

test/browser/conversion.test.ts

@@ -0,0 +1,49 @@
+import { ALL_FORMATS } from '../../src/input-format.js';
+import { Input } from '../../src/input.js';
+import { Mp4OutputFormat } from '../../src/output-format.js';
+import { Output } from '../../src/output.js';
+import { BufferSource, UrlSource } from '../../src/source.js';
+import { expect, test } from 'vitest';
+import { BufferTarget } from '../../src/target.js';
+import { Conversion } from '../../src/conversion.js';
+import { assert } from '../../src/misc.js';
+
+test('Rotation is baked-in when rerendering', async () => {
+	using input = new Input({
+		source: new UrlSource('/rotate-buck-bunny.mp4'),
+		formats: ALL_FORMATS,
+	});
+
+	const ogTrack = await input.getPrimaryVideoTrack();
+	assert(ogTrack);
+
+	expect(ogTrack.rotation).toBe(90);
+	expect(ogTrack.codedWidth).toBe(1920);
+	expect(ogTrack.codedHeight).toBe(1080);
+	expect(ogTrack.displayWidth).toBe(1080);
+	expect(ogTrack.displayHeight).toBe(1920);
+
+	const output = new Output({
+		format: new Mp4OutputFormat(),
+		target: new BufferTarget(),
+	});
+
+	const conversion = await Conversion.init({ input, output, video: {
+		width: 320,
+	} });
+	await conversion.execute();
+
+	using newInput = new Input({
+		source: new BufferSource(output.target.buffer!),
+		formats: ALL_FORMATS,
+	});
+
+	const track = await newInput.getPrimaryVideoTrack();
+	assert(track);
+
+	expect(track.codedWidth).toBe(320);
+	expect(track.codedHeight).toBe(570);
+	expect(track.displayWidth).toBe(320);
+	expect(track.displayHeight).toBe(570);
+	expect(track.rotation).toBe(0);
+});

tsconfig.vitest.json

@@ -6,7 +6,7 @@
 		"composite": true,
 		"noEmit": false,
 		"paths": {
-			"mediabunny": ["./src/index.ts"],
+			//"mediabunny": ["./src/index.ts"], So that the direct source imports are preferred
 			"@mediabunny/ac3": ["./packages/ac3/src/index.ts"],
 			"@mediabunny/aac-encoder": ["./packages/aac-encoder/src/index.ts"],
 			"@mediabunny/flac-encoder": ["./packages/flac-encoder/src/index.ts"],