\n \n\n\n",[18,81],"1f75511e-44e2-11f1-a189-42b51c65c3df",["D",1777587340595],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\ninterface RtpStats {\n rtpTimestamp: number | undefined;\n delta: number | null;\n ssrc: number | undefined;\n audioLevel: number | undefined;\n receiveTs: number | undefined;\n voiceActivityFlag: boolean | undefined;\n}\n\ninterface JitterStats {\n // From inbound-rtp getStats()\n jitter: number | undefined; // packet jitter, seconds\n avgJitterBufferDelay: number | undefined; // jitterBufferDelay / jitterBufferEmittedCount, ms\n jitterBufferTargetDelay: number | undefined; // cumulative target delay, ms (derived avg)\n jitterBufferMinDelay: number | undefined; // cumulative min delay, ms (derived avg)\n packetsReceived: number | undefined;\n packetsLost: number | undefined;\n packetsDiscarded: number | undefined;\n totalSamplesReceived: number | undefined;\n // From receiver.jitterBufferTarget (writable hint)\n jitterBufferTarget: number | null;\n}\n\ninterface LogEntry {\n id: number;\n time: string;\n msg: string;\n color: string;\n}\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction hex8(n: number) {\n return \"0x\" + n.toString(16).toUpperCase().padStart(8, \"0\");\n}\n\nlet logIdSeq = 0;\nfunction makeEntry(msg: string, color = \"text-gray-400\"): LogEntry {\n return { id: logIdSeq++, time: performance.now().toFixed(1), msg, color };\n}\n\nfunction ms(seconds: number | undefined): string {\n if (seconds === undefined) return \"—\";\n return (seconds * 1000).toFixed(2) + \" ms\";\n}\n\n// ─── Stat Card ────────────────────────────────────────────────────────────────\n\nfunction Card({\n label,\n value,\n sub,\n valueClass = \"text-green-400\",\n size = \"text-3xl\",\n}: {\n label: string;\n value: string;\n sub: string;\n valueClass?: string;\n size?: string;\n}) {\n return (\n

{label}

{value}

{sub}

\n );\n}\n\n// ─── Section heading ─────────────────────────────────────────────────────────\n\nfunction SectionHeading({ children }: { children: string }) {\n return (\n

\n {children}\n

