|
|
<!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> |
