Yolo host on EC2.

README.md

@@ -102,11 +102,11 @@ cd server
 go run ./warp-server
 ```
 
-## Web
+## Web Player
 The web assets need to be hosted with a HTTPS server. If you're using a self-signed certificate, you will need to ignore the security warning in Chrome (Advanced -> proceed to localhost.warp.demo). This can be avoided by adding your certificate to the root CA but I'm too lazy to do that.
 
 ```
-cd client
+cd player
 yarn install
 yarn serve
 ```

player/package.json

@@ -2,7 +2,8 @@
   "source": "src/index.html",
   "scripts": {
     "serve": "parcel serve --https --host localhost.warp.demo --port 4444",
-    "build": "parcel build",
+    "prebuild": "rm -rf dist",
+    "build": "parcel build --public-url ./",
     "check": "tsc --noEmit"
   },
   "devDependencies": {

player/src/index.html

@@ -12,12 +12,11 @@
 	<div id="player">
 		<div id="screen">
 			<div id="play"><span>click to play</span></div>
-			<video id="vid" controls></video>
+			<video id="vid" autoplay controls></video>
 		</div>
 
 		<div id="controls">
 			<button type="button" id="live">Go Live</button>
-			<button type="button" id="throttle">Throttle: None</button>
 		</div>
 
 		<div id="stats">
@@ -35,28 +34,21 @@
 		// This is so ghetto but I'm too lazy to improve it right now
 		const vidRef = document.getElementById("vid")
 		const liveRef = document.getElementById("live")
-		const throttleRef = document.getElementById("throttle")
 		const statsRef = document.getElementById("stats")
 		const playRef = document.getElementById("play")
 
 		const params = new URLSearchParams(window.location.search)
 
 		const player = new Player({
-			url: params.get("url") || "https://localhost.warp.demo:4443",
+			url: params.get("url") || "https://quic.video/demo",
 
 			vid: vidRef,
 			stats: statsRef,
-			throttle: throttleRef,
 		})
 
 		liveRef.addEventListener("click", (e) => {
 			e.preventDefault()
-			player.goLive()
-		})
-
-		throttleRef.addEventListener("click", (e) => {
-			e.preventDefault()
-			player.throttle()
+			player.goLive(0.3) // 300ms of buffer
 		})
 
 		playRef.addEventListener('click', (e) => {
@@ -66,7 +58,7 @@
 
 		function playFunc(e) {
 			playRef.style.display = "none"
-			//player.goLive()
+			player.goLive(0.3) // 300ms of buffer
 
 			// Only fire once to restore pause/play functionality
 			vidRef.removeEventListener('play', playFunc)
@@ -76,7 +68,7 @@
 		vidRef.volume = 0.5
 
 		// Try to autoplay but ignore errors on mobile; they need to click
-		//vidRef.play().catch((e) => console.warn(e))
+		vidRef.play().catch((e) => console.warn(e))
 	</script>
 </body>
 </html>

player/src/player.ts

@@ -53,9 +53,6 @@ export class Player {
 
 		// async functions
 		this.receiveStreams()
-
-		// Limit to 4Mb/s
-		this.sendThrottle()
 	}
 
 	async close() {
@@ -125,13 +122,24 @@ export class Player {
 		this.updateStats()
 	}
 
-	goLive() {
+	goLive(offset: number) {
 		const ranges = this.vidRef.buffered
 		if (!ranges.length) {
 			return
 		}
 
-		this.vidRef.currentTime = ranges.end(ranges.length-1);
+		// Get the start and the end of the last chunk of the buffer.
+		const start = ranges.start(ranges.length-1);
+		const end = ranges.end(ranges.length-1)
+
+		if (start < end - offset) {
+			// Seek back offset from the end of the buffer.
+			this.vidRef.currentTime = end - offset;
+		} else {
+			// Start at the beginning of the range.
+			this.vidRef.currentTime = start;
+		}
+
 		this.vidRef.play();
 	}
 
@@ -272,10 +280,10 @@ export class Player {
 
 	updateStats() {
 		for (const child of this.statsRef.children) {
-			if (child.className == "audio buffer") {
+			if (child.classList.contains("audio")) {
 				const ranges: any = (this.audio) ? this.audio.buffered() : { length: 0 }
 				this.visualizeBuffer(child as HTMLElement, ranges)
-			} else if (child.className == "video buffer") {
+			} else if (child.classList.contains("video")) {
 				const ranges: any = (this.video) ? this.video.buffered() : { length: 0 }
 				this.visualizeBuffer(child as HTMLElement, ranges)
 			}

server/internal/warp/session.go

@@ -116,7 +116,7 @@ func (s *Session) handleStream(ctx context.Context, stream *webtransport.Receive
 		}
 
 		if msg.Throttle != nil {
-			s.setThrottle(msg.Throttle)
+			//s.setThrottle(msg.Throttle)
 		}
 	}
 }