\n );\n}\n\n// ─── App ──────────────────────────────────────────────────────────────────────\n\nfunction App() {\n const [running, setRunning] = useState(false);\n const [status, setStatus] = useState(\"Idle — click Start to begin.\");\n const [rtpStats, setRtpStats] = useState({\n rtpTimestamp: undefined,\n delta: null,\n ssrc: undefined,\n audioLevel: undefined,\n receiveTs: undefined,\n voiceActivityFlag: undefined,\n });\n const [jitterStats, setJitterStats] = useState({\n jitter: undefined,\n avgJitterBufferDelay: undefined,\n jitterBufferTargetDelay: undefined,\n jitterBufferMinDelay: undefined,\n packetsReceived: undefined,\n packetsLost: undefined,\n packetsDiscarded: undefined,\n totalSamplesReceived: undefined,\n jitterBufferTarget: null,\n });\n const [jbTargetInput, setJbTargetInput] = useState(\"0\");\n const [logs, setLogs] = useState([]);\n\n // Refs for cleanup & live access\n const pcSenderRef = useRef(null);\n const pcReceiverRef = useRef(null);\n const audioCtxRef = useRef(null);\n const oscillatorRef = useRef(null);\n const pollTimerRef = useRef(null);\n const lastRtpTsRef = useRef(null);\n const receiverRef = useRef(null);\n\n // Ring-buffer of raw cumulative snapshots for 5-second windowed averages.\n // Each entry: { ts (ms), delay (s), emitted, targetDelay (s), minDelay (s) }\n interface JBSnapshot {\n ts: number;\n delay: number;\n emitted: number;\n targetDelay: number;\n minDelay: number;\n }\n const jbWindowRef = useRef([]);\n const WINDOW_MS = 5_000;\n\n const addLog = useCallback((msg: string, color = \"text-gray-400\") => {\n setLogs((prev) => {\n const next = [makeEntry(msg, color), ...prev];\n return next.slice(0, 200);\n });\n }, []);\n\n // ─── Start ──────────────────────────────────────────────────────────────────\n\n const start = useCallback(async () => {\n setRunning(true);\n setStatus(\"Setting up WebRTC loopback…\");\n addLog(\"Starting demo…\", \"text-green-400\");\n\n // 1. Synthetic audio — oscillator sweeping 440→880→220 Hz\n const audioCtx = new AudioContext();\n const osc = audioCtx.createOscillator();\n const gain = audioCtx.createGain();\n osc.type = \"sine\";\n osc.frequency.setValueAtTime(440, audioCtx.currentTime);\n osc.frequency.linearRampToValueAtTime(880, audioCtx.currentTime + 4);\n osc.frequency.linearRampToValueAtTime(220, audioCtx.currentTime + 8);\n gain.gain.setValueAtTime(0.3, audioCtx.currentTime);\n osc.connect(gain);\n\n const dest = audioCtx.createMediaStreamDestination();\n gain.connect(dest);\n osc.start();\n\n audioCtxRef.current = audioCtx;\n oscillatorRef.current = osc;\n\n const [track] = dest.stream.getAudioTracks();\n addLog(`Synthetic track: ${track.label}`, \"text-yellow-300\");\n\n // 2. Two peer connections — loopback\n const pcSender = new RTCPeerConnection({ iceServers: [] });\n const pcReceiver = new RTCPeerConnection({ iceServers: [] });\n pcSenderRef.current = pcSender;\n pcReceiverRef.current = pcReceiver;\n\n pcSender.onicecandidate = (e) => e.candidate && pcReceiver.addIceCandidate(e.candidate);\n pcReceiver.onicecandidate = (e) => e.candidate && pcSender.addIceCandidate(e.candidate);\n\n // 3. Add track\n pcSender.addTrack(track, dest.stream);\n\n // 4. Receive track → start polling\n pcReceiver.ontrack = (e) => {\n const receiver = e.receiver;\n receiverRef.current = receiver;\n addLog(`Receiver got track, kind=${e.track.kind}`, \"text-green-300\");\n\n // Attach to silent audio element so browser decodes the stream\n const audio = new Audio();\n audio.srcObject = e.streams[0];\n audio.muted = true;\n audio.play().catch(() => {});\n\n // Poll getSynchronizationSources + getStats every 200 ms\n const timer = window.setInterval(async () => {\n // ── SSRCs / RTP timestamp ──────────────────────────────────────────\n const sources = receiver.getSynchronizationSources();\n if (sources && sources.length > 0) {\n const s = sources[0];\n const rtpTs = s.rtpTimestamp;\n const last = lastRtpTsRef.current;\n const delta =\n last !== null && rtpTs !== undefined\n ? (rtpTs - last + 0x1_0000_0000) % 0x1_0000_0000\n : null;\n if (rtpTs !== undefined) lastRtpTsRef.current = rtpTs;\n\n setRtpStats({\n rtpTimestamp: rtpTs,\n delta,\n ssrc: s.source,\n audioLevel: s.audioLevel,\n receiveTs: s.timestamp,\n voiceActivityFlag: s.voiceActivityFlag,\n });\n }\n\n // ── Jitter buffer stats via getStats() ────────────────────────────\n try {\n const report = await receiver.getStats();\n report.forEach((stat) => {\n if (stat.type !== \"inbound-rtp\") return;\n\n const {\n jitter,\n jitterBufferDelay,\n jitterBufferEmittedCount,\n jitterBufferTargetDelay,\n jitterBufferEmittedCount: emitted2,\n jitterBufferMinimumDelay,\n packetsReceived,\n packetsLost,\n packetsDiscarded,\n totalSamplesReceived,\n } = stat as any;\n\n // ── 5-second sliding-window averages ──────────────────────────\n // Push a new snapshot, then evict entries older than WINDOW_MS.\n // Average = (Δaccumulator over window) / (Δemitted over window)\n const now = performance.now();\n const snap = {\n ts: now,\n delay: jitterBufferDelay ?? 0,\n emitted: jitterBufferEmittedCount ?? 0,\n targetDelay: jitterBufferTargetDelay ?? 0,\n minDelay: jitterBufferMinimumDelay ?? 0,\n };\n jbWindowRef.current.push(snap);\n // Evict samples older than the window\n const cutoff = now - WINDOW_MS;\n while (jbWindowRef.current.length > 1 && jbWindowRef.current[0].ts < cutoff) {\n jbWindowRef.current.shift();\n }\n\n const win = jbWindowRef.current;\n const oldest = win[0];\n const newest = win[win.length - 1];\n const dEmitted = newest.emitted - oldest.emitted;\n\n const avgJBDelay: number | undefined =\n dEmitted > 0\n ? ((newest.delay - oldest.delay) / dEmitted) * 1000\n : undefined;\n\n const avgTargetDelay: number | undefined =\n dEmitted > 0\n ? ((newest.targetDelay - oldest.targetDelay) / dEmitted) * 1000\n : undefined;\n\n const avgMinDelay: number | undefined =\n dEmitted > 0\n ? ((newest.minDelay - oldest.minDelay) / dEmitted) * 1000\n : undefined;\n\n setJitterStats({\n jitter,\n avgJitterBufferDelay: avgJBDelay,\n jitterBufferTargetDelay: avgTargetDelay,\n jitterBufferMinDelay: avgMinDelay,\n packetsReceived,\n packetsLost,\n packetsDiscarded,\n totalSamplesReceived,\n jitterBufferTarget: receiver.jitterBufferTarget ?? null,\n });\n });\n } catch (_) {}\n }, 200);\n\n pollTimerRef.current = timer;\n };\n\n // 5. SDP exchange\n addLog(\"Creating offer…\");\n const offer = await pcSender.createOffer();\n await pcSender.setLocalDescription(offer);\n await pcReceiver.setRemoteDescription(offer);\n\n const answer = await pcReceiver.createAnswer();\n await pcReceiver.setLocalDescription(answer);\n await pcSender.setRemoteDescription(answer);\n\n addLog(\"SDP exchange complete, ICE connecting…\", \"text-cyan-300\");\n setStatus(\"ICE connecting…\");\n\n pcSender.onconnectionstatechange = () => {\n addLog(`Sender state → ${pcSender.connectionState}`);\n if (pcSender.connectionState === \"connected\") {\n setStatus(\"✅ Connected — polling RTP + jitter buffer stats every 200 ms\");\n }\n };\n }, [addLog]);\n\n // ─── Stop ───────────────────────────────────────────────────────────────────\n\n const stop = useCallback(() => {\n if (pollTimerRef.current) clearInterval(pollTimerRef.current);\n oscillatorRef.current?.stop();\n audioCtxRef.current?.close();\n pcSenderRef.current?.close();\n pcReceiverRef.current?.close();\n pollTimerRef.current = null;\n audioCtxRef.current = null;\n oscillatorRef.current = null;\n pcSenderRef.current = null;\n pcReceiverRef.current = null;\n receiverRef.current = null;\n lastRtpTsRef.current = null;\n jbWindowRef.current = [];\n\n setRunning(false);\n setStatus(\"Stopped.\");\n addLog(\"Demo stopped.\", \"text-red-400\");\n setRtpStats({\n rtpTimestamp: undefined,\n delta: null,\n ssrc: undefined,\n audioLevel: undefined,\n receiveTs: undefined,\n voiceActivityFlag: undefined,\n });\n setJitterStats({\n jitter: undefined,\n avgJitterBufferDelay: undefined,\n jitterBufferTargetDelay: undefined,\n jitterBufferMinDelay: undefined,\n packetsReceived: undefined,\n packetsLost: undefined,\n packetsDiscarded: undefined,\n totalSamplesReceived: undefined,\n jitterBufferTarget: null,\n });\n }, [addLog]);\n\n // ─── Set jitterBufferTarget ──────────────────────────────────────────────\n\n const applyJBTarget = useCallback(() => {\n const receiver = receiverRef.current;\n if (!receiver) return;\n const ms = parseFloat(jbTargetInput);\n if (isNaN(ms) || ms < 0 || ms > 4000) {\n addLog(\"jitterBufferTarget must be 0–4000 ms\", \"text-red-400\");\n return;\n }\n try {\n receiver.jitterBufferTarget = ms === 0 ? null : ms;\n addLog(\n `Set jitterBufferTarget = ${ms === 0 ? \"null (auto)\" : ms + \" ms\"}`,\n \"text-cyan-300\"\n );\n } catch (e: any) {\n addLog(`Failed to set jitterBufferTarget: ${e.message}`, \"text-red-400\");\n }\n }, [jbTargetInput, addLog]);\n\n // ─── Render ─────────────────────────────────────────────────────────────────\n\n const fmtMs = (v: number | undefined) =>\n v !== undefined ? v.toFixed(2) + \" ms\" : \"—\";\n\n return (\n

