110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BridgeSwarm Examples</title>
|
|
<link rel="stylesheet" href="./shared/theme.css">
|
|
<link rel="stylesheet" href="./shared/chrome.css">
|
|
</head>
|
|
<body>
|
|
<div class="bs-hub">
|
|
<p class="bs-brand">BridgeSwarm</p>
|
|
<h1 class="bs-title">Examples</h1>
|
|
<p class="bs-lede">
|
|
Interactive demos for Hyperswarm in the browser. Install the BridgeSwarm extension
|
|
and native host first, then open any demo in two tabs to try P2P.
|
|
</p>
|
|
|
|
<div class="bs-banner bs-banner--warn" id="fileWarn" hidden>
|
|
You opened this page via <code>file://</code>. Run <code>npm run examples</code> and use
|
|
<code>http://127.0.0.1:4173/</code> instead.
|
|
</div>
|
|
|
|
<div class="bs-category">Connect</div>
|
|
<div class="bs-grid">
|
|
<a class="bs-card" href="./chat/">
|
|
<h2>Chat</h2>
|
|
<p>Minimal P2P chat over a topic — join, see peers, send messages.</p>
|
|
<span class="bs-path">/chat/</span>
|
|
</a>
|
|
<a class="bs-card" href="./chat-advanced/">
|
|
<h2>Advanced Chat</h2>
|
|
<p>Rooms, presence, markdown, emoji, and file sharing.</p>
|
|
<span class="bs-path">/chat-advanced/</span>
|
|
</a>
|
|
<a class="bs-card" href="./firewall-room/">
|
|
<h2>Firewall Room</h2>
|
|
<p>Allowlist, denylist, and ban peers with host-side firewall.</p>
|
|
<span class="bs-path">/firewall-room/</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bs-category">Collaborate</div>
|
|
<div class="bs-grid">
|
|
<a class="bs-card" href="./whiteboard/">
|
|
<h2>Whiteboard</h2>
|
|
<p>Collaborative drawing synced peer-to-peer in real time.</p>
|
|
<span class="bs-path">/whiteboard/</span>
|
|
</a>
|
|
<a class="bs-card" href="./screenshare/">
|
|
<h2>Screenshare</h2>
|
|
<p>Live WebRTC media; BridgeSwarm used only for signaling.</p>
|
|
<span class="bs-path">/screenshare/</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bs-category">Data</div>
|
|
<div class="bs-grid">
|
|
<a class="bs-card" href="./data-demo/">
|
|
<h2>Data API</h2>
|
|
<p>Hypercore, Hyperbee, Hyperdrive, Autobase, and Hyperdb.</p>
|
|
<span class="bs-path">/data-demo/</span>
|
|
</a>
|
|
<a class="bs-card" href="./sync-demo/">
|
|
<h2>Auto-replicate</h2>
|
|
<p>Hypercore sync across peers with setAutoReplicate.</p>
|
|
<span class="bs-path">/sync-demo/</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bs-category">Media</div>
|
|
<div class="bs-grid">
|
|
<a class="bs-card" href="./media-demo/">
|
|
<h2>Media Studio</h2>
|
|
<p>Probe, WebP transform, extract frame, and transcode via host ffmpeg.</p>
|
|
<span class="bs-path">/media-demo/</span>
|
|
</a>
|
|
<a class="bs-card" href="./clip-studio/">
|
|
<h2>Clip Studio</h2>
|
|
<p>Record screen/camera, then batch-transcode with bare-ffmpeg (nearline).</p>
|
|
<span class="bs-path">/clip-studio/</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bs-category">Platform</div>
|
|
<div class="bs-grid">
|
|
<a class="bs-card" href="./sdk-demo/">
|
|
<h2>SDK Demo</h2>
|
|
<p>Swarm lifecycle, raw messages, and Protomux channels.</p>
|
|
<span class="bs-path">/sdk-demo/</span>
|
|
</a>
|
|
<a class="bs-card" href="./hrpc-demo/">
|
|
<h2>HRPC Demo</h2>
|
|
<p>Typed RPC (ping / streams) over Hyperswarm connections.</p>
|
|
<span class="bs-path">/hrpc-demo/</span>
|
|
</a>
|
|
</div>
|
|
|
|
<footer class="bs-footer">
|
|
Start with <code>npm run examples</code> from the BridgeSwarm repo root.
|
|
</footer>
|
|
</div>
|
|
<script>
|
|
if (location.protocol === 'file:') {
|
|
document.getElementById('fileWarn').hidden = false;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|