76 lines
2.7 KiB
HTML
76 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 – Media Capability Demo</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script>
|
||
if (location.protocol === 'file:') {
|
||
document.documentElement.innerHTML =
|
||
'<body style="margin:0;font:15px/1.5 Segoe UI,system-ui,sans-serif;background:#0f1419;color:#e7ecf3">' +
|
||
'<div style="max-width:36rem;margin:10vh auto;padding:24px;background:#1a2332;border:1px solid #2a3548;border-radius:14px">' +
|
||
'<h1 style="margin:0 0 10px;font-size:1.25rem">Open this demo over HTTP</h1>' +
|
||
'<p style="color:#8b9bb4">From the BridgeSwarm repo root run:</p>' +
|
||
'<pre style="padding:12px;background:#0f1419;border-radius:10px;color:#2dd4bf">npm run examples</pre>' +
|
||
'<p style="color:#8b9bb4">Then open <code>http://127.0.0.1:4173/media-demo/</code></p>' +
|
||
'</div></body>';
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<h1>BridgeSwarm – Media Capability</h1>
|
||
<p>Uses optional host pack <code>media</code> (<code>bare-media</code> + <code>bare-ffmpeg</code>) via <code>BridgeSwarm.media.*</code>.</p>
|
||
|
||
<div id="missing" class="banner warn" hidden>
|
||
<strong>Media pack not installed.</strong>
|
||
Build with <code>npm run build:dist:media</code>, then
|
||
<code>npm run install:capability:media</code>, fully quit the browser, and reload.
|
||
See <code>docs/CAPABILITIES.md</code>.
|
||
</div>
|
||
<div id="ready" class="banner ok" hidden>
|
||
Media capability available. Pick an image or short video below.
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>Input</h2>
|
||
<div class="row">
|
||
<input type="file" id="file" accept="image/*,video/*">
|
||
<button class="primary" id="probe" disabled>Probe info</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>Image → WebP</h2>
|
||
<div class="row">
|
||
<button class="secondary" id="transform" disabled>Transform (max 640px)</button>
|
||
</div>
|
||
<img id="preview" alt="Transformed preview" hidden>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>Video frame</h2>
|
||
<div class="row">
|
||
<input type="number" id="frameIndex" value="0" min="0" step="1" title="Frame index">
|
||
<button class="secondary" id="extract" disabled>Extract frame</button>
|
||
</div>
|
||
<img id="frame" alt="Extracted frame" hidden>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>Transcode (optional)</h2>
|
||
<div class="row">
|
||
<button class="secondary" id="transcode" disabled>Transcode → WebM</button>
|
||
<span id="progress" class="muted"></span>
|
||
</div>
|
||
<video id="outVideo" controls hidden></video>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>Log</h2>
|
||
<div id="log" class="log"></div>
|
||
</div>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|