| export function initObsGuide(): void { |
| const stageEl = document.querySelector<HTMLDivElement>('.stage'); |
| if (!stageEl) throw new Error('initObsGuide: .stage not in DOM yet'); |
|
|
| stageEl.insertAdjacentHTML( |
| 'beforeend', |
| ` |
| <div class="obs-overlay" id="obsOverlay" hidden> |
| <div class="obs-shell"> |
| <div class="obs-topbar"> |
| <span class="obs-title">Use your filter in Zoom</span> |
| <button class="obs-close" id="obsClose" type="button" aria-label="Close">×</button> |
| </div> |
| <p class="obs-lede">Keep this page open in Chrome — OBS will capture the window. Your filter appears in Zoom with full quality.</p> |
| <ol class="obs-steps"> |
| <li> |
| <span class="obs-step-num">1</span> |
| <div class="obs-step-body"> |
| <strong>Download OBS Studio</strong> — free, one-time install<br> |
| <a class="obs-link" href="https://obsproject.com" target="_blank" rel="noopener noreferrer">obsproject.com</a> |
| </div> |
| </li> |
| <li> |
| <span class="obs-step-num">2</span> |
| <div class="obs-step-body"> |
| <strong>Add a Window Capture source</strong><br> |
| In OBS: click <kbd>+</kbd> under Sources → choose <em>Window Capture</em> → select your Chrome window from the dropdown |
| </div> |
| </li> |
| <li> |
| <span class="obs-step-num">3</span> |
| <div class="obs-step-body"> |
| <strong>Crop to the app</strong> (optional)<br> |
| Hold <kbd>Alt</kbd> and drag the edges of the source in the preview to trim out browser chrome |
| </div> |
| </li> |
| <li> |
| <span class="obs-step-num">4</span> |
| <div class="obs-step-body"> |
| <strong>Start Virtual Camera</strong><br> |
| Click <em>Start Virtual Camera</em> in the bottom-right panel of OBS |
| </div> |
| </li> |
| <li> |
| <span class="obs-step-num">5</span> |
| <div class="obs-step-body"> |
| <strong>Select it in Zoom</strong><br> |
| Zoom → Settings → Video → Camera → pick <em>OBS Virtual Camera</em> |
| </div> |
| </li> |
| </ol> |
| <p class="obs-tip">Keep both this page and OBS open during your call. Minimising Chrome may pause the capture — use a separate monitor or keep it in the background at a small size.</p> |
| </div> |
| </div> |
| `, |
| ); |
|
|
| const overlay = document.querySelector<HTMLDivElement>('#obsOverlay')!; |
| const closeBtn = document.querySelector<HTMLButtonElement>('#obsClose')!; |
|
|
| function open() { |
| overlay.hidden = false; |
| } |
| function close() { |
| overlay.hidden = true; |
| } |
|
|
| closeBtn.addEventListener('click', close); |
| overlay.addEventListener('click', (e) => { |
| if (e.target === overlay) close(); |
| }); |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'Escape' && !overlay.hidden) close(); |
| }); |
|
|
| const triggerBtn = document.querySelector<HTMLButtonElement>('#obsGuideBtn'); |
| triggerBtn?.addEventListener('click', open); |
| } |
|
|
