Add WIP functions for debugging performance

README.md

@@ -19,4 +19,4 @@ pnpm run dev
 
 ### [Open the page](http://localhost:5173)
 
-The dev server might not bind to port 5173, so just use the link from the dev server output.
+The dev server might not bind to port 5173, so just use the link from the dev server output.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-go2rtc",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"author": "NoahFriendo",
 	"license": "MIT",
 	"repository": "https://github.com/NoahFriendo/svelte-go2rtc",

src/lib/VideoRTC.svelte

@@ -185,6 +185,25 @@
 			.join();
 	}
 
+	export function getDelay() {
+		console.debug('getDelay');
+		if (!video) return 0;
+		const buff = video.buffered;
+		if (buff.length > 0) {
+			return buff.end(buff.length - 1) - video.currentTime;
+		}
+		return 0;
+	}
+
+	export function seekToEnd() {
+		console.debug('seekToEnd');
+		if (!video) return;
+		const seek = video.seekable;
+		if (seek.length > 0) {
+			video.currentTime = seek.end(seek.length - 1);
+		}
+	}
+
 	/**
 	 * `CustomElement`. Invoked each time the custom element is appended into a
 	 * document-connected element.
@@ -197,10 +216,7 @@
 
 		// because video autopause on disconnected from DOM
 		if (video) {
-			const seek = video.seekable;
-			if (seek.length > 0) {
-				video.currentTime = seek.end(seek.length - 1);
-			}
+			seekToEnd();
 			play();
 		} else {
 			oninit();

src/routes/+page.svelte

@@ -6,11 +6,14 @@
 	let error = '';
 	let mode = '';
 	let message = '';
+
+	let component: VideoRTC | null = null;
 </script>
 
 <h1>VideoRTC Component</h1>
 
 <VideoRTC
+	bind:this={component}
 	src="http://localhost:1984/api/ws?src={stream_name}"
 	on:error={(e) => (error = e.detail)}
 	on:mode={(e) => (mode = e.detail)}
@@ -28,3 +31,21 @@
 {#if message}
 	<p>Message: {JSON.stringify(message)}</p>
 {/if}
+
+{#if component}
+	<p>VideoRTC: {component}</p>
+	<button
+		on:click={() => {
+			component?.seekToEnd();
+		}}
+	>
+		Seek to end
+	</button>
+	<button
+		on:click={() => {
+			console.log(component?.getDelay());
+		}}
+	>
+		Get Delay
+	</button>
+{/if}