88 lines
3.3 KiB
HTML
88 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>BridgeSwarm – Clip 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('clip-studio/')) { /* 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">Clip Studio</h1>
|
||
<p class="bs-lede">
|
||
Record screen or camera in the browser, then batch-process with host
|
||
<code>bare-ffmpeg</code>. Nearline — not a live encode pipeline.
|
||
</p>
|
||
|
||
<div class="bs-banner bs-banner--info">
|
||
<strong>Nearline batch</strong>: Capture → <code>MediaRecorder</code> →
|
||
<code>transcode</code> / <code>extractFrame</code>.
|
||
For continuous host <code>bare-ffmpeg</code> encode, use
|
||
<a href="../live-encode/" style="color:var(--accent-2)">Live Encode</a>.
|
||
For browser WebRTC A/V, use
|
||
<a href="../screenshare/" style="color:var(--accent-2)">Screenshare</a>.
|
||
</div>
|
||
<div id="missing" class="bs-banner bs-banner--warn" hidden>
|
||
Media pack unavailable. Rebuild the default host and repair macOS codesign if needed.
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>1. Capture</h2>
|
||
<div class="bs-row">
|
||
<button class="primary" id="btnScreen">Share screen</button>
|
||
<button class="secondary" id="btnCamera">Camera</button>
|
||
<button class="danger" id="btnStopCapture" disabled>Stop capture</button>
|
||
</div>
|
||
<div class="bs-stage" id="liveStage">
|
||
<video id="live" autoplay playsinline muted></video>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>2. Record clip</h2>
|
||
<div class="bs-row">
|
||
<label class="bs-meta">Max seconds
|
||
<input type="number" id="maxSec" value="8" min="2" max="20" style="width:4.5rem;flex:none;margin-left:0.35rem">
|
||
</label>
|
||
<button class="primary" id="btnRecord" disabled>Record</button>
|
||
<button class="secondary" id="btnStopRecord" disabled>Stop</button>
|
||
<span id="recState" class="bs-pill"></span>
|
||
</div>
|
||
<div class="bs-stage" id="clipStage" hidden>
|
||
<video id="clip" controls></video>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>3. Host ffmpeg</h2>
|
||
<div class="bs-row">
|
||
<button class="primary" id="btnProcess" disabled>Upload + transcode WebM</button>
|
||
<button class="secondary" id="btnPoster" disabled>Extract poster frame</button>
|
||
<button class="ghost" id="btnDrive" disabled>Save to Hyperdrive</button>
|
||
<span id="progress" class="bs-meta"></span>
|
||
</div>
|
||
<div class="bs-row results">
|
||
<div class="bs-stage" id="outStage" hidden>
|
||
<video id="out" controls></video>
|
||
</div>
|
||
<div class="bs-stage" id="posterStage" hidden>
|
||
<img id="poster" alt="Poster frame">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-section">
|
||
<h2>Log</h2>
|
||
<div class="bs-log" id="log"></div>
|
||
</div>
|
||
</div>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|