fix

src/routes/+page.svelte

@@ -1,92 +1,124 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+	import { onMount } from "svelte";
 
-    let localVideo: HTMLVideoElement;
-    let localStream: MediaStream;
-    let pc: RTCPeerConnection;
-    let ws: WebSocket;
+	let localVideo: HTMLVideoElement;
+	let localStream: MediaStream;
 
-    function createPC() {
-        pc = new RTCPeerConnection({
-            iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
-        });
+	let ws: WebSocket;
+	let pc: RTCPeerConnection;
 
-        pc.ontrack = (e) => {
-            const video = document.createElement("video");
-            video.autoplay = true;
-            video.playsInline = true;
-            video.srcObject = e.streams[0];
-            document.body.appendChild(video);
-        };
+	/* ---------- helpers ---------- */
 
-        pc.onicecandidate = (e) => {
-            if (e.candidate) {
-                ws.send(
-                    JSON.stringify({
-                        type: "ice",
-                        data: e.candidate,
-                    }),
-                );
-            }
-        };
-    }
+	function waitForWsOpen(ws: WebSocket): Promise<void> {
+		return new Promise((resolve) => {
+			if (ws.readyState === WebSocket.OPEN) {
+				resolve();
+			} else {
+				ws.addEventListener("open", () => resolve(), { once: true });
+			}
+		});
+	}
 
-    async function negotiate() {
-        const offer = await pc.createOffer();
-        await pc.setLocalDescription(offer);
+	/* ---------- WebRTC ---------- */
 
-        ws.send(
-            JSON.stringify({
-                type: "offer",
-                data: offer,
-            }),
-        );
-    }
+	function createPeerConnection() {
+		pc = new RTCPeerConnection({
+			iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+		});
 
-    onMount(async () => {
-        localStream = await navigator.mediaDevices.getUserMedia({
-            video: true,
-            audio: true,
-        });
+		pc.ontrack = (e) => {
+			const video = document.createElement("video");
+			video.autoplay = true;
+			video.playsInline = true;
+			video.srcObject = e.streams[0];
+			document.body.appendChild(video);
+		};
 
-        localVideo.srcObject = localStream;
+		pc.onicecandidate = (e) => {
+			if (!e.candidate) return;
+			if (ws.readyState !== WebSocket.OPEN) return;
 
-        ws = new WebSocket("wss://meet-api.quizer.space/ws");
+			ws.send(
+				JSON.stringify({
+					type: "ice",
+					data: e.candidate,
+				}),
+			);
+		};
+	}
 
-        createPC();
+	async function negotiate() {
+		const offer = await pc.createOffer();
+		await pc.setLocalDescription(offer);
 
-        for (const track of localStream.getTracks()) {
-            pc.addTrack(track, localStream);
-        }
+		ws.send(
+			JSON.stringify({
+				type: "offer",
+				data: offer,
+			}),
+		);
+	}
 
-        ws.onmessage = async (e) => {
-            const msg = JSON.parse(e.data);
+	/* ---------- lifecycle ---------- */
 
-            switch (msg.type) {
-                case "answer":
-                    await pc.setRemoteDescription(msg.data);
-                    break;
+	onMount(async () => {
+		/* 1. media */
+		localStream = await navigator.mediaDevices.getUserMedia({
+			video: true,
+			audio: true,
+		});
 
-                case "ice":
-                    await pc.addIceCandidate(msg.data);
-                    break;
+		localVideo.srcObject = localStream;
 
-                case "renegotiate":
-                    await negotiate();
-                    break;
-            }
-        };
+		/* 2. websocket */
+		ws = new WebSocket("wss://meet-api.quizer.space/ws");
+		await waitForWsOpen(ws);
 
-        await negotiate();
-    });
+		console.log("[ws] connected");
+
+		/* 3. peer connection */
+		createPeerConnection();
+
+		for (const track of localStream.getTracks()) {
+			pc.addTrack(track, localStream);
+		}
+
+		/* 4. ws messages */
+		ws.onmessage = async (e) => {
+			const msg = JSON.parse(e.data);
+			console.log("[ws] <=", msg.type);
+
+			switch (msg.type) {
+				case "answer":
+					await pc.setRemoteDescription(msg.data);
+					break;
+
+				case "ice":
+					await pc.addIceCandidate(msg.data);
+					break;
+
+				case "renegotiate":
+					await negotiate();
+					break;
+			}
+		};
+
+		/* 5. initial offer */
+		await negotiate();
+	});
 </script>
 
-<video bind:this={localVideo} autoplay muted playsinline></video>
+<video
+	bind:this={localVideo}
+	autoplay
+	muted
+	playsinline
+></video>
 
 <style>
-    video {
-        width: 240px;
-        margin: 8px;
-        background: black;
-    }
+	video {
+		width: 240px;
+		margin: 8px;
+		background: black;
+	}
 </style>