SFU M0: browser lab E2E client for Janus VideoRoom.

Add lab page with screen-share publisher and subscriber viewer, join API
feed support, shared session auth, static assets route, and lab docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Anton Afanasyeu
2026-08-07 22:15:42 +02:00
parent 61248e6c8b
commit 0c5c079179
7 changed files with 374 additions and 14 deletions

65
public/lab.php Normal file
View File

@@ -0,0 +1,65 @@
<?php
declare(strict_types=1);
require_once dirname(__DIR__) . '/src/bootstrap.php';
$user = sfuRequireAuth();
$turnHost = sfuConfig('turn_host', '');
?>
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SFU Lab — Browser E2E</title>
<link rel="stylesheet" href="/app/androidcast_project/issues/assets/css/app.css">
<style>
.lab-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px) { .lab-grid { grid-template-columns:1fr; } }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px; }
.panel h2 { margin:0 0 12px; font-size:1.05rem; }
video { width:100%; max-height:240px; background:#000; border-radius:6px; }
.log { max-height:140px; overflow:auto; font:12px/1.4 monospace; color:var(--muted); margin-top:10px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }
input[type=number], input[type=text] { background:var(--surface2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:6px 10px; min-width:120px; }
.btn { padding:6px 14px; border-radius:6px; border:none; cursor:pointer; font-weight:600; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger { background:rgba(248,113,113,.2); color:var(--danger); }
.hint { color:var(--muted); font-size:.82rem; margin:0 0 14px; }
</style>
</head>
<body>
<div class="layout" style="max-width:1100px;margin:0 auto;padding:24px 16px">
<h1 style="margin:0 0 6px">SFU Lab (M0)</h1>
<p class="hint">
Janus VideoRoom browser E2E — signed in as <?= htmlspecialchars($user['email'] ?? 'user') ?>.
Create a room on the <a href="/app/androidcast_project/sfu/dashboard">dashboard</a>, paste Janus room id below.
Open a second browser/tab as subscriber with the publisher feed id.
<?php if ($turnHost): ?> TURN: <?= htmlspecialchars($turnHost) ?>:3478. <?php endif; ?>
</p>
<div class="row">
<label>Janus room id <input id="room-id" type="number" placeholder="e.g. 1234567"></label>
<label>Publisher feed id <input id="feed-id" type="number" placeholder="after publish"></label>
</div>
<div class="lab-grid">
<div class="panel">
<h2>Publisher (screen share)</h2>
<video id="pub-video" autoplay playsinline muted></video>
<div class="row">
<button class="btn btn-primary" id="btn-pub">Share screen &amp; publish</button>
<button class="btn btn-danger" id="btn-stop-pub">Stop</button>
</div>
<div class="log" id="pub-log"></div>
</div>
<div class="panel">
<h2>Subscriber (viewer)</h2>
<video id="sub-video" autoplay playsinline></video>
<div class="row">
<button class="btn btn-primary" id="btn-sub">Subscribe</button>
</div>
<div class="log" id="sub-log"></div>
</div>
</div>
</div>
<script src="/app/androidcast_project/sfu/assets/sfu-lab.js" defer></script>
</body>
</html>