mediabunny/dev/index.html

<script src="../dist/metamuxer.js"></script>

<script type="module">
	function download(blob, filename) {
		const url = URL.createObjectURL(blob);
		const a = document.createElement('a');
		a.href = url;
		a.download = filename;
		a.click();
		URL.revokeObjectURL(url);
	}

	function sliceAudioBuffer(audioBuffer, newLengthInSeconds, audioContext) {
		const sampleRate = audioBuffer.sampleRate;
		const sliceLength = Math.min(newLengthInSeconds * sampleRate, audioBuffer.length);

		// Create a new buffer with the desired duration and the same sample rate
		const slicedBuffer = audioContext.createBuffer(
			audioBuffer.numberOfChannels,
			sliceLength,
			sampleRate
		);

		// Copy the data from each channel of the original buffer to the new buffer
		for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
			const channelData = audioBuffer.getChannelData(channel);
			const slicedChannelData = slicedBuffer.getChannelData(channel);
			slicedChannelData.set(channelData.subarray(0, sliceLength));
		}

		return slicedBuffer;
	}

	const canvas = document.createElement('canvas');
	canvas.width = 1280;
	canvas.height = 720;
	const context = canvas.getContext('2d');

	let format = new Metamuxer.WebMOutputFormat();// new Metamuxer.MkvOutputFormat();// new Metamuxer.Mp4OutputFormat({ fastStart: false });
	let target = new Metamuxer.ArrayBufferTarget();

	let output = new Metamuxer.Output({ format, target });

	/*
	let videoSource = new Metamuxer.EncodedVideoChunkSource('avc');
	output.addTrack(videoSource);

	output.start();

	const timestamps = [0, 0.5, 0.25, 0.75, 1, 1.9, 1.8, 1.7, 1.6, 1.5, 1.4, 1.3, 1.2, 1.1, 2];
	for (const timestamp of timestamps) {
		const encodedVideoChunk = new EncodedVideoChunk({
			type: timestamp % 1 === 0 ? 'key' : 'delta',
			timestamp: 1e6 * timestamp,
			duration: 1e6 * 0.25,
			data: new Uint8Array(1024)
		});
		videoSource.digest(encodedVideoChunk, {
			decoderConfig: {
				codedWidth: 64,
				codedHeight: 64,
				description: new Uint8Array(64)
			}
		});
	}

	await output.finalize();

	console.log(target);
	download(new Blob([target.buffer]), 'test.mkv');
	*/

	let videoSource = new Metamuxer.CanvasSource(canvas, {
		codec: 'vp9',
		bitrate: 1e6
	});
	let audioSource = new Metamuxer.AudioBufferSource({
		codec: 'opus',
		bitrate: 128e3,
	});

	output.addTrack(videoSource);
	output.addTrack(audioSource);

	output.start();

	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());

		videoSource.digest(i / 10, 1 / 10);
	}

	let audioContext = new AudioContext();
	let audioBuffer = await audioContext.decodeAudioData(await (await fetch('./CantinaBand60.wav')).arrayBuffer());
	let length = 10;
	let slicedAudioBuffer = sliceAudioBuffer(audioBuffer, length, audioContext);

	audioSource.digest(slicedAudioBuffer);

	await output.finalize();

	console.log(target);
	download(new Blob([target.buffer]), 'test.webm');
</script>