Fix the video renderer.

player/fingerprint.sha256

@@ -1 +0,0 @@
-50e151a79d06af6b9289180af319ca974e227d9ec58c30362c9304e56df3e3ea

player/src/transport/.gitignore

@@ -0,0 +1 @@
+fingerprint.hex

player/src/transport/fingerprint.hex

@@ -1 +0,0 @@
-642ab03bc58c48ed614e6523d93c2455d8223aedfbdcba7f502ca0ea08590921

player/src/transport/index.ts

@@ -3,6 +3,8 @@ import * as Stream from "../stream"
 import * as MP4 from "../mp4"
 
 import Video from "../video/index"
+
+// @ts-ignore bundler embeds data
 import fingerprint from 'bundle-text:./fingerprint.hex';
 
 ///<reference path="./types/webtransport.d.ts"/>
@@ -46,7 +48,7 @@ export class Player {
 	async connect(url: string): Promise<WebTransport> {
 		// Convert the hex to binary.
 		let hash = [];
-		for (let c = 0; c < fingerprint.length; c += 2) {
+		for (let c = 0; c < fingerprint.length-1; c += 2) {
 			hash.push(parseInt(fingerprint.substring(c, c+2), 16));
 		}
 

player/src/video/renderer.ts

@@ -7,11 +7,14 @@ export class Renderer {
     sync: DOMHighResTimeStamp; // the wall clock value for timestamp 0
     last?: number; // the timestamp of the last rendered frame
 
+    maxDuration: number; // the maximum duration allowed in the buffer
+
     constructor(config: Message.Config) {
         this.canvas = config.canvas;
         this.queue = [];
         this.render = 0;
         this.sync = 0;
+        this.maxDuration = 10 * 1000
     }
 
     push(frame: VideoFrame) {
@@ -27,14 +30,36 @@ export class Renderer {
         }
 
         // Insert the frame into the queue sorted by timestamp.
-        // TODO loop backwards for better performance
+        let low = 0
-        let index = this.queue.findIndex(other => {
+        let high = this.queue.length;
-            return frame.timestamp < other.timestamp;
-        })
 
-        // Insert into the queue.
+        // Fast path because we normally append to the end.
-        this.queue.splice(index, 0, frame)
+        if (this.queue.length > 0 && this.queue[this.queue.length].timestamp <= frame.timestamp) {
+            this.queue.push(frame)
+        } else {
+            // Do a full binary search
+            while (low < high) {
+                var mid = (low + high) >>> 1;
+                if (this.queue[mid].timestamp < frame.timestamp) low = mid + 1;
+                else high = mid;
+            }
 
+            this.queue.splice(low, 0, frame)
+        }
+
+        // Trim the max size of the buffer
+        const last = this.queue[this.queue.length-1].timestamp
+        while (1) {
+            const first = this.queue[0]
+            if (first.timestamp + this.maxDuration >= last) {
+                break
+            }
+
+            first.close()
+            this.queue.shift()
+        }
+
+        // Queue up to render the next frame.
         if (!this.render) {
             this.render = self.requestAnimationFrame(this.draw.bind(this))
         }

server/main.go

@@ -56,8 +56,6 @@ func run(ctx context.Context) (err error) {
 	hash := sha256.Sum256(tlsCert.Certificate[0])
 	fingerprint := hex.EncodeToString(hash[:])
 
-	fmt.Println(fingerprint)
-
 	webConfig := web.Config{
 		Addr:        *addr,
 		CertFile:    *cert,