✨ feat: Add streaming support (#125)

This adds:
- [x] Keyboard and mouse handling on the frontend
- [x] Video and audio streaming from the backend to the frontend
- [x] Input server that works with Websockets

Update - 17/11
- [ ] Master docker container to run this
- [ ] Steam runtime
- [ ] Entrypoint.sh

---------

Co-authored-by: Kristian Ollikainen <14197772+DatCaptainHorse@users.noreply.github.com>
Co-authored-by: Kristian Ollikainen <DatCaptainHorse@users.noreply.github.com>

packages/moq/contribute/audio.ts

@@ -1,15 +1,67 @@
+import { Deferred } from "../common/async"
+import type { Frame } from "../karp/frame"
+import type { Group, Track } from "../transfork"
+import { Closed } from "../transfork/error"
+
 const SUPPORTED = [
 	// TODO support AAC
 	// "mp4a"
 	"Opus",
 ]
 
+export class Packer {
+	#source: MediaStreamTrackProcessor<AudioData>
+	#encoder: Encoder
+
+	#data: Track
+	#current?: Group
+
+	constructor(track: MediaStreamAudioTrack, encoder: Encoder, data: Track) {
+		this.#source = new MediaStreamTrackProcessor({ track })
+		this.#encoder = encoder
+		this.#data = data
+	}
+
+	async run() {
+		const output = new WritableStream({
+			write: (chunk) => this.#write(chunk),
+			close: () => this.#close(),
+			abort: (e) => this.#close(e),
+		})
+
+		return this.#source.readable.pipeThrough(this.#encoder.frames).pipeTo(output)
+	}
+
+	#write(frame: Frame) {
+		// TODO use a fixed interval instead of keyframes (audio)
+		// TODO actually just align with video
+		if (!this.#current || frame.type === "key") {
+			if (this.#current) {
+				this.#current.close()
+			}
+
+			this.#current = this.#data.appendGroup()
+		}
+
+		this.#current.writeFrame(frame.data)
+	}
+
+	#close(err?: unknown) {
+		const closed = Closed.from(err)
+		if (this.#current) {
+			this.#current.close(closed)
+		}
+
+		this.#data.close(closed)
+	}
+}
+
 export class Encoder {
 	#encoder!: AudioEncoder
 	#encoderConfig: AudioEncoderConfig
-	#decoderConfig?: AudioDecoderConfig
+	#decoderConfig = new Deferred<AudioDecoderConfig>()
 
-	frames: TransformStream<AudioData, AudioDecoderConfig | EncodedAudioChunk>
+	frames: TransformStream<AudioData, EncodedAudioChunk>
 
 	constructor(config: AudioEncoderConfig) {
 		this.#encoderConfig = config
@@ -21,7 +73,7 @@ export class Encoder {
 		})
 	}
 
-	#start(controller: TransformStreamDefaultController<AudioDecoderConfig | EncodedAudioChunk>) {
+	#start(controller: TransformStreamDefaultController<EncodedAudioChunk>) {
 		this.#encoder = new AudioEncoder({
 			output: (frame, metadata) => {
 				this.#enqueue(controller, frame, metadata)
@@ -40,17 +92,16 @@ export class Encoder {
 	}
 
 	#enqueue(
-		controller: TransformStreamDefaultController<AudioDecoderConfig | EncodedAudioChunk>,
+		controller: TransformStreamDefaultController<EncodedAudioChunk>,
 		frame: EncodedAudioChunk,
 		metadata?: EncodedAudioChunkMetadata,
 	) {
 		const config = metadata?.decoderConfig
-		if (config && !this.#decoderConfig) {
+		if (config && !this.#decoderConfig.pending) {
 			const config = metadata.decoderConfig
 			if (!config) throw new Error("missing decoder config")
 
-			controller.enqueue(config)
-			this.#decoderConfig = config
+			this.#decoderConfig.resolve(config)
 		}
 
 		controller.enqueue(frame)
@@ -72,4 +123,8 @@ export class Encoder {
 	get config() {
 		return this.#encoderConfig
 	}
+
+	async decoderConfig(): Promise<AudioDecoderConfig> {
+		return await this.#decoderConfig.promise
+	}
 }