| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>OBS AI Background Remover</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.jsdelivr.net/npm/obs-websocket-js@5"></script> |
| | </head> |
| | <body> |
| | <div class="card"> |
| | <h1>Live Preview</h1> |
| | <div style="position: relative;"> |
| | <video id="preview" autoplay style="width: 100%; height: auto;"></video> |
| | <p id="loading" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">Loading AI Model...</p> |
| | </div> |
| | <p id="no-video">No video source selected</p> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h1>Background Replacement</h1> |
| | <label><input type="radio" name="bg-type" value="transparent"> Transparent</input></label> |
| | <label><input type="radio" name="bg-type" value="black"> Solid Black</input></label> |
| | <label><input type="radio" name="bg-type" value="gray"> Solid Gray</input></label> |
| | <label><input type="radio" name="bg-type" value="green"> Solid Green</input></label> |
| | <label><input type="radio" name="bg-type" value="custom-image"> Custom Image <input type="file" id="custom-image-input" accept="image/*"></input></label> |
| | <label><input type="radio" name="bg-type" value="custom-video"> Custom Video <input type="file" id="custom-video-input" accept="video/*"></input></label> |
| | <label><input type="radio" name="bg-type" value="blurred" id="blur-checkbox"> Blurred</input></label> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h1>Controls</h1> |
| | <label>Video Source: <select id="video-source"><option>Select a video source</option></select></label> |
| | <label><input type="checkbox" id="enable-bg-removal"> Enable Background Removal</input></label> |
| | <label><input type="checkbox" id="show-preview"> Show Preview</input></label> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h1>Performance</h1> |
| | <p>Processing Time: <span id="processing-time">0 ms</span></p> |
| | <p>FPS: <span id="fps">0</span></p> |
| | </div> |
| |
|
| | <div class="card"> |
| | <h1>OBS Integration</h1> |
| | <p>Add this as a Browser Source in OBS with these settings:</p> |
| | <p>Width: 1920</p> |
| | <p>Height: 1080</p> |
| | <p>Custom CSS: None</p> |
| | <button id="copy-url">Copy OBS Browser Source URL</button> |
| | </div> |
| |
|
| | <script> |
| | const obs = new OBSWebSocket(); |
| | |
| | async function connectToOBS() { |
| | try { |
| | await obs.connect('ws://localhost:4455', 'your-password'); |
| | console.log('Connected to OBS WebSocket'); |
| | } catch (err) { |
| | console.error('Failed to connect to OBS:', err); |
| | } |
| | } |
| | |
| | connectToOBS(); |
| | |
| | |
| | obs.on('SourceFilterVideoFrame', (data) => { |
| | if (data.sourceName === 'AI_remove_bg') { |
| | const video = document.getElementById('preview'); |
| | const blob = new Blob([data.frameData], { type: 'video/webm' }); |
| | video.src = URL.createObjectURL(blob); |
| | document.getElementById('loading').style.display = 'none'; |
| | document.getElementById('no-video').style.display = 'none'; |
| | } |
| | }); |
| | |
| | |
| | obs.on('CustomEvent', (data) => { |
| | if (data.event === 'AI_remove_bg_metrics') { |
| | document.getElementById('processing-time').textContent = `${data.processingTime} ms`; |
| | document.getElementById('fps').textContent = data.fps; |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('enable-bg-removal').addEventListener('change', async (e) => { |
| | await obs.call('SetSourceFilterSettings', { |
| | sourceName: 'AI_remove_bg', |
| | filterName: 'AI_remove_bg', |
| | filterSettings: { seg_disen: !e.target.checked } |
| | }); |
| | }); |
| | |
| | document.getElementById('blur-checkbox').addEventListener('change', async (e) => { |
| | await obs.call('SetSourceFilterSettings', { |
| | sourceName: 'AI_remove_bg', |
| | filterName: 'AI_remove_bg', |
| | filterSettings: { blurbgbool: e.target.checked } |
| | }); |
| | }); |
| | |
| | document.getElementById('custom-image-input').addEventListener('change', async (e) => { |
| | const file = e.target.files[0]; |
| | if (file) { |
| | const reader = new FileReader(); |
| | reader.onload = async () => { |
| | await obs.call('SetSourceFilterSettings', { |
| | sourceName: 'AI_remove_bg', |
| | filterName: 'AI_remove_bg', |
| | filterSettings: { setbg: true, bgpic: reader.result } |
| | }); |
| | }; |
| | reader.readAsDataURL(file); |
| | } |
| | }); |
| | |
| | document.querySelectorAll('input[name="bg-type"]').forEach((input) => { |
| | input.addEventListener('change', async (e) => { |
| | let settings = {}; |
| | switch (e.target.value) { |
| | case 'transparent': |
| | settings = { setbg: false, setcolor: false, blurbgbool: false }; |
| | break; |
| | case 'black': |
| | settings = { setcolor: true, bgColor: 0x000000 }; |
| | break; |
| | case 'gray': |
| | settings = { setcolor: true, bgColor: 0x808080 }; |
| | break; |
| | case 'green': |
| | settings = { setcolor: true, bgColor: 0x00FF00 }; |
| | break; |
| | case 'blurred': |
| | settings = { blurbgbool: true, setbg: false, setcolor: false }; |
| | break; |
| | } |
| | await obs.call('SetSourceFilterSettings', { |
| | sourceName: 'AI_remove_bg', |
| | filterName: 'AI_remove_bg', |
| | filterSettings: settings |
| | }); |
| | }); |
| | }); |
| | |
| | document.getElementById('copy-url').addEventListener('click', () => { |
| | const url = window.location.href; |
| | navigator.clipboard.writeText(url).then(() => { |
| | alert('URL copied to clipboard!'); |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
