feat(webrtc): add background blur and virtual background options

2026-07-06 13:08:59 +00:00
parent ed408c4044
commit 239640975f
4 changed files with 108 additions and 0 deletions
@@ -102,6 +102,29 @@ export function DeviceSettingsModal({ onClose }: Props) {
              ))}
            </select>
          </div>
+
+          <div>
+            <label className="block text-xxs text-gb-fg-s mb-1">Background Effect</label>
+            <select 
+              value={useVoiceStore((s) => s.bgMode)}
+              onChange={(e) => {
+                const mode = e.target.value as 'disabled' | 'background-blur' | 'virtual-background';
+                if (mode === 'virtual-background') {
+                  const url = prompt('Enter image URL for virtual background:', 'https://images.unsplash.com/photo-1579546929518-9e396f3cc809');
+                  if (url !== null) {
+                    useVoiceStore.getState().setBgMode(mode, url);
+                  }
+                } else {
+                  useVoiceStore.getState().setBgMode(mode);
+                }
+              }}
+              className="w-full bg-gb-bg-s text-gb-fg border border-gb-bg-t rounded-sm px-2 py-1 text-sm outline-none focus:border-gb-orange"
+            >
+              <option value="disabled">None</option>
+              <option value="background-blur">Blur Background</option>
+              <option value="virtual-background">Virtual Background (Image URL)</option>
+            </select>
+          </div>
        </div>

        <div className="mt-6 flex justify-end">