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

packages/web/src/components/WebRTCPlayer.tsx

@@ -209,6 +209,7 @@ export function WebRTCPlayer({
           method: "POST",
           headers: {
             "content-type": "application/sdp",
+            accept: "application/sdp",
           },
           body: localSdp,
           signal: abortController.signal,

packages/web/src/lib/stream/playback.ts

@@ -13,6 +13,7 @@ type PlaybackInput = {
   webrtcUrl?: string | null
   cloudflareUid?: string | null
   cloudflareCustomerCode?: string | null
+  preferWebRtc?: boolean
 }
 
 export function resolveStreamPlayback({
@@ -20,24 +21,25 @@ export function resolveStreamPlayback({
   webrtcUrl,
   cloudflareUid,
   cloudflareCustomerCode,
+  preferWebRtc = true,
 }: PlaybackInput): StreamPlayback | null {
-  if (webrtcUrl) {
-    return { type: "webrtc", url: webrtcUrl }
+  const cloudflare = resolveCloudflareStreamRef({
+    hlsUrl,
+    cloudflareUid,
+    cloudflareCustomerCode,
+  })
+
+  const resolvedWebRtcUrl = preferWebRtc
+    ? resolveWebRtcUrl({
+        webrtcUrl,
+        cloudflare,
+      })
+    : null
+
+  if (resolvedWebRtcUrl) {
+    return { type: "webrtc", url: resolvedWebRtcUrl }
   }
 
-  if (cloudflareUid) {
-    return {
-      type: "cloudflare",
-      uid: cloudflareUid,
-      customerCode: cloudflareCustomerCode ?? undefined,
-    }
-  }
-
-  if (!hlsUrl) {
-    return null
-  }
-
-  const cloudflare = parseCloudflareStreamUrl(hlsUrl)
   if (cloudflare) {
     return {
       type: "cloudflare",
@@ -46,6 +48,10 @@ export function resolveStreamPlayback({
     }
   }
 
+  if (!hlsUrl) {
+    return null
+  }
+
   return { type: "hls", url: hlsUrl }
 }
 
@@ -82,3 +88,55 @@ export function parseCloudflareStreamUrl(url: string): CloudflareStreamRef | nul
 
   return { uid, customerCode }
 }
+
+type CloudflareResolveInput = {
+  hlsUrl?: string | null
+  cloudflareUid?: string | null
+  cloudflareCustomerCode?: string | null
+}
+
+export function resolveCloudflareStreamRef({
+  hlsUrl,
+  cloudflareUid,
+  cloudflareCustomerCode,
+}: CloudflareResolveInput): CloudflareStreamRef | null {
+  if (cloudflareUid) {
+    return {
+      uid: cloudflareUid,
+      customerCode: cloudflareCustomerCode ?? undefined,
+    }
+  }
+
+  if (!hlsUrl) {
+    return null
+  }
+
+  return parseCloudflareStreamUrl(hlsUrl)
+}
+
+export function buildCloudflareWhepUrl(ref: CloudflareStreamRef): string {
+  if (ref.customerCode) {
+    return `https://customer-${ref.customerCode}.cloudflarestream.com/${ref.uid}/whep`
+  }
+  return `https://videodelivery.net/${ref.uid}/whep`
+}
+
+type WebRtcResolveInput = {
+  webrtcUrl?: string | null
+  cloudflare: CloudflareStreamRef | null
+}
+
+export function resolveWebRtcUrl({
+  webrtcUrl,
+  cloudflare,
+}: WebRtcResolveInput): string | null {
+  if (webrtcUrl) {
+    return webrtcUrl
+  }
+
+  if (!cloudflare) {
+    return null
+  }
+
+  return buildCloudflareWhepUrl(cloudflare)
+}

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,