62 lines
2.7 KiB
HTML
62 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>BridgeSwarm – Screenshare</title>
|
||
<link rel="stylesheet" href="../shared/theme.css">
|
||
<link rel="stylesheet" href="../shared/chrome.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="../shared/boot.js"></script>
|
||
<script>if (BridgeSwarmExamples.guardFileProtocol('screenshare/')) { /* blocked */ }</script>
|
||
</head>
|
||
<body>
|
||
<div class="bs-page bs-page--wide">
|
||
<a class="bs-back" href="../">← Examples</a>
|
||
<p class="bs-brand">BridgeSwarm</p>
|
||
<h1 class="bs-title">Screenshare</h1>
|
||
<p class="bs-lede">Live WebRTC video. BridgeSwarm carries signaling only — not host ffmpeg.</p>
|
||
<div class="bs-banner bs-banner--info">
|
||
This demo is <strong>WebRTC</strong> (browser encode). For real host
|
||
<code>bare-ffmpeg</code> live encode → MSE, open
|
||
<a href="../live-encode/" style="color:var(--accent-2)">Live Encode</a>.
|
||
Nearline clip jobs:
|
||
<a href="../clip-studio/" style="color:var(--accent-2)">Clip Studio</a>.
|
||
</div>
|
||
<p class="bs-status" id="status">Waiting for extension…</p>
|
||
|
||
<div class="bs-section">
|
||
<div class="bs-row">
|
||
<input type="text" id="topic" placeholder="Topic" value="bridge-swarm-screenshare">
|
||
<button class="primary" id="btnJoin">Join</button>
|
||
<button class="danger" id="btnLeave" disabled>Leave</button>
|
||
</div>
|
||
<div class="bs-meta" id="peers">Peers: 0</div>
|
||
<div class="bs-meta" id="publicKey">Your public key: (join to generate)</div>
|
||
<div class="bs-row">
|
||
<button class="primary" id="btnShare" disabled>Share my screen</button>
|
||
<button class="secondary" id="btnStopShare" disabled style="display:none;">Stop sharing</button>
|
||
<button class="ghost" id="btnPip" disabled style="display:none;">Picture-in-Picture</button>
|
||
<span class="bs-pill" id="streamState"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-stage video-wrap" id="videoWrap">
|
||
<video id="remoteVideo" autoplay playsinline muted controls></video>
|
||
<div class="placeholder-block" id="placeholderBlock">
|
||
<span class="placeholder" id="videoPlaceholder">Join a topic. Share your screen, or wait for a peer.</span>
|
||
<button class="primary" id="btnPlay" style="display:none;">Play</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="preview-wrap" id="previewWrap" style="display:none;">
|
||
<p class="bs-meta">Your shared screen (local preview)</p>
|
||
<div class="bs-stage">
|
||
<video id="localPreview" autoplay playsinline muted controls></video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|