📡 Incoming RTP Timestamp Demo

\n Uses{\" \"}\n RTCRtpReceiver.getSynchronizationSources() and{\" \"}\n RTCRtpReceiver.getStats() to read live RTP +\n jitter buffer metadata from a loopback WebRTC peer connection with synthetic audio.\n

\n\n {/* Controls */}\n

\n \n ▶ Start\n \n \n ■ Stop\n \n

\n\n {/* Status */}\n

{status}

\n\n {/* ── RTP / SSRC stats ── */}\n RTP / SSRC — getSynchronizationSources()\n

\n \n \n \n \n \n \n

\n\n {/* ── Jitter buffer stats ── */}\n Jitter Buffer — inbound-rtp getStats() · 5s sliding window\n

\n \n \n \n \n \n \n \n \n

\n\n {/* ── jitterBufferTarget control ── */}\n

\n receiver.jitterBufferTarget (writable hint)\n

\n setJbTargetInput((e.target as HTMLInputElement).value)}\n class=\"w-28 px-3 py-1.5 bg-gray-800 border border-gray-600 rounded text-sm text-gray-100 tabular-nums\"\n placeholder=\"0–4000\"\n />\n ms (0 = auto)\n \n Apply\n \n \n current:{\" \"}\n \n {jitterStats.jitterBufferTarget === null\n ? \"null (auto)\"\n : jitterStats.jitterBufferTarget + \" ms\"}\n \n \n

