45 lines
1.9 KiB
HTML
45 lines
1.9 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="/publish">开始直播</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="remote" autoplay playsinline></video>
|
||
<div class="check">
|
||
<label><input type="radio" name="watchBackend" value="cloudflare" checked /> Cloudflare Realtime（主 SFU）</label>
|
||
</div>
|
||
<div class="check">
|
||
<label><input type="radio" name="watchBackend" value="srs" /> 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="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.initWatch();
|
||
</script>
|
||
</body>
|
||
</html>
|