Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[WIP] Improvements, Bugfixes: Improve audio experience when running in HTTP mode

This commit is contained in:
Alex P 2025-09-21 21:11:30 +00:00
parent b63af01d73
commit 7060f9e8d6
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/popovers/AudioControlPopover.tsx
View File

@ -353,9 +353,9 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
{/* HTTPS requirement notice */} {/* HTTPS requirement notice */}
{isHttpsRequired && ( {isHttpsRequired && (
<div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 p-2 rounded-md"> <div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 p-2 rounded-md">
<p className="font-medium mb-1">HTTPS Required for Microphone</p> <p className="font-medium mb-1">HTTPS Required for Microphone Input</p>
<p> <p>
Microphone access requires a secure connection. Please access this device using HTTPS instead of HTTP to enable audio input features. Microphone access requires a secure connection due to browser security policies. Audio output works fine on HTTP, but microphone input needs HTTPS.
</p> </p>
<p className="mt-1"> <p className="mt-1">
<span className="font-medium">Current:</span> {window.location.protocol + '//' + window.location.host} <span className="font-medium">Current:</span> {window.location.protocol + '//' + window.location.host}
@ -417,7 +417,7 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
<select <select
value={selectedOutputDevice} value={selectedOutputDevice}
onChange={(e) => handleAudioOutputDeviceChange(e.target.value)} onChange={(e) => handleAudioOutputDeviceChange(e.target.value)}
disabled={devicesLoading || isHttpsRequired} disabled={devicesLoading}
className="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50 disabled:text-slate-500 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-300 dark:focus:border-blue-400 dark:disabled:bg-slate-800" className="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:bg-slate-50 disabled:text-slate-500 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-300 dark:focus:border-blue-400 dark:disabled:bg-slate-800"
> >
{audioOutputDevices.map((device) => ( {audioOutputDevices.map((device) => (
@ -430,7 +430,7 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
<button <button
onClick={refreshDevices} onClick={refreshDevices}
disabled={devicesLoading || isHttpsRequired} disabled={devicesLoading}
className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700" className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-200 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 dark:border-slate-600 dark:text-slate-300 dark:hover:bg-slate-700"
> >
<MdRefresh className={cx("h-4 w-4", devicesLoading && "animate-spin")} /> <MdRefresh className={cx("h-4 w-4", devicesLoading && "animate-spin")} />

21
ui/src/hooks/useAudioDevices.ts
View File

@ -39,11 +39,24 @@ export function useAudioDevices(): UseAudioDevicesReturn {
setAudioInputDevices([ setAudioInputDevices([
{ deviceId: 'https-required', label: 'HTTPS Required for Microphone Access', kind: 'audioinput' } { deviceId: 'https-required', label: 'HTTPS Required for Microphone Access', kind: 'audioinput' }
]); ]);
setAudioOutputDevices([ // Speakers still work on HTTP, so enumerate them normally
{ deviceId: 'https-required', label: 'HTTPS Required for Speaker Selection', kind: 'audiooutput' } const devices = await navigator.mediaDevices.enumerateDevices();
]); const outputDevices: AudioDevice[] = [
{ deviceId: 'default', label: 'Default Speaker', kind: 'audiooutput' }
];
devices.forEach(device => {
if (device.kind === 'audiooutput' && device.deviceId !== 'default') {
outputDevices.push({
deviceId: device.deviceId,
label: device.label || `Speaker ${device.deviceId.slice(0, 8)}`,
kind: 'audiooutput'
});
}
});
setAudioOutputDevices(outputDevices);
setSelectedInputDevice('https-required'); setSelectedInputDevice('https-required');
setSelectedOutputDevice('https-required');
throw new Error('Microphone access requires HTTPS connection. Please use HTTPS to access audio features.'); throw new Error('Microphone access requires HTTPS connection. Please use HTTPS to access audio features.');
} }