Skip to content

Commit 8119953

Browse files
jordanhubbardjordanhubbard
committed
streaming: emit UI-local webrtc-client URL; add launcher page that passes server=host:port
1 parent 92dd657 commit 8119953

File tree

2 files changed

+102
-2
lines changed

2 files changed

+102
-2
lines changed

‎kit_playground/backend/routes/project_routes.py‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -491,8 +491,11 @@ def run_project():
491491
original_host = request.headers.get('X-Forwarded-Host', request.host)
492492
client_host = registry.extract_client_host(original_host)
493493

494-
# Get streaming URL with remote hostname. Default to HTTP unless explicitly configured.
495-
streaming_url = get_streaming_url(port=streaming_port, hostname=client_host, protocol='http')
494+
# Build a UI-local WebRTC client URL that passes the Kit streaming server address.
495+
# The Kit streaming port does not serve static web content; we host a simple launcher page
496+
# under the UI at /webrtc-client which takes ?server=<host:port>.
497+
streaming_server = f"{client_host}:{streaming_port}"
498+
streaming_url = f"/webrtc-client?server={streaming_server}"
496499

497500
logger.info(f"[STREAMING URL] Request.host: {request.host}")
498501
logger.info(f"[STREAMING URL] X-Forwarded-Host: {request.headers.get('X-Forwarded-Host', 'not set')}")
@@ -525,6 +528,7 @@ def wait_and_notify():
525528
socketio.emit('streaming_ready', {
526529
'project': project_name,
527530
'url': streaming_url,
531+
'server': streaming_server,
528532
'port': streaming_port
529533
})
530534
else:
@@ -608,6 +612,7 @@ def stream_output():
608612
'success': True,
609613
'previewUrl': streaming_url,
610614
'streamingUrl': streaming_url,
615+
'streamingServer': streaming_server,
611616
'streaming': True,
612617
'port': streaming_port
613618
}

‎kit_playground/ui/public/webrtc-client/index.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Kit App Streaming - Web Client Launcher</title>
7+
<style>
8+
html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: #0f1114; color: #e6e6e6; }
9+
.container { max-width: 840px; margin: 0 auto; padding: 32px 16px; }
10+
.card { background: #15181d; border: 1px solid #2a2f37; border-radius: 8px; padding: 20px; }
11+
.title { margin: 0 0 8px; font-size: 20px; }
12+
.muted { color: #9aa0a6; font-size: 13px; }
13+
.row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
14+
input { flex: 1; padding: 8px 10px; background: #0f1114; color: #e6e6e6; border: 1px solid #2a2f37; border-radius: 6px; }
15+
button { padding: 8px 12px; border-radius: 6px; border: 0; cursor: pointer; }
16+
.primary { background: #76b900; color: #0b0e11; }
17+
.secondary { background: #22262c; color: #e6e6e6; border: 1px solid #2a2f37; }
18+
a.link { color: #76b900; text-decoration: none; }
19+
a.link:hover { text-decoration: underline; }
20+
.warn { background: #3a2e00; border: 1px solid #5a4a00; color: #ffd666; padding: 10px 12px; border-radius: 6px; margin-top: 16px; font-size: 13px; }
21+
</style>
22+
</head>
23+
<body>
24+
<div class="container">
25+
<h1 class="title">Kit App Streaming - Web Client Launcher</h1>
26+
<p class="muted">This page launches a WebRTC client and points it at your running Kit streaming server.</p>
27+
28+
<div class="card">
29+
<label for="server">Streaming server</label>
30+
<div class="row">
31+
<input id="server" type="text" placeholder="host:port" />
32+
<button class="secondary" id="copy">Copy</button>
33+
<button class="primary" id="open">Open Client</button>
34+
</div>
35+
<div class="warn" id="note" style="display:none"></div>
36+
<p class="muted" style="margin-top:12px">
37+
Don’t see a client? You can use the official WebRTC client. If you already host it at <code>/ov-web-client/</code> on this server, the button above will open it. Otherwise, clone and run the client locally, then paste the server here.
38+
</p>
39+
<ul class="muted">
40+
<li>Expected format: <code>jordanh-dev.hrd.nvidia.com:47995</code></li>
41+
<li>Self-signed certificates are typical in development; accept the browser warning if prompted.</li>
42+
</ul>
43+
</div>
44+
45+
<p style="margin-top:16px" class="muted">
46+
Tip: This page can be opened automatically from the Playground when streaming is ready.
47+
</p>
48+
</div>
49+
50+
<script>
51+
(function () {
52+
const params = new URLSearchParams(window.location.search);
53+
const serverParam = params.get('server') || '';
54+
const input = document.getElementById('server');
55+
const copy = document.getElementById('copy');
56+
const open = document.getElementById('open');
57+
const note = document.getElementById('note');
58+
input.value = serverParam;
59+
60+
copy.addEventListener('click', async () => {
61+
try {
62+
await navigator.clipboard.writeText(input.value);
63+
copy.textContent = 'Copied';
64+
setTimeout(() => (copy.textContent = 'Copy'), 1200);
65+
} catch {}
66+
});
67+
68+
function openOvClient() {
69+
const server = input.value.trim();
70+
if (!server) {
71+
input.focus();
72+
return;
73+
}
74+
75+
// Prefer a locally hosted ov-web-client if available (static under this UI origin),
76+
// falling back to relative path so reverse proxies can host it.
77+
const localClient = `/ov-web-client/?server=${encodeURIComponent(server)}`;
78+
// Open in a new tab; if the local path 404s, user can still copy the address.
79+
window.open(localClient, '_blank', 'noopener,noreferrer');
80+
note.style.display = 'block';
81+
note.textContent = 'If the client does not load, ensure ov-web-client is hosted at /ov-web-client/ or run it locally and paste the server address there.';
82+
}
83+
84+
open.addEventListener('click', openOvClient);
85+
86+
// Auto-open when server is provided
87+
if (serverParam) {
88+
setTimeout(openOvClient, 250);
89+
}
90+
})();
91+
</script>
92+
</body>
93+
</html>
94+
95+

0 commit comments

Comments
 (0)