76 lines
2.6 KiB
HTML
76 lines
2.6 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 Studio</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('media-demo/')) { /* blocked */ }</script>
|
||
</head>
|
||
<body>
|
||
<div class="bs-page">
|
||
<a class="bs-back" href="../">← Examples</a>
|
||
<p class="bs-brand">BridgeSwarm</p>
|
||
<h1 class="bs-title">Media Studio</h1>
|
||
<p class="bs-lede">Host <code>bare-media</code> + <code>bare-ffmpeg</code> via <code>BridgeSwarm.media.*</code> (included in the default host).</p>
|
||
|
||
<div id="missing" class="bs-banner bs-banner--warn" hidden>
|
||
<strong>Media pack not available.</strong>
|
||
Rebuild/reinstall the host, then on macOS run <code>npm run repair:macos</code>, fully quit the browser, and reload.
|
||
</div>
|
||
<div id="ready" class="bs-banner bs-banner--ok" hidden>
|
||
Media ready. Pick an image or short video below.
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>Input</h2>
|
||
<div class="bs-row">
|
||
<input type="file" id="file" accept="image/*,video/*">
|
||
<button class="primary" id="probe" disabled>Probe info</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>Image → WebP</h2>
|
||
<div class="bs-row">
|
||
<button class="secondary" id="transform" disabled>Transform (max 640px)</button>
|
||
</div>
|
||
<div class="bs-stage" id="previewStage" hidden>
|
||
<img id="preview" alt="Transformed preview">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>Video frame</h2>
|
||
<div class="bs-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>
|
||
<div class="bs-stage" id="frameStage" hidden>
|
||
<img id="frame" alt="Extracted frame">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>Transcode</h2>
|
||
<div class="bs-row">
|
||
<button class="secondary" id="transcode" disabled>Transcode → WebM</button>
|
||
<span id="progress" class="bs-meta"></span>
|
||
</div>
|
||
<div class="bs-stage" id="videoStage" hidden>
|
||
<video id="outVideo" controls></video>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>Log</h2>
|
||
<div id="log" class="bs-log"></div>
|
||
</div>
|
||
</div>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|