Add HLS transcoding example

docs/examples.md

@@ -43,4 +43,10 @@ features:
       target: _self
       icon:
         src: /mingcute--microphone-line.svg
+    - title: HLS transcoding
+      details: Convert one video into a full HLS manifest with five video renditions and one audio track.
+      link: /examples/hls-transcoding/
+      target: _self
+      icon:
+        src: /mingcute--live-line.svg
 ---

docs/guide/writing-hls.md

@@ -89,16 +89,23 @@ console.log(writtenFiles);
 
 ```ts
 const root = await navigator.storage.getDirectory();
+const writePromises: Promise<void>[] = [];
 
 const output = new Output({
 	target: new PathedTarget(
 		'master.m3u8',
-		async ({ path }) => {
-			const handle = await root.getFileHandle(path, { create: true });
-			const writable = await handle.createWritable();
-			return new StreamTarget(writable);
-		},
+		async ({ path }) => new BufferTarget({
+			onFinalize: (buffer) => {
+				writePromises.push((async () => {
+					const handle = await root.getFileHandle(path, { create: true });
+					const writable = await handle.createWritable();
+					await writable.write(buffer);
+					await writable.close();
+				})());
+			},
+		}),
 	),
+	onFinalize: () => Promise.all(writePromises),
 	// ...
 });
 

docs/public/mingcute--live-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="#06b6d4" d="M16.95 2.586a1 1 0 0 1 0 1.414l-3 3H19a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3.636L7.05 5.414A1 1 0 0 1 8.465 4l2.474 2.475a.5.5 0 0 0 .707 0l3.89-3.89a1 1 0 0 1 1.414 0M19 9H5v10h14zM8.98 11.547a1.232 1.232 0 0 1 1.72-.994a22 22 0 0 1 2.2 1.123a22 22 0 0 1 2.075 1.346c.668.494.67 1.489 0 1.984A22 22 0 0 1 12.9 16.35c-.997.576-1.785.943-2.2 1.124a1.23 1.23 0 0 1-1.72-.993a23 23 0 0 1-.128-2.467c0-1.14.078-2.014.128-2.467m1.902 1.306a23 23 0 0 0 0 2.32a23 23 0 0 0 2.008-1.16a23 23 0 0 0-2.008-1.16"/></g></svg>