frontend: stream and fullscreen cleanup

frontend/src/routes/stream/Stream.svelte

@@ -12,13 +12,19 @@
 	let loading = $state(true);
 	let fullscreen = $state(false);
 	let gameplayView: HTMLDivElement;
+	let gameplayCanvas: HTMLCanvasElement;
 
 	async function startStream() {
 		console.log(`Connecting to stream at ${url} with cert_hash ${certHash}`);
-		await streamUrl(url, certHash);
+		await streamUrl(url, certHash, gameplayCanvas);
 	}
 
 	async function requestFullscreen() {
+		// Update fullscreen var if fullscreen was exited outside our control
+		if (document.fullscreenElement == null) {
+			fullscreen = false;
+		}
+
 		if (fullscreen) {
 			await document.exitFullscreen();
 			fullscreen = false;
@@ -36,7 +42,7 @@
 </script>
 
 <div id="gameplay-view" class="gameplay-view" bind:this={gameplayView}>
-	<canvas id="gamestream-canvas" class="gamestream-canvas"></canvas>
+	<canvas id="gamestream-canvas" class="gamestream-canvas" bind:this={gameplayCanvas}></canvas>
 	<StreamUi fullscreenFunc={requestFullscreen}></StreamUi>
 </div>
 

frontend/src/routes/stream/stream.ts

@@ -26,12 +26,8 @@ type DecodeUnitPacket = {
   DecodeUnit: DecodeUnit
 }
 
-
-
-export async function streamUrl(url: string, cert_hash: Array<number>) {
-  const buffer = new Uint8Array(cert_hash);
-  console.log('Hash: ', buffer);
-  try {
+async function connectToUrl(url: string, certHash: Uint8Array): Promise<WebTransport> {
+  console.log('Hash: ', certHash);
   console.log(`Connecting to stream`);
 
   // Check if WebTransport is supported
@@ -39,12 +35,11 @@ export async function streamUrl(url: string, cert_hash: Array<number>) {
     throw new Error('WebTransport is not supported in this browser');
   }
 
-    //const url = new URL();
   const transport = new WebTransport(url, {
     serverCertificateHashes: [
       {
         algorithm: "sha-256",
-          value: buffer,
+        value: certHash,
       }
     ]
   });
@@ -54,14 +49,10 @@ export async function streamUrl(url: string, cert_hash: Array<number>) {
   await transport.ready;
   console.log('WebTransport connection established');
 
+  return transport;
+}
 
-    console.log('Creating WebTransport bidirectional stream');
-    const stream = await transport.createBidirectionalStream();
-    console.log('Bidirectional stream created');
-
-    const reader = stream.readable.getReader();
-
-    function parseData(newBuffer: Uint8Array, oldBuffer: Uint8Array): [Array<Object>, Uint8Array<ArrayBuffer>] {
+function parseData(newBuffer: Uint8Array, oldBuffer: Uint8Array): [Array<Object>, Uint8Array<ArrayBuffer>] {
   let packets = new Array<Object>();
   let unparsedData = new Uint8Array();
 
@@ -91,27 +82,33 @@ export async function streamUrl(url: string, cert_hash: Array<number>) {
     index += 4 + dataLength;
   }
   return [packets, unparsedData];
-    }
+}
 
-    let unparsedData = new Uint8Array();
+export async function streamUrl(url: string, certHash: Array<number>, canvasElement: HTMLCanvasElement) {
+  const certHashArray = new Uint8Array(certHash);
 
-    const canvas: HTMLCanvasElement | null = <HTMLCanvasElement>document.getElementById('gamestream-canvas');
-    if (canvas == null) {
-      throw new Error(`Could not find canvas`);
-    }
-    const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
-    if (ctx == null) {
+  const transport = await connectToUrl(url, certHashArray);
+  console.log('Creating WebTransport bidirectional stream');
+  const stream = await transport.createBidirectionalStream();
+  console.log('Bidirectional stream created');
+
+  const canvasCtx: CanvasRenderingContext2D | null = canvasElement.getContext('2d');
+  if (canvasCtx == null) {
     throw new Error(`Could not get 2d canvas context`);
   }
 
+  const reader = stream.readable.getReader();
+  try {
+    let unparsedData = new Uint8Array();
+
     const videoDecoder = new VideoDecoder({
       output: (frame) => {
         // Set canvas dimensions to match the frame
-        canvas.width = frame.displayWidth;
-        canvas.height = frame.displayHeight;
+        canvasElement.width = frame.displayWidth;
+        canvasElement.height = frame.displayHeight;
 
         // Draw the decoded frame to canvas
-        ctx.drawImage(frame, 0, 0);
+        canvasCtx.drawImage(frame, 0, 0);
 
         // Important: close the frame to free memory
         frame.close();
@@ -174,9 +171,6 @@ export async function streamUrl(url: string, cert_hash: Array<number>) {
 
     }
 
-
-
-
     // Handle connection close
     transport.closed.then(() => {
       console.log('WebTransport connection closed');
@@ -187,7 +181,8 @@ export async function streamUrl(url: string, cert_hash: Array<number>) {
     // You can add more WebTransport handling logic here
     // For example, handling incoming streams, sending data, etc.
 
-  } catch (error) {
+  } catch (e) {
+    var error = <Error>e;
     console.error('Error connecting to stream:', error);
     alert('Failed to connect to stream: ' + error.message);
   }