Start work on HlsOutputFormat

examples/media-player/media-player.ts

@@ -83,26 +83,32 @@ const initMediaPlayer = async (resource: File | string) => {
 			pause();
 		}
 
+		const dirHandle = await showDirectoryPicker({ mode: 'read' });
+
 		void videoFrameIterator?.return();
 		void audioBufferIterator?.return();
 		asyncId++;
 
 		fileLoaded = false;
-		fileNameElement.textContent = resource instanceof File ? resource.name : resource;
+		fileNameElement.textContent = 'pish'; // resource instanceof File ? resource.name : resource;
 		horizontalRule.style.display = '';
 		loadingElement.style.display = '';
 		playerContainer.style.display = 'none';
 		errorElement.textContent = '';
 		warningElement.textContent = '';
 
-		let start = 0;
+		const start = 0;
 
 		let videoTrack: InputVideoTrack | null = null;
 		let audioTrack: InputAudioTrack | null = null;
-		if (typeof resource === 'string' && resource.includes('.m3u8')) {
+		if (true || typeof resource === 'string' && resource.includes('.m3u8')) {
 			const input = new Input({
-				entryPath: resource,
-				source: ({ path }) => new UrlSource(path),
+				entryPath: 'playlist.m3u8',
+				source: async ({ path }) => {
+					const fileHandle = await dirHandle.getFileHandle(path);
+					const file = await fileHandle.getFile();
+					return new BlobSource(file);
+				},
 				formats: ALL_FORMATS,
 			});
 			// const variant = (await manifestInput.getVariants())[0]!;
@@ -132,9 +138,9 @@ const initMediaPlayer = async (resource: File | string) => {
 
 			console.log(videoTrack, audioTrack, totalDuration);
 
-			start = totalDuration - 2;
+			// start = totalDuration - 2;
 
-			totalDuration += 3600;
+			// totalDuration += 3600;
 
 			// https://test-streams.mux.dev/test_001/stream.m3u8
 			// https://test-streams.mux.dev/test_001/stream_1000k_48k_640x360_050.ts
@@ -764,6 +770,10 @@ document.addEventListener('dragover', (event) => {
 	event.dataTransfer!.dropEffect = 'copy';
 });
 
+document.addEventListener('click', () => {
+	void initMediaPlayer();
+}, { once: true });
+
 document.addEventListener('drop', (event) => {
 	event.preventDefault();
 	const files = event.dataTransfer?.files;

examples/procedural-generation/procedural-generation.ts

@@ -8,6 +8,7 @@ import {
 	getFirstEncodableAudioCodec,
 	getFirstEncodableVideoCodec,
 	OutputFormat,
+	HlsOutputFormat,
 } from 'mediabunny';
 
 const durationSlider = document.querySelector('#duration-slider') as HTMLInputElement;
@@ -66,6 +67,11 @@ const generateVideo = async () => {
 	let progressInterval = -1;
 
 	try {
+		const dirHandle = await showDirectoryPicker({ mode: 'readwrite' });
+		for await (const [name, handle] of dirHandle) {
+			await dirHandle.removeEntry(name, { recursive: true });
+		}
+
 		// Let's set some DOM state
 		renderButton.disabled = true;
 		renderButton.textContent = 'Generating...';
@@ -86,8 +92,19 @@ const generateVideo = async () => {
 
 		// Create a new output file
 		output = new Output({
-			target: new BufferTarget(), // Stored in memory
-			format: new Mp4OutputFormat(),
+			rootPath: 'playlist.m3u8',
+			target: ({ path }) => {
+				const target = new BufferTarget();
+				target.onfinalized = async () => {
+					const fileHandle = await dirHandle.getFileHandle(path, { create: true });
+					const writable = await fileHandle.createWritable();
+					await writable.write(target.buffer!);
+					await writable.close();
+				};
+
+				return target;
+			}, // Stored in memory
+			format: new HlsOutputFormat(),
 		});
 
 		// Retrieve the first video codec supported by this browser that can be contained in the output format
@@ -103,6 +120,7 @@ const generateVideo = async () => {
 		const canvasSource = new CanvasSource(renderCanvas, {
 			codec: videoCodec,
 			bitrate: QUALITY_HIGH,
+			keyFrameInterval: 2,
 		});
 		output.addVideoTrack(canvasSource, { frameRate });