✨ 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/segment.ts

@@ -1,10 +1,10 @@
-import { Chunk } from "./chunk"
+import type { Frame } from "../karp/frame"
 
 export class Segment {
 	id: number
 
-	// Take in a stream of chunks
-	input: WritableStream<Chunk>
+	// Take in a stream of frames
+	input: WritableStream<Frame>
 
 	// Output a stream of bytes, which we fork for each new subscriber.
 	#cache: ReadableStream<Uint8Array>
@@ -16,16 +16,18 @@ export class Segment {
 
 		// Set a max size for each segment, dropping the tail if it gets too long.
 		// We tee the reader, so this limit applies to the FASTEST reader.
-		const backpressure = new ByteLengthQueuingStrategy({ highWaterMark: 8_000_000 })
+		const backpressure = new ByteLengthQueuingStrategy({
+			highWaterMark: 8_000_000,
+		})
 
-		const transport = new TransformStream<Chunk, Uint8Array>(
+		const transport = new TransformStream<Frame, Uint8Array>(
 			{
-				transform: (chunk: Chunk, controller) => {
+				transform: (frame: Frame, controller) => {
 					// Compute the max timestamp of the segment
-					this.timestamp = Math.max(chunk.timestamp + chunk.duration)
+					this.timestamp = Math.max(this.timestamp, frame.timestamp)
 
 					// Push the chunk to any listeners.
-					controller.enqueue(chunk.data)
+					controller.enqueue(frame.data)
 				},
 			},
 			undefined,