Ensure rotation is always clockwise, make CanvasSink more powerful, disable rotation metadata for Matroska outputs, & other changes

dev/convert.html

@@ -16,7 +16,7 @@
 
 		const source = new Metamuxer.BlobSource(file);
 		const target = new Metamuxer.BufferTarget();
-		const outputFormat = new Metamuxer.Mp4OutputFormat()
+		const outputFormat = new Metamuxer.WebMOutputFormat()
 
 		const abortController = new AbortController();
 		const button = document.createElement('button');
@@ -62,7 +62,16 @@
 			},
 			*/
 			video: {
-				//forceReencode: true
+				//forceReencode: true,
+				//rotate: 90
+				//width: 720 ?? 2160,
+				//height: 1280 ?? 3840,
+				fit: 'contain',
+				rotate: 90,
+				width: 512,
+				height: 512,
+				//width: 200,
+				//height: 100,
 			},
 			trim: {
 				start: 0,
@@ -77,7 +86,14 @@
 		console.log(res)
 
 		console.log("Done", target.buffer);
-		download(new Blob([target.buffer]), 'converted' + outputFormat.getFileExtension());
+
+		const video = document.createElement('video');
+		video.src = URL.createObjectURL(new Blob([target.buffer]));	
+		video.controls = true;	
+		document.body.append(video);
+		video.play();
+
+		//download(new Blob([target.buffer]), 'converted' + outputFormat.fileExtension);
 
 		function download(blob, filename) {
 			const url = URL.createObjectURL(blob);

dev/mux.html

@@ -41,6 +41,7 @@
 	let format = new Metamuxer.MkvOutputFormat({ streamable: false });
 	format = new Metamuxer.Mp4OutputFormat({ fastStart: 'fragmented' }); // new Metamuxer.MkvOutputFormat();// new Metamuxer.Mp4OutputFormat({ fastStart: false });
 	format = new Metamuxer.OggOutputFormat();
+	format = new Metamuxer.Mp4OutputFormat();
 	let target = new Metamuxer.BufferTarget();
 
 	/*
@@ -94,7 +95,7 @@
 	});
 	let subtitleSource = new Metamuxer.TextSubtitleSource('webvtt');
 
-	//output.addVideoTrack(videoSource, { languageCode: 'eng' });
+	output.addVideoTrack(videoSource, { languageCode: 'eng' });
 	output.addAudioTrack(audioSource);
 	//output.addSubtitleTrack(subtitleSource);
 
@@ -162,7 +163,7 @@ Testing... <00:17.350>One... <00:18.125>Two...
 		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);
+		await videoSource.add(i / 10, 1 / 10);
 	}
 
 	let audioContext = new AudioContext();

dev/player.html

@@ -107,7 +107,7 @@ durationElement.textContent = formatSeconds(totalDuration);
 
 playerDiv.style.display = 'flex';
 
-const videoSink = videoTrack && new Metamuxer.CanvasSink(videoTrack);
+const videoSink = videoTrack && new Metamuxer.CanvasSink(videoTrack, { poolSize: 2 });
 const audioSink = audioTrack && new Metamuxer.AudioBufferSink(audioTrack);
 
 let startTime = null;