Implement WebRTC URL resolution and update stream playback logic across components and API routes

packages/web/src/routes/$username.tsx

@@ -111,7 +111,11 @@ function StreamPage() {
   const stream = data?.stream ?? null
   const playback = stream?.playback ?? null
   const fallbackPlayback = stream?.hls_url
-    ? resolveStreamPlayback({ hlsUrl: stream.hls_url, webrtcUrl: null })
+    ? resolveStreamPlayback({
+        hlsUrl: stream.hls_url,
+        webrtcUrl: null,
+        preferWebRtc: false,
+      })
     : null
   const activePlayback =
     playback?.type === "webrtc" && webRtcFailed
@@ -179,7 +183,6 @@ function StreamPage() {
     )
   }
 
-  const { user } = data
   const showPlayer =
     activePlayback?.type === "cloudflare" ||
     activePlayback?.type === "webrtc" ||

packages/web/src/routes/api/profile.ts

@@ -4,7 +4,11 @@ import { getDb } from "@/db/connection"
 import { users, streams } from "@/db/schema"
 import { getAuth } from "@/lib/auth"
 import { randomUUID } from "crypto"
-import { resolveStreamPlayback } from "@/lib/stream/playback"
+import {
+  resolveCloudflareStreamRef,
+  resolveStreamPlayback,
+  resolveWebRtcUrl,
+} from "@/lib/stream/playback"
 
 const resolveDatabaseUrl = (request: Request) => {
   try {
@@ -49,6 +53,12 @@ const getProfile = async ({ request }: { request: Request }) => {
       where: eq(streams.user_id, user.id),
     })
 
+    const cloudflare = stream
+      ? resolveCloudflareStreamRef({ hlsUrl: stream.hls_url })
+      : null
+    const webRtcUrl = stream
+      ? resolveWebRtcUrl({ webrtcUrl: stream.webrtc_url, cloudflare })
+      : null
     const playback = stream
       ? resolveStreamPlayback({
           hlsUrl: stream.hls_url,
@@ -69,7 +79,7 @@ const getProfile = async ({ request }: { request: Request }) => {
               title: stream.title,
               is_live: stream.is_live,
               hls_url: stream.hls_url,
-              webrtc_url: stream.webrtc_url,
+              webrtc_url: webRtcUrl,
               playback,
               stream_key: stream.stream_key,
             }

packages/web/src/routes/api/stream.ts

@@ -3,7 +3,11 @@ import { eq } from "drizzle-orm"
 import { getDb } from "@/db/connection"
 import { streams } from "@/db/schema"
 import { getAuth } from "@/lib/auth"
-import { resolveStreamPlayback } from "@/lib/stream/playback"
+import {
+  resolveCloudflareStreamRef,
+  resolveStreamPlayback,
+  resolveWebRtcUrl,
+} from "@/lib/stream/playback"
 
 const resolveDatabaseUrl = (request: Request) => {
   try {
@@ -43,15 +47,23 @@ const getStream = async ({ request }: { request: Request }) => {
       })
     }
 
+    const cloudflare = resolveCloudflareStreamRef({ hlsUrl: stream.hls_url })
+    const webRtcUrl = resolveWebRtcUrl({
+      webrtcUrl: stream.webrtc_url,
+      cloudflare,
+    })
     const playback = resolveStreamPlayback({
       hlsUrl: stream.hls_url,
       webrtcUrl: stream.webrtc_url,
     })
 
-    return new Response(JSON.stringify({ ...stream, playback }), {
-      status: 200,
-      headers: { "content-type": "application/json" },
-    })
+    return new Response(
+      JSON.stringify({ ...stream, webrtc_url: webRtcUrl, playback }),
+      {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      }
+    )
   } catch (error) {
     console.error("Stream GET error:", error)
     return new Response(JSON.stringify({ error: "Internal server error" }), {

packages/web/src/routes/api/streams.$username.ts

@@ -2,7 +2,11 @@ import { createFileRoute } from "@tanstack/react-router"
 import { eq } from "drizzle-orm"
 import { getDb } from "@/db/connection"
 import { users, streams } from "@/db/schema"
-import { resolveStreamPlayback } from "@/lib/stream/playback"
+import {
+  resolveCloudflareStreamRef,
+  resolveStreamPlayback,
+  resolveWebRtcUrl,
+} from "@/lib/stream/playback"
 
 const resolveDatabaseUrl = (request: Request) => {
   try {
@@ -59,6 +63,12 @@ const serve = async ({
       where: eq(streams.user_id, user.id),
     })
 
+    const cloudflare = stream
+      ? resolveCloudflareStreamRef({ hlsUrl: stream.hls_url })
+      : null
+    const webRtcUrl = stream
+      ? resolveWebRtcUrl({ webrtcUrl: stream.webrtc_url, cloudflare })
+      : null
     const playback = stream
       ? resolveStreamPlayback({
           hlsUrl: stream.hls_url,
@@ -81,7 +91,7 @@ const serve = async ({
             is_live: stream.is_live,
             viewer_count: stream.viewer_count,
             hls_url: stream.hls_url,
-            webrtc_url: stream.webrtc_url,
+            webrtc_url: webRtcUrl,
             playback,
             thumbnail_url: stream.thumbnail_url,
             started_at: stream.started_at?.toISOString() ?? null,