\n Influence the tradeoff between playout delay and the risk of running out of audio\n due to network jitter. Watch Avg Target Delay{\" \"}\n change after applying.\n

\n\n {/* Live log */}\n

\n Live Log\n setLogs([])}\n class=\"text-xs text-gray-600 hover:text-gray-300\"\n >\n clear\n \n

\n {logs.map((l) => (\n

\n [{l.time}ms] {l.msg}\n

\n ))}\n

\n\n

\n \n view source\n \n

\n );\n}\n\n// ─── Mount ────────────────────────────────────────────────────────────────────\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[18,95],"pulls","branches",1,"forks","envVars",{"_303":26,"_305":26},"connections",{"_303":26,"_304":26},"count","unfilledCount","emptyCount",{"_49":277,"_13":18,"_79":207,"_59":-5,"_51":52,"_278":279,"_280":24,"_53":327,"_55":26,"_82":208,"_282":-5,"_83":30,"_283":-5,"_318":328,"_17":329},{"_49":291,"_13":95,"_79":94,"_59":207,"_51":52,"_278":202,"_280":24,"_53":324,"_55":152,"_82":96,"_282":293,"_83":30,"_283":-5,"_318":325,"_17":326},{"_49":287,"_13":81,"_79":80,"_59":207,"_51":52,"_278":56,"_280":24,"_53":321,"_55":26,"_82":21,"_282":289,"_83":30,"_283":-5,"_318":322,"_17":323},{"_49":310,"_13":311,"_79":312,"_59":-5,"_51":52,"_278":313,"_280":24,"_53":314,"_55":315,"_82":316,"_282":317,"_83":30,"_283":-5,"_318":319,"_17":320},"9f9e57a8-44d0-11f1-88ec-42b51c65c3df","main.ts","db75896e-44cf-11f1-aa67-42b51c65c3df",7,["D",1777579824682],3,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Error handling — full stack traces in logs\napp.onError((err) => Promise.reject(err));\n\n// Source redirect — view-source link in the SPA\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve frontend assets (transpiles TSX on the fly)\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// SPA catch-all — serve the HTML shell for every other route\napp.get(\"*\", (c) => serveFile(\"/frontend/index.html\", import.meta.url));\n\nexport default app.fetch;\n","children",[],[311],["D",1777579778907],[],[18,81],["D",1777587340595],[],[18,95],["D",1777579775219],[307,308],[18],["D",1777579495570],{"_11":12,"_255":86},{"_11":12,"_251":-5,"_85":86,"_31":84,"_252":253,"_254":30},{"_55":202,"_13":16,"_49":52,"_243":210,"_244":-5,"_245":-5,"_246":-5,"_247":-5,"_248":-5,"_249":14,"_250":12},"ctx",{"_69":-5,"_274":367,"_368":369,"_370":371,"_372":30,"_373":30,"_374":30,"_375":24,"_376":-5,"_377":-7,"_378":-7,"_379":26,"_380":30,"_381":30,"_382":-5,"_383":30,"_384":30,"_385":30,"_386":-5},"ENV",{"_338":339,"_340":341,"_342":16,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend