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 */}
{isHttpsRequired && (
<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>
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 className="mt-1">
<span className="font-medium">Current:</span> {window.location.protocol + '//' + window.location.host}
@ -417,7 +417,7 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
<select
value={selectedOutputDevice}
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"
>
{audioOutputDevices.map((device) => (
@ -430,7 +430,7 @@ export default function AudioControlPopover({ microphone }: AudioControlPopoverP
<button
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"
>
<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([
{ deviceId: 'https-required', label: 'HTTPS Required for Microphone Access', kind: 'audioinput' }
]);
setAudioOutputDevices([
{ deviceId: 'https-required', label: 'HTTPS Required for Speaker Selection', kind: 'audiooutput' }
]);
// Speakers still work on HTTP, so enumerate them normally
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');
setSelectedOutputDevice('https-required');
throw new Error('Microphone access requires HTTPS connection. Please use HTTPS to access audio features.');
}