47 lines
2.0 KiB
HTML
47 lines
2.0 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>开始直播 · 直播 SFU 分流 Demo</title>
|
||
<link rel="stylesheet" href="/static/styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="topbar">
|
||
<div class="brand">直播 SFU 分流 Demo <small>Cloudflare Realtime · SRS</small></div>
|
||
<nav><a href="/">首页</a><a href="/watch">观看直播</a><a href="/login">登录</a><span id="navAuth" class="muted" style="margin-left:12px;"></span></nav>
|
||
</div>
|
||
<div class="band">
|
||
<div class="hero"><h1>开始直播</h1><p>房间 <b id="roomName">demo</b> · 选择分发后端，一路推流将扇出到所选 SFU。</p></div>
|
||
<div class="two">
|
||
<div class="card">
|
||
<h3>本地预览</h3>
|
||
<video id="local" autoplay playsinline muted></video>
|
||
<div class="check">
|
||
<label><input type="checkbox" name="backend" value="cloudflare" checked /> Cloudflare Realtime（主 SFU）</label>
|
||
</div>
|
||
<div class="check">
|
||
<label><input type="checkbox" name="backend" value="srs" checked /> SRS（本地对照）</label>
|
||
</div>
|
||
<div class="row" style="margin-top:10px">
|
||
<button id="start">开始推流</button>
|
||
<button id="stop" class="danger">停止推流</button>
|
||
</div>
|
||
<div id="status" style="margin-top:10px"><span class="muted">未发布</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>分发状态</h3>
|
||
<div id="status2" class="muted">尚未开始</div>
|
||
<h3 style="margin-top:14px">日志</h3>
|
||
<div id="log" class="log"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/static/app.js"></script>
|
||
<script>
|
||
LiveSFU.authCheck().then(chk=>{const el=document.getElementById('navAuth'); if(chk.authenticated){el.textContent='已登录：'+chk.username+'/'+chk.role;} else {el.innerHTML='<a href="/login">未登录</a>';}});
|
||
LiveSFU.initPublish();
|
||
</script>
|
||
</body>
|
||
</html>
|