From d67dd9e5bf9897a41e1d1f83b7ba2186c10804de Mon Sep 17 00:00:00 2001 From: Izan <66965250+SrIzan10@users.noreply.github.com> Date: Sun, 11 Jan 2026 22:14:05 +0100 Subject: [PATCH] feat: peer stuff --- app/components/app/PresetSelect.vue | 96 ++++++++++++++++++++++++----- app/lib/types/PresetGetResponse.ts | 2 +- app/pages/index.vue | 34 +--------- app/pages/stream.vue | 30 +-------- app/state/streamer.ts | 13 ++-- 5 files changed, 94 insertions(+), 81 deletions(-) diff --git a/app/components/app/PresetSelect.vue b/app/components/app/PresetSelect.vue index ff1e843..2c7bc1f 100644 --- a/app/components/app/PresetSelect.vue +++ b/app/components/app/PresetSelect.vue @@ -6,35 +6,103 @@ import { SelectSeparator, SelectTrigger, SelectValue, -} from '@/components/ui/select' -import { Plus } from 'lucide-vue-next'; -const router = useRouter() -const selectedValue = ref('') +} from "@/components/ui/select"; +import { Plus } from "lucide-vue-next"; +import type { ApiResponse, PresetUser } from "~/lib/types/PresetGetResponse"; +import { useStreamerStore } from "~/state/streamer"; + +const router = useRouter(); +const selectedValue = ref(""); +const presets = ref([]); +const loading = ref(true); +const streamerStore = useStreamerStore(); + +onMounted(async () => { + try { + const response = await $fetch("/api/presets"); + if (response.success) { + presets.value = response.data; + + const defaultPreset = presets.value.find((p) => p.isDefault); + if (defaultPreset) { + selectedValue.value = defaultPreset.presetId; + // Load the default preset's ice servers + loadPresetIceServers(defaultPreset.presetId); + } + } + } catch (error) { + console.error("Failed to fetch presets:", error); + } finally { + loading.value = false; + } +}); + +async function loadPresetIceServers(presetId: string) { + try { + const response = await $fetch(`/api/presets/${presetId}`); + const preset = response?.data || response; + if (preset && preset.iceServers) { + // Parse ice servers if it's a string + let iceServers = preset.iceServers; + if (typeof iceServers === "string") { + iceServers = JSON.parse(iceServers); + } + // Set the ice servers on the streamer store + streamerStore.setIceServers(iceServers); + } + } catch (error) { + console.error("Failed to load preset ice servers:", error); + } +} watch(selectedValue, (newValue) => { - if (newValue === 'create-new') { - router.push('/presets/new') + if (newValue === "create-new") { + router.push("/presets/new"); + selectedValue.value = ""; + } else if (newValue) { + // Load ice servers for the selected preset + loadPresetIceServers(newValue); } -}) +}); diff --git a/app/lib/types/PresetGetResponse.ts b/app/lib/types/PresetGetResponse.ts index 269bebb..6109fe0 100644 --- a/app/lib/types/PresetGetResponse.ts +++ b/app/lib/types/PresetGetResponse.ts @@ -13,7 +13,7 @@ interface Preset { shareable: boolean; createdAt: string; } -interface PresetUser { +export interface PresetUser { id: string; presetId: string; userId: string; diff --git a/app/pages/index.vue b/app/pages/index.vue index 5a4dfef..3796f78 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -45,38 +45,7 @@ const { send } = useWebSocket(wsUrl, { const message = JSON.parse(ev.data); if (message.event === "offer") { viewerStore.setConnectionStatus("creating rtc peer connections..."); - const peerConnection = new RTCPeerConnection({ - iceServers: [ - { urls: "stun:stun.l.google.com:19302" }, - { urls: "stun:stun1.l.google.com:19302" }, - { - urls: "turn:5.161.207.54:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:5.161.49.183:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:135.181.147.65:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:5.78.83.26:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:5.223.48.157:3478", - username: "username", - credential: "password", - }, - ], - iceTransportPolicy: "relay", - }); + const peerConnection = new RTCPeerConnection(); viewerStore.setPeerConnection(peerConnection); peerConnection.ontrack = (event) => { @@ -175,4 +144,3 @@ watch(codeRef, (newCode) => { } }); - diff --git a/app/pages/stream.vue b/app/pages/stream.vue index 3b41580..e89a15a 100644 --- a/app/pages/stream.vue +++ b/app/pages/stream.vue @@ -36,35 +36,7 @@ const { send } = useWebSocket(wsUrl, { if (message.event === "viewer-joined") { const peerConnection = new RTCPeerConnection({ - iceServers: [ - { urls: "stun:stun.l.google.com:19302" }, - { urls: "stun:stun1.l.google.com:19302" }, - { - urls: "turn:5.161.207.54:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:5.161.49.183:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:135.181.147.65:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:5.78.83.26:3478", - username: "username", - credential: "password", - }, - { - urls: "turn:5.223.48.157:3478", - username: "username", - credential: "password", - }, - ], + iceServers: streamerStore.iceServers, iceTransportPolicy: "relay", }); streamerStore.addPeerConnection(message.viewerId, peerConnection); diff --git a/app/state/streamer.ts b/app/state/streamer.ts index 794abbf..ce26ab4 100644 --- a/app/state/streamer.ts +++ b/app/state/streamer.ts @@ -1,9 +1,10 @@ -import { defineStore} from 'pinia'; +import { defineStore } from "pinia"; -export const useStreamerStore = defineStore('streamer', { +export const useStreamerStore = defineStore("streamer", { state: () => ({ - code: '', + code: "", peerConnections: {} as Record, + iceServers: [] as RTCIceServer[], }), actions: { setCode(code: string) { @@ -12,5 +13,9 @@ export const useStreamerStore = defineStore('streamer', { addPeerConnection(id: string, pc: RTCPeerConnection) { this.peerConnections[id] = pc; }, + setIceServers(iceServers: RTCIceServer[]) { + this.iceServers = iceServers; + }, }, -}); \ No newline at end of file +}); +