LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Wiki Activity

feat(webrtc): add UI to select audio/video input and output devices

Browse Source
This commit is contained in:
Dustin Newkirk
2026-07-06 12:56:27 +00:00
parent 59846fc1e4
commit 9aeedb1a53
3 changed files with 133 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/DeviceSettingsModal.tsx
+118
View File
@@ -0,0 +1,118 @@
import { useEffect, useState } from 'react';
import { useVoiceStore } from '../stores/voice.ts';
interface Props {
onClose: () => void;
}
export function DeviceSettingsModal({ onClose }: Props) {
const room = useVoiceStore((s) => s._room);
const [audioInputs, setAudioInputs] = useState<MediaDeviceInfo[]>([]);
const [audioOutputs, setAudioOutputs] = useState<MediaDeviceInfo[]>([]);
const [videoInputs, setVideoInputs] = useState<MediaDeviceInfo[]>([]);
const [activeAudioInput, setActiveAudioInput] = useState<string>('');
const [activeAudioOutput, setActiveAudioOutput] = useState<string>('');
const [activeVideoInput, setActiveVideoInput] = useState<string>('');
useEffect(() => {
async function loadDevices() {
if (!room) return;
try {
// Request permissions first to ensure we get labels
await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
} catch (e) {
// Ignore if denied or no devices
}
const devices = await navigator.mediaDevices.enumerateDevices();
setAudioInputs(devices.filter((d) => d.kind === 'audioinput'));
setAudioOutputs(devices.filter((d) => d.kind === 'audiooutput'));
setVideoInputs(devices.filter((d) => d.kind === 'videoinput'));
// If room exposes getActiveDevice(kind)
if (typeof room.getActiveDevice === 'function') {
const ai = room.getActiveDevice('audioinput');
const ao = room.getActiveDevice('audiooutput');
const vi = room.getActiveDevice('videoinput');
if (ai) setActiveAudioInput(ai);
if (ao) setActiveAudioOutput(ao);
if (vi) setActiveVideoInput(vi);
}
}
loadDevices();
}, [room]);
const handleDeviceChange = async (kind: MediaDeviceKind, deviceId: string) => {
if (!room) return;
try {
await room.switchActiveDevice(kind, deviceId);
if (kind === 'audioinput') setActiveAudioInput(deviceId);
if (kind === 'audiooutput') setActiveAudioOutput(deviceId);
if (kind === 'videoinput') setActiveVideoInput(deviceId);
} catch (e) {
console.error('Failed to switch device', e);
}
};
return (
<div className="fixed inset-0 bg-gb-bg/80 z-50 flex items-center justify-center p-4">
<div className="bg-gb-bg border border-gb-bg-t rounded-sm shadow-xl p-4 w-full max-w-md">
<h3 className="text-sm font-bold text-gb-fg-f mb-4">Device Settings</h3>
<div className="space-y-4">
<div>
<label className="block text-xxs text-gb-fg-s mb-1">Microphone</label>
<select
value={activeAudioInput}
onChange={(e) => handleDeviceChange('audioinput', e.target.value)}
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="">Default Microphone</option>
{audioInputs.map(d => (
<option key={d.deviceId} value={d.deviceId}>{d.label || `Microphone (${d.deviceId.slice(0, 5)}...)`}</option>
))}
</select>
</div>
<div>
<label className="block text-xxs text-gb-fg-s mb-1">Speaker</label>
<select
value={activeAudioOutput}
onChange={(e) => handleDeviceChange('audiooutput', e.target.value)}
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="">Default Speaker</option>
{audioOutputs.map(d => (
<option key={d.deviceId} value={d.deviceId}>{d.label || `Speaker (${d.deviceId.slice(0, 5)}...)`}</option>
))}
</select>
</div>
<div>
<label className="block text-xxs text-gb-fg-s mb-1">Camera</label>
<select
value={activeVideoInput}
onChange={(e) => handleDeviceChange('videoinput', e.target.value)}
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="">Default Camera</option>
{videoInputs.map(d => (
<option key={d.deviceId} value={d.deviceId}>{d.label || `Camera (${d.deviceId.slice(0, 5)}...)`}</option>
))}
</select>
</div>
</div>
<div className="mt-6 flex justify-end">
<button
onClick={onClose}
className="px-3 py-1 bg-gb-bg-s hover:bg-gb-bg-t text-gb-fg-f text-sm rounded-sm transition-colors border border-gb-bg-t"
>
[close]
</button>
</div>
</div>
</div>
);
}
web/src/components/VoiceControls.tsx
+14
View File
@@ -1,6 +1,9 @@
import { useState } from 'react';
import { useVoiceStore } from '../stores/voice.ts';
import { DeviceSettingsModal } from './DeviceSettingsModal.tsx';
export function VoiceControls() {
const [showDeviceSettings, setShowDeviceSettings] = useState(false);
const isMuted = useVoiceStore((state) => state.isMuted);
const isDeafened = useVoiceStore((state) => state.isDeafened);
const isVideoOn = useVoiceStore((state) => state.isVideoOn);
@@ -71,6 +74,13 @@ export function VoiceControls() {
[ns{noiseSuppression ? '●' : '○'}]
</button>
<div className="flex-1" />
<button
onClick={() => setShowDeviceSettings(true)}
className="px-1.5 py-0.5 rounded-sm transition-colors text-gb-fg-s hover:text-gb-fg-f hover:bg-gb-bg-t border border-transparent mr-2"
title="Device Settings"
>
[⚙]
</button>
<button
onClick={leaveVoice}
className="px-1.5 py-0.5 rounded-sm text-gb-red hover:bg-gb-red hover:text-gb-bg transition-colors border border-transparent hover:border-gb-red"
@@ -78,6 +88,10 @@ export function VoiceControls() {
>
[x]
</button>
{showDeviceSettings && (
<DeviceSettingsModal onClose={() => setShowDeviceSettings(false)} />
)}
</div>
);
}