File size: 6,492 Bytes
c04dbce eb9b350 c04dbce eb9b350 9b97325 eb9b350 c04dbce f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 f68f919 eb9b350 c04dbce |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
<!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();
// Stream video
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';
}
});
// Update performance metrics
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;
}
});
// Handle controls
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> |