new front

src/routes/+page.svelte

@@ -2,38 +2,21 @@
     import { onMount } from "svelte";
 
     let localVideo: HTMLVideoElement;
+    let localStream: MediaStream;
     let pc: RTCPeerConnection;
     let ws: WebSocket;
 
-    async function start() {
+    function createPC() {
         pc = new RTCPeerConnection({
             iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
         });
 
-        ws = new WebSocket("wss://meet-api.quizer.space/ws");
-
-        ws.onmessage = async (e) => {
-            const msg = JSON.parse(e.data);
-
-            if (msg.type === "answer") {
-                await pc.setRemoteDescription(msg.data);
-            }
-
-            if (msg.type === "ice") {
-                await pc.addIceCandidate(msg.data);
-            }
-
-            if (msg.type === "renegotiate") {
-                const offer = await pc.createOffer();
-                await pc.setLocalDescription(offer);
-
-                ws.send(
-                    JSON.stringify({
-                        type: "offer",
-                        data: offer,
-                    }),
-                );
-            }
+        pc.ontrack = (e) => {
+            const video = document.createElement("video");
+            video.autoplay = true;
+            video.playsInline = true;
+            video.srcObject = e.streams[0];
+            document.body.appendChild(video);
         };
 
         pc.onicecandidate = (e) => {
@@ -46,41 +29,64 @@
                 );
             }
         };
+    }
 
-        pc.ontrack = (e) => {
-            const video = document.createElement("video");
-            video.autoplay = true;
-            video.srcObject = e.streams[0];
-            document.body.appendChild(video);
-        };
+    async function negotiate() {
+        const offer = await pc.createOffer();
+        await pc.setLocalDescription(offer);
 
-        const stream = await navigator.mediaDevices.getUserMedia({
+        ws.send(
+            JSON.stringify({
+                type: "offer",
+                data: offer,
+            }),
+        );
+    }
+
+    onMount(async () => {
+        localStream = await navigator.mediaDevices.getUserMedia({
             video: true,
             audio: true,
         });
 
-        localVideo.srcObject = stream;
+        localVideo.srcObject = localStream;
 
-        for (const track of stream.getTracks()) {
-            pc.addTrack(track, stream);
+        ws = new WebSocket("wss://meet-api.quizer.space/ws");
+
+        createPC();
+
+        for (const track of localStream.getTracks()) {
+            pc.addTrack(track, localStream);
         }
 
-        const offer = await pc.createOffer();
-        await pc.setLocalDescription(offer);
+        ws.onmessage = async (e) => {
+            const msg = JSON.parse(e.data);
 
-        ws.onopen = () => {
-            ws.send(
-                JSON.stringify({
-                    type: "offer",
-                    data: offer,
-                }),
-            );
+            switch (msg.type) {
+                case "answer":
+                    await pc.setRemoteDescription(msg.data);
+                    break;
+
+                case "ice":
+                    await pc.addIceCandidate(msg.data);
+                    break;
+
+                case "renegotiate":
+                    await negotiate();
+                    break;
+            }
         };
-    }
 
-    onMount(() => {
-        start();
+        await negotiate();
     });
 </script>
 
 <video bind:this={localVideo} autoplay muted playsinline></video>
+
+<style>
+    video {
+        width: 240px;
+        margin: 8px;
+        background: black;
+    }
+